View Full Version : jQuery id of link brought in via ajax into div...

08-06-2010, 06:16 AM
Not the greatest of title I know but here's the low down and I hope it makes sense...

I have a photo gallery in which I am building using some fancy jquery, ajax, and a lightbox type plugin called "Fancybox". Now, I can get my thumbnails into my page just fine, and I can call the fancy box as well. I bring my images into the page and place them into a div <icode><div id="photo_gal"></div></icode>. Now, I call this in using the .live('click', function()); call so I should still be able to perform calls on the loaded content, but it appears not.

I am trying to get it so when I click on the image an id is sent to the fancy box script to tell it which image I clicked so it can load the larger image and info about the photograph. This is where I am having trouble.

Check out http://www.dni-server.no-ip.com/vl/gallery.php and view the source code. It's a live preview so things may be changing while I play around with it.

08-06-2010, 06:41 AM
I dug a little and noticed you are naming your Id tags using just a number, i.e. id="6". This isn't valid according to w3.org (see section 6.2 here (http://www.w3.org/TR/html4/types.html); IDs must begin with a letter) but I have no idea if this is the root of your issue. It's the first thing I would change though to find out if it is indeed the problem.

08-06-2010, 07:05 AM
It still doesn't explain how to get that id into the iframe window generated by fancy box.... depending on which photo I click.

08-06-2010, 06:01 PM
Oh... I was thinking you had some mechanism to pass it that wasn't working. Ok I'll take another look.

08-07-2010, 01:37 AM
Oh... I was thinking you had some mechanism to pass it that wasn't working. Ok I'll take another look.

Have you taken another look?

08-08-2010, 02:21 AM
Anybody have ideas?

08-09-2010, 04:58 PM
Not knowning much about the fancybox plugin, my first question is, why are you using type: "iframe" instead of type: "post", where you can send information to fancybox via HTTP post request?

08-10-2010, 03:37 AM
I personally thought it would be easier, but apparently not... I am still unsure of how to pass the value of what I clicked on to it to display the right image and information from the database.

08-10-2010, 11:18 AM
I'm a bit confused by what you want to happen.

When one of those alphabetical links is clicked, you load a bunch of thumbnails via ajax. And when one of those thumbnails is clicked, you want a fancybox to open up with the fullsize image in it? Is that correct? Or do you want the fancybox to display a page of information, including a fullsize image?

08-10-2010, 03:27 PM
Page of information with full size image. Which I can make happen, except for getting what thumbnail is clicked to get that specific "photo" page.

08-17-2010, 08:26 AM
umm... anyone know how?

08-17-2010, 11:03 AM
Sorry, forgot I'd not replied to this.

I think I see what you're doing - there may be another approach.

When the alphabetical links are clicked, you populate #photo_gal with a list of thumbnail div containers; then you call fancybox() on those containers. Actually, at the moment you appear to be calling fancybox() on #photo_list, which won't work because:
1. the divs in your markup have an id of #photos_list, not #photo_list
2. all the thumbnail divs have the same id of #photos_list: you can't have more than one element with a particular id.

Anyhow, I don't think calling fancybox directly on the div is going to give you the result you need. You want to fetch a page of HTML based on the id of the thumbnail, and display that in a fancybox.

First, change your markup: all those divs that have an ID of #photos_list: change them so they have a class of #photos_list.

Then something like this should work:

$(".photos_list a.the_elevators").live('click', function(){
var thumb_id = $(this).attr('id');
$.get('elevator_information_page.php', {id:thumb_id}, function(response){
$.fancybox(response, {
// your fancybox display options

08-18-2010, 06:47 AM
Did a few modifications and that worked perfectly... thanks man.