Skip navigation

Dreamweaver

Currently Being Moderated

jQuery Flicker Feed Plugin Help

Jan 27, 2013 2:44 AM

Tags: #html #css #flickr_publishing #jquizme_plugin

Im trying to use this plugin from http://www.gethifi.com/blog/a-jquery-flickr-feed-plugin on my website at http://danielwaddon.com/ but cant seam to get it working.

Its in the bottom of the website. any information as to what im doing wrong and what I need to do?

Thanks

Daniel

985 Views 19 Replies Latest reply: Nancy O., Jan 30, 2013 11:27 AM

Replies

Currently Being Moderated

1. Nancy O.,

Jan 27, 2013 1:16 PM in reply to Daniel-Waddon

Report

You might want to fix your code errors before you add any more stuff to your page.
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fdanielwaddon. com%2F

Nancy O.

|
Mark as:
Currently Being Moderated

2. Daniel-Waddon,

Jan 27, 2013 1:23 PM in reply to Nancy O.

Report

a lot of the error are because of having the below and more things like that.. If I run the clean up the website breaks and aline to the left and not the centre

-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;

|
Mark as:
Currently Being Moderated

3. Nancy O.,

Jan 27, 2013 1:30 PM in reply to Daniel-Waddon

Report

Vendor specific CSS properties are not the problem and you can safely skip those warnings.

However you have other more serious errors such as closing tags that don't match your document type, re-using IDs, <script> tags without type, etc... Until you sort out all the code errors, it's very hard to trouble shoot new problems.

Nancy O.

|
Mark as:
Currently Being Moderated

4. Daniel-Waddon,

Jan 27, 2013 1:37 PM in reply to Nancy O.

Report

and how do i safely skip those warnings?

|
Mark as:
Currently Being Moderated

5. Nancy O.,

Jan 27, 2013 1:41 PM in reply to Daniel-Waddon

Report

Simply ignore warnings about vender-specific pre-fixes (-moz, -webkit, -ms, -o).
Concentrate on your other 37 code errors.

Nancy O.

|
Mark as:
Currently Being Moderated

6. Daniel-Waddon,

Jan 27, 2013 1:55 PM in reply to Nancy O.

Report

what about now. no errors

|
Mark as:
Currently Being Moderated

7. Nancy O.,

Jan 27, 2013 2:07 PM in reply to Daniel-Waddon

Report

You're getting there...

On line 99, replace this:
<div class="contentinformation" id="Webdesign">^

with this:
<div class="contentinformation">

On line 106, replace this:
<div class="contentinformation" id="Ecommercedesign">^

with this:
<div class="contentinformation">

On line 120, replace this:
<div class="contentinformation" id="logodesign">^

with this:
<div class="contentinformation">

Also, go to Commands > Spell check in DW.

Nancy O.

|
Mark as:
Currently Being Moderated

8. Daniel-Waddon,

Jan 27, 2013 2:12 PM in reply to Nancy O.

Report

done

|
Mark as:
Currently Being Moderated

9. Nancy O.,

Jan 27, 2013 2:35 PM in reply to Daniel-Waddon

Report

First, I see conflicting jQuery libraries in your<head> tags.

Your Flicker Feed plugin requires 1.4.2. I don't know if it will work with other versions of jQuery. So try changing your jQuery library to this one.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Secondly, your FlickerFeed code needs to be wrapped inside <ul> and <script> tags like this:

<p>Flicker Feed</p>
<ul>
<script type="text/javascript">
$(document).ready(function(){
$('#basicuse').jflickrfeed({
    limit: 14,
    qstrings: {
        id: '41616368@N03'
    },
    itemTemplate:
    '<li>' +
        '<a href="{{image_b}}"><img src="{{image_s}}" alt="{{title}}"></a>' +
    '</li>'
     });
});
</script>
</ul>

Hope it works for you!

Nancy O.

|
Mark as:
Currently Being Moderated

10. Daniel-Waddon,

Jan 27, 2013 2:40 PM in reply to Nancy O.

Report

nope still dont work

|
Mark as:
Currently Being Moderated

11. Nancy O.,

Jan 27, 2013 3:07 PM in reply to Daniel-Waddon

Report

Try a different one.
http://www.zazar.net/developers/jquery/zflickrfeed/

Nancy O.

|
Mark as:
Currently Being Moderated

12. Daniel-Waddon,

Jan 27, 2013 3:17 PM in reply to Nancy O.

Report

Thanks for everything you have been great. One question I have this error and im not sure how to fix it

Line 13, Column 78: required attribute "type" not specified
…src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
??

|
Mark as:
Currently Being Moderated

13. Nancy O.,

Jan 27, 2013 3:21 PM in reply to Daniel-Waddon

Report

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Nancy O.

|
Mark as:
Currently Being Moderated

14. Daniel-Waddon,

Jan 27, 2013 3:28 PM in reply to Nancy O.

Report

do I put that at the begining? so like this

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

???

|
Mark as:
Currently Being Moderated

15. Nancy O.,

Jan 27, 2013 3:28 PM in reply to Daniel-Waddon

Report

Yes.

N

|
Mark as:
Currently Being Moderated

16. Daniel-Waddon,

Jan 27, 2013 3:32 PM in reply to Nancy O.

Report

Thank you Ill have a look at the other one and post up if I need to.

Thanks again Nancy

|
Mark as:
Currently Being Moderated

17. Daniel-Waddon,

Jan 28, 2013 1:43 AM in reply to Nancy O.

Report

HI again

Ok I have started to add this and cant seam to get my feed working only the public one stated. I must be changing or not changing something.

Could you tell me how to get my feed to show I think I have to edit the juery.zflickrfeed.min.js? my flicker id is 41616368@N03

I would like my feed to look like the attached image. any help getting this look would be great

Thanks again

|
Mark as:
Currently Being Moderated

18. Daniel-Waddon,

Jan 30, 2013 1:08 AM in reply to Daniel-Waddon

Report

Anyone?

|
Mark as:
Currently Being Moderated

19. Nancy O.,

Jan 30, 2013 11:27 AM in reply to Daniel-Waddon

Report

Use CSS to style the .odd and .even flickrRow classes.

.odd {
list-style: none;
clear: left;
float: left;
width: auto;
}

.even {
list-style: none;
float: left;
margin-left: 25px;
width: auto;
}

Sample HTML:

<div id="test" class="flickrFeed">
<ul>
<li class="flickrRow odd"><img src="image1.jpg"/></li>
<li class="flickrRow even"><img src="image2.jpg"/></li>
<li class="flickrRow odd"><img src="image3.jpg"/></li>
<li class="flickrRow even"><img src="image4.jpg"/></li>
</ul>
</div>

Nancy O.

|
Mark as: