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
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post

    Thumbnails not working

    Hello

    If I have three separate IDs, each with their own external CSS stylesheet) for each of the three short rows of thumbnails on my Web page, why
    would those separate IDs be ignored?

    There should only be three groups of four images in a little slideshow like this:

    Thumbnails 1-4

    Thumbnails 5-8

    Thumbnails 9-12

    but the distinctions, again, with their own divs/ids, are ignored and so the slideshow continues from 1-12.

    That implies it is a JS issue and not a CSS scripting problem.

    The site is here if anyone has any ideas about how to limit the slideshow to each group of four thumbnails: http://www.bayingwolf.com/colour1.asp

    Steve

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,032
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    Maybe you should ask the people who created that light box whether it was ever intended that it would allow multiple light boxes on one page?

    But there are clearly things wrong in your code.

    You include the exact same ".js" setup file three times, one per group of 4 images.

    How does it make sense to include the exact same file more than once?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    Hello OP

    It's not the same:

    <div id="vlightbox1">
    <a class="vlightbox1" etc

    </div>

    <script src="colour_files/vlb_engine/vlbdata1.js" type="text/javascript"></script>


    <div id="vlightbox2">
    <a class="vlightbox2" etc

    </div>

    <script src="colour_files/vlb_engine/vlbdata1.js" type="text/javascript"></script>

    <div id="vlightbox3">
    <a class="vlightbox3" etc

    </div>

    <script src="colour_files/vlb_engine/vlbdata1.js" type="text/javascript"></script>

    </div>

    Yes, they pull on the same JS file - that should not be a problem.

    Incidentally, the 'add records' ASP issue you helped me with seems to be working, so a big thank you to you.

    You take care,

    Steve

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,032
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    Look again.

    Look at the code of "colour_files/vlb_engine/vlbdata1.js"

    Code:
    jQuery(document).ready(function () {
        window.Lightbox = new jQuery().visualLightbox({
            autoPlay: true,
            borderSize: 12,
            classNames: 'vlightbox1',
            closeLocation: 'top',
            descSliding: true,
            enableRightClick: false,
            enableSlideshow: true,
            prefix: 'vlb1',
            resizeSpeed: 7,
            slideTime: 3,
            startZoom: true
        })
    });
    You never mention the other two class names.

    But, again, are you really sure that this code was ever DESIGNED to support multiple lightboxes on the same page? I'm not convinced that it was.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,498
    Thanks
    3
    Thanked 500 Times in 487 Posts
    as my first reply to you some days ago each set requires a different class name and different initialization call

    I have tested with this markup

    Code:
    		<!-- Start VisualLightBox.com BODY section id=1 -->
    	<div id="vlightbox1">
    	<a class="vlightbox1" href="colour_files/vlb_images1/reef.jpg" title="Reef"><img src="colour_files/vlb_thumbnails1/reef.jpg" alt="Reef"/>Reef</a>
    <a class="vlightbox1" href="colour_files/vlb_images1/reef2.jpg" title="Reef2"><img src="colour_files/vlb_thumbnails1/reef2.jpg" alt="Reef2"/>Reef2</a>
    <a class="vlightbox1" href="colour_files/vlb_images1/reef3.jpg" title="Reef3"><img src="colour_files/vlb_thumbnails1/reef3.jpg" alt="Reef3"/>Reef3</a>
    <a class="vlightbox1" href="colour_files/vlb_images1/reef5.jpg" title="Reef5"><img src="colour_files/vlb_thumbnails1/reef5.jpg" alt="Reef5"/>Reef5</a>
    <span class="vlb"><a href="http://visuallightbox.com">phoca gallery lightbox</a>by VisualLightBox.com v5.7</span>
    	</div>
    	<script src="colour_files/vlb_engine/vlbdata1.js" type="text/javascript"></script>
    	<!-- End VisualLightBox.com BODY section -->
    
    
     <p>Example of applying slow motion and a soundtrack to a movie.</p>
    
    
    
    
    <p><h2>Colour transition</h2></p>
    
    
    
    
    <div id="vlightbox2">
    	<a class="vlightbox2" href="colour_files/vlb_images1/glass1.jpg" title="Glass"><img src="colour_files/vlb_thumbnails1/glass1_small.jpg" alt="Glass"/>Reef</a>
    <a class="vlightbox2" href="colour_files/vlb_images1/glass2.jpg" title="Glass"><img src="colour_files/vlb_thumbnails1/glass2_small.jpg" alt="Glass"/>Glass</a>
    <a class="vlightbox2" href="colour_files/vlb_images1/glass3.jpg" title="Glass"><img src="colour_files/vlb_thumbnails1/glass3_small.jpg" alt="Glass"/>Reef3</a>
    <a class="vlightbox2" href="colour_files/vlb_images1/glass4.jpg" title="Glass"><img src="colour_files/vlb_thumbnails1/glass4_small.jpg" alt="Glass"/>Glass</a>
    <span class="vlb"><a href="http://visuallightbox.com">phoca gallery lightbox</a>by VisualLightBox.com v5.7</span>
    	</div>
    	<script  type="text/javascript">
    jQuery(document).ready(function () {
        window.Lightbox = new jQuery().visualLightbox({
            autoPlay: true,
            borderSize: 12,
            classNames: 'vlightbox2',
            closeLocation: 'top',
            descSliding: true,
            enableRightClick: false,
            enableSlideshow: true,
            prefix: 'vlb1',
            resizeSpeed: 7,
            slideTime: 3,
            startZoom: true
        })
    });
        </script>
    	<!-- End VisualLightBox.com BODY section -->
    
    
    
     <p>Example of applying slow motion and a soundtrack to a movie.</p>
    
    
    
    
    
    <h2>Example 3</h2>
    
    
    <div id="vlightbox3">
    	<a class="vlightbox3" href="colour_files/vlb_images1/reef.jpg" title="Reef"><img src="colour_files/vlb_thumbnails1/reef.jpg" alt="Reef"/>Reef</a>
    <a class="vlightbox3" href="colour_files/vlb_images1/reef2.jpg" title="Reef2"><img src="colour_files/vlb_thumbnails1/reef2.jpg" alt="Reef2"/>Reef2</a>
    <a class="vlightbox3" href="colour_files/vlb_images1/reef3.jpg" title="Reef3"><img src="colour_files/vlb_thumbnails1/reef3.jpg" alt="Reef3"/>Reef3</a>
    <a class="vlightbox3" href="colour_files/vlb_images1/reef5.jpg" title="Reef5"><img src="colour_files/vlb_thumbnails1/reef5.jpg" alt="Reef5"/>Reef5</a>
    <span class="vlb"><a href="http://visuallightbox.com">phoca gallery lightbox</a>by VisualLightBox.com v5.7</span>
    	</div>
    	<script  type="text/javascript">
    jQuery(document).ready(function () {
        window.Lightbox = new jQuery().visualLightbox({
            autoPlay: true,
            borderSize: 12,
            classNames: 'vlightbox3',
            closeLocation: 'top',
            descSliding: true,
            enableRightClick: false,
            enableSlideshow: true,
            prefix: 'vlb1',
            resizeSpeed: 7,
            slideTime: 3,
            startZoom: true
        })
    });
        </script>
    	<!-- End VisualLightBox.com BODY section -->
    
    
    <p>Example of applying slow motion and a soundtrack to a movie.</p>
    
    
    
    </div>
    
    </div>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    SteveH (10-14-2013)

  • #6
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    Hello vwphillips

    I can't thank you enough for your work and help in getting this to work. I am delighted with it - thank you. It's here:

    http://www.bayingwolf.com/colourTEST.asp

    I can see that I was envisaging the slideshow as one separate entity rather than three smaller exercises - so thanks for highlighting that.


    Hello OP

    This is what the Web site says: 'Now you can insert galleries with different styles into the same page':

    http://visuallightbox.com/#new

    They propose doing it using their software - I have not tested that feature as I thought I would try this first.

    Steve


  •  

    Posting Permissions

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