Cheers
Rich

Rich

Rich

If it helps and I can get it to work like I explain then I’m happy to give the code over and any users on this blog can have it

Rich

I have just sent you an email, hope you have time to answer as I’m quite stuck re the item.description flickr pull for lightbox.

Richard

Hi Calvin:
Yes, will do – I’m actually in the process of updating the script so it is more compatible with PHP 5 so will send it over as soon as it’s done – not long to go now!.

Cheers
Rich

Hi Richard:

Yes, could you please share the full html and php code with me? I would like to implemented a full gallery on my site as well.

You will need to concatenate the item.title and item.description strings into one string and add that as the title attribute.

Sorry having trouble adding code here with: pre>YOUR CODE HERE

Meant to say all that is supported is the title attribure in lightbox, my implemented code is:

.wrap(‘‘)

Ok I have the title pulled in now, but as far as I can gather there is no tag in lightbox that supports the description all that’s available is:

.wrap('')

Hi Trevor, Thanks for your help on this, ok so I have tried to add item.title and item.description to the each statement but all it gives me is an error… Help LOL

I thought these might work, but I havetried them everywhere and I can’t get it going…

$(“#title”).html(data.title);
$(“#description”).html(data.description);

Sorry to be a pain but could you show me how in the code below… I’m still a newbe on this and it took me long enough to figure this out.

$(document).ready(function() {
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=39724364@N04&lang=en-us&format=json&jsoncallback=?", function(data){
$.each(data.items, function(i,item){
if(i<=11){
$("").attr("src", item.media.m).appendTo("#FlickrImages ul")
.wrap('<a>')
.wrap("")
}
});
$('a[@rel*=lightbox]').lightBox();
});
});

So if you just include the title and description from the JSON call as the title attribute, you should be good.

This is the code I have implemented so far… Hope you can help

$(document).ready(function() {
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=39724364@N04&lang=en-us&format=json&jsoncallback=?", function(data){
$.each(data.items, function(i,item){
if(i<=11){
$("").attr("src", item.media.m).appendTo("#FlickrImages ul")
.wrap('<a>')
.wrap("")
}
});
$('a[@rel*=lightbox]').lightBox();
});
});

$('body').append('<div id="overlay"></div>')
$('#overlay').css('opacity','0.5');

Then you will have to add in some CSS to make sure it fills the entire window, has a background color, and is positioned appropriately.

Where did you go to “I modified it a little to use table-less markup and for the entire page to grey out.”

I like the Facebox script buy I need to grey out the page as well.

Quote
“Of course, instead of using JavaScript to pull in your flickr feed, you can just use this WordPress plugin.”

Where’s the fun in that right???

Blu

wrap("<div class='flickr-thumb' />")

would be replaced with this

wrap('<a href="'+item.link+'" rel="lightbox"/>').wrap("<div class='flickr-thumb' />")

That way, you will be ready to add in my code. Of course you will need to change the selector to be what you have. Make sure to add in my JavaScript after the JavaScript that you have pulling in the flickr feed. Of course, instead of using JavaScript to pull in your flickr feed, you can just use this WordPress plugin.

$(function(){
	$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?ids=1384346@N02&lang=en-us&format=json&jsoncallback=?", function(data){
		$.each(data.items, function(index, item){
			$("<img/>").attr("src", item.media.m).addClass("thumb").appendTo(".flickr .inside").wrap("<div class='flickr-thumb' />");
			if ( index == 7 ) return false;
		});
	});
});

Blu

@Pat-
Yeah I need to do a little tweaking on the lightbox script. This is the line I need to fix:

$('#overlay').css('height',arrayPageSize[1]+10);

It only needs to add the extra 10 pixels in IE 6 I believe. What browser were you using?

I’ve been looking for something like this for a long time now! Thanks so much.

There is one thing I noticed when I opened one of the photos into the lightbox box. For some reason, even though the picture doesn’t go anywhere near the bottom of my window, there is something that is causing a vertical scroll-bar to appear. Don’t know if there’s a “height:” issue somewhere?

Thanks!

Greetings

The script uses the Flickr API, some PHP code and lightbox. Currently I have this running on PHP4.