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 6 of 6
  1. #1
    New Coder
    Join Date
    May 2011
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Integrating LightBox Function With JQuery Image Gallery

    Hello Everyone,

    I have created a JQuery image gallery based on this code (http://manos.malihu.gr/simple-jquery...-image-gallery and now I'd like to integrate LightBox functionality just like there is in this one (http://www.catchmyfame.com/jquery/in...2/demo/d8.html...

    My current progress is here: http://santamarinas.com/Vivi/index20.html

    I was able to incorporate LightBox functionality to my links on the page by adding this code:

    Code:
    $(function() {
    	$('#col1 a').lightBox(); 
    	$('#col2outer a').lightBox(); 
    ......
    However, I am not sure how to add LightBox functionality to the image which is changed by the JQuery gallery and how to make it clickable...

    I believe what I need to do is add:

    Code:
    	$('#bg a').lightBox(); // "bg" is the name of the DIV container with the main image
    so far good, and then...

    make the main image an HREF... but I am not sure how to do it in a way that it will recognize the current image being displayed and take the user to that particular image in the LightBox
    Code:
    <a href="?????"><img src="images/work/EVA.jpg" alt="Denebola" title="Denebola" id="bgimg" /></a>
    My current code is too long to post, but can be found at my progress page: http://santamarinas.com/Vivi/index20.html

    Does anyone have any thoughts on this?

    Thank you!!

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    Usually on lightBoxes, the anchor element "a" has a link (href="...") to the bigger sized picture, and the img element has a src="..." to the smaller sized picture.

  • #3
    New Coder
    Join Date
    May 2011
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts
    thank you, devnull... however the part that I am not quite sure how to code is to have the lightbox image correspond to the one that is currently displayed (after I click the thumbnail)...

    When I add an href, the lightbox function works great, but it loads that same image every time. It seems that I need something in the script that updates that HREF everytime I click a new image.

    Here is what I have so far: http://santamarinas.com/Vivi/index23.html

    I would greatly appreciate any guidance with this!!

    Thanks!

  • #4
    New Coder
    Join Date
    May 2011
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Just checking to see if anyone has any ideas on how i can code this so that each image displayed will open a different lightbox image...

    below is my latest working site:
    http://santamarinas.com/Vivi/index24.html

    Any thoughts?

    Thank you!!

  • #5
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    You could try this - give the main image an id:
    Code:
    <div id="bg"><a href="images/work/EVA.jpg" id="imgHolder">
    then add the highlighted code below to your existing code:
    Code:
    $(function() {
    	$('#col1 a').lightBox(); // Select all links in object with  ID
    	$('#col2outer a').lightBox(); // Select all links in object with  ID
    	$("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide', initialIndex: null});
    	$("#accordion2").tabs("#accordion2 div.pane", {tabs: 'h2', effect: 'slide', initialIndex: null, active: false});
    	$('.content a').click(function() {
    		$('#imgHolder').attr('href',$(this).attr('href'));
    	});
    });
    This should replace the link for the main image to that of the thumbnail you have just clicked.

    Hopefully this won't interfere with the lightbox feature - but keep a copy of your page just in case!

    It might be worth investigating the lightbox docs as it may already offer a way to do this.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    rsantamarina (06-06-2011)

  • #6
    New Coder
    Join Date
    May 2011
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Andrew,

    Wow! Brilliant again!! That did it!! Thank you!!

    Works exactly as you described it would!!


  •  

    Posting Permissions

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