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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    light box issue, displays duplicate of image html issue?

    I've got an issue with my image gallery, I'm using lightbox and jQuery. I'm new to coding but know some basics. Was trying to make my image gallery functional. I'm sure everyone is pretty familiar with light box (Lightbox). I was trying to mimic what they were saying to do. I have thumbnails that a user can click which opens the image gallery, my goal would be that no matter which of the four images I have, the user would access the light box and be able to then control "next" and "previous" via the light box. The controls in the light box already work properly. The part that I need help with is when you click on the first image.
    Code:
    <a href="images/respectyourelders-full.png" data-lightbox="recentwork" data-title="This design was made for an apparel company called VolkWear Clothing."><img src="images/car1.png" alt="Respect your Elders Illustration" title="Respect your Elders Illustration" /></a>
    it opens the light box but it will say "1of4 images" I have my light box currently on just the first two images as I was testing it out. Per the lightbox site, it said that
    Code:
    data-lightbox="recentwork"
    was like the grouping or "folder".
    Code:
    <a href...-full.png
    are my full-sized images and the
    Code:
    <img src=.....png
    are the thumbnails.

    Thanks and I look forward to your help.
    I'm pretty new to this so I like to be given the answer with an explanation as to what I had wrong and why it wasn't working. That way I can better understand it.

    quoted from lightbox
    If you have a group of related images that you would like to combine into a set, use the same data-lightbox attribute value for all of the images. For example:
    <a href="img/image-2.jpg" data-lightbox="roadtrip">Image #2</a>
    <a href="img/image-3.jpg" data-lightbox="roadtrip">Image #3</a>
    <a href="img/image-4.jpg" data-lightbox="roadtrip">Image #4</a>
    Code:
    <div id="slider">
    
    			<ul>
                	<li>
                    <a href="images/respectyourelders-full.png" data-lightbox="recentwork" data-title="This design was made for an apparel company called VolkWear Clothing."><img src="images/car1.png" alt="Respect your Elders Illustration" title="Respect your Elders Illustration" /></a>
                    <a href="images/aircool-full.png" data-lightbox="recentwork" data-title="Air Cool'd Double Cab apparel design for VolkWear CLothing."><img src="images/car2.png" alt="Car2" title="Car2" /></a>
                    <a href="images/aircoolvert-full.png"><img src="images/car3.png" alt="Car3" title="Car3" /></a>
                    <a href="images/car4-full.png"><img class="removeMargin" src="images/car4.png" alt="Car4" title="Car4" /></a>
                    <a href="images/car5-full.png"><img src="images/car5.png" alt="Car5" title="Car5" /></a>
                    <a href="images/car6-full.png"><img src="images/car6.png" alt="Car6" title="Car6" /></a>
                    <a href="images/car7-full.png"><img src="images/car7.png" alt="Car7" title="Car7" /></a>
                    <a href="images/car8-full.png"><img class="removeMargin" src="images/car8.png" alt="Car8" title="Car8" /></a>
                    
                    </li>

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Can you provide a link to your page? We'd really need to see your full html and js.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • #3
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    Can you provide a link to your page? We'd really need to see your full html and js.
    I don't have a link, it's not a live site.. I could upload the files (html,css,js,jQuery) if that would help.

    I wish I knew what I was doing and could figure it out.
    https://www.dropbox.com/s/j7b4yfk319ydkb6/website.zip

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Your carousel script is causing the issue. This creates a clone of the bank of images for the carousel to work - which results in 4 images with the data-lightbox attribute and hence 4 images on the lightbox.
    If I remove the carousel script then only two images are displayed in the lightbox.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • Users who have thanked SB65 for this post:

    html_css_noob (07-31-2014)

  • #5
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    Your carousel script is causing the issue. This creates a clone of the bank of images for the carousel to work - which results in 4 images with the data-lightbox attribute and hence 4 images on the lightbox.
    If I remove the carousel script then only two images are displayed in the lightbox.
    So, whats the best way to tackle this, I like the carousel effect and would like to keep it if possible. Could I get it working the way I would like. I have 16 total images I'll end up displaying.

    Thanks for looking at my code SB65, hopefully it wasn't too messy for you

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    I think there isn't a trivial fix since neither your lightbox script nor your carousel script allow you any options (that I can see) to either not copy across the data-lightbox attribute or to target the elements on which the lightbox is set up more specifically. You could try and write some additional javascript to remove the attribute on the cloned elements but that's likely to get messy.
    I think you need to find a different pair of scripts that will allow you more control over what you're doing. What you have at the moment are a couple of very lightweight scripts - which is fine - but here their simplicity is preventing you doing what you want.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • #7
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    I think there isn't a trivial fix since neither your lightbox script nor your carousel script allow you any options (that I can see) to either not copy across the data-lightbox attribute or to target the elements on which the lightbox is set up more specifically. You could try and write some additional javascript to remove the attribute on the cloned elements but that's likely to get messy.
    I think you need to find a different pair of scripts that will allow you more control over what you're doing. What you have at the moment are a couple of very lightweight scripts - which is fine - but here their simplicity is preventing you doing what you want.
    Thanks so much, guess I'll put it on hold and keep looking at code until I can get it figured out. I'm trying to self teach and sometimes it's hard mixing two tutorials together to make one thing work when you're not fully sure how it should be combined.

    Thanks again.


  •  

    Posting Permissions

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