...

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



dniwebdesign
08-06-2010, 05: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.

Fumigator
08-06-2010, 05: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.

dniwebdesign
08-06-2010, 06: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.

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

dniwebdesign
08-07-2010, 12: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?

dniwebdesign
08-08-2010, 01:21 AM
Anybody have ideas?

Fumigator
08-09-2010, 03: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?

dniwebdesign
08-10-2010, 02: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.

Spudhead
08-10-2010, 10: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?

dniwebdesign
08-10-2010, 02: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.

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

Spudhead
08-17-2010, 10: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
}
)
});
});

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum