Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    Regular Coder dniwebdesign's Avatar
    Join Date
    Dec 2003
    Location
    Carrot River, Saskatchewan
    Posts
    842
    Thanks
    15
    Thanked 9 Times in 9 Posts

    Question id of link brought in via ajax into div...

    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.
    Dawson Irvine
    CEO - DNI Web Design
    http://www.dniwebdesign.com

  • #2
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    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; 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.

  • #3
    Regular Coder dniwebdesign's Avatar
    Join Date
    Dec 2003
    Location
    Carrot River, Saskatchewan
    Posts
    842
    Thanks
    15
    Thanked 9 Times in 9 Posts
    It still doesn't explain how to get that id into the iframe window generated by fancy box.... depending on which photo I click.
    Dawson Irvine
    CEO - DNI Web Design
    http://www.dniwebdesign.com

  • #4
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    Oh... I was thinking you had some mechanism to pass it that wasn't working. Ok I'll take another look.

  • #5
    Regular Coder dniwebdesign's Avatar
    Join Date
    Dec 2003
    Location
    Carrot River, Saskatchewan
    Posts
    842
    Thanks
    15
    Thanked 9 Times in 9 Posts
    Quote Originally Posted by Fumigator View Post
    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?
    Dawson Irvine
    CEO - DNI Web Design
    http://www.dniwebdesign.com

  • #6
    Regular Coder dniwebdesign's Avatar
    Join Date
    Dec 2003
    Location
    Carrot River, Saskatchewan
    Posts
    842
    Thanks
    15
    Thanked 9 Times in 9 Posts
    Anybody have ideas?
    Dawson Irvine
    CEO - DNI Web Design
    http://www.dniwebdesign.com

  • #7
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    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?

  • #8
    Regular Coder dniwebdesign's Avatar
    Join Date
    Dec 2003
    Location
    Carrot River, Saskatchewan
    Posts
    842
    Thanks
    15
    Thanked 9 Times in 9 Posts
    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.
    Dawson Irvine
    CEO - DNI Web Design
    http://www.dniwebdesign.com

  • #9
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    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?

  • #10
    Regular Coder dniwebdesign's Avatar
    Join Date
    Dec 2003
    Location
    Carrot River, Saskatchewan
    Posts
    842
    Thanks
    15
    Thanked 9 Times in 9 Posts
    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.
    Dawson Irvine
    CEO - DNI Web Design
    http://www.dniwebdesign.com

  • #11
    Regular Coder dniwebdesign's Avatar
    Join Date
    Dec 2003
    Location
    Carrot River, Saskatchewan
    Posts
    842
    Thanks
    15
    Thanked 9 Times in 9 Posts
    umm... anyone know how?
    Dawson Irvine
    CEO - DNI Web Design
    http://www.dniwebdesign.com

  • #12
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    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:

    Code:
    $(".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
    			}
    		)
    	});
    });

  • Users who have thanked Spudhead for this post:

    dniwebdesign (08-18-2010)

  • #13
    Regular Coder dniwebdesign's Avatar
    Join Date
    Dec 2003
    Location
    Carrot River, Saskatchewan
    Posts
    842
    Thanks
    15
    Thanked 9 Times in 9 Posts
    Did a few modifications and that worked perfectly... thanks man.
    Dawson Irvine
    CEO - DNI Web Design
    http://www.dniwebdesign.com


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •