Advanced Search

Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: conveyor belt slideshow that has a lightbox

  1. #1
    Join Date
    Oct 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default conveyor belt slideshow that has a lightbox

    I was wondering if there was a conveyor belt slideshow that has a lightbox feature when you click on the image.

    Thanks

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,681
    Thanks
    43
    Thanked 3,127 Times in 3,093 Posts
    Blog Entries
    12

    Default

    I'm not aware of one. But you can combine one, for example:

    http://www.dynamicdrive.com/dynamici...rightslide.htm

    with Lightbox. The best version of Lightbox for this would be:

    http://www.dynamicdrive.com/forums/s...470#post163470

    because it doesn't require its links to be on the page at load time, which they might not be with conveyor, and because it properly eliminates duplicates, which you will have in a conveyor because a conveyor makes two identical trains of images for continuous scrolling.

    If you go this route, all you would have to do is add the two scripts to your page as instructed on each one's demo page, then add the Lightbox syntax to the links in the conveyor's configuration.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,626
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    Here is a demo. I have combined both the conveyor script slideshow and the lightbox together to create this one.

    I have made some changes in the source of of script slideshow and the lightbox:

    (1) The conveyor belt slide show images code should be changed from the current one to

    Code:
    leftrightslide[0] = '<a href="dynamicbook1.gif" rel="lightbox[grp]" title="my caption"><img src="dynamicbook1.gif" border=1></a>'
          leftrightslide[1] = '<a href="dynamicbook2.gif" rel="lightbox[grp]" title="my caption"><img src="dynamicbook2.gif" border=1></a>'
          leftrightslide[2] = '<a href="dynamicbook3.gif" rel="lightbox[grp]" title="my caption"><img src="dynamicbook3.gif" border=1></a>'
          leftrightslide[3] = '<a href="dynamicbook4.gif" rel="lightbox[grp]" title="my caption"><img src="dynamicbook4.gif" border=1></a>'
          leftrightslide[4] = '<a href="dynamicbook5.gif" rel="lightbox[grp]" title="my caption"><img src="dynamicbook5.gif" border=1></a>'
    (a) Specified the href of anchor elements to the image url that you want to display in the lightbox
    (b) Specify 'lightbox' as the value of 'rel' attribute of the anchor elements. The format that I've used will group these 5 images together and lightbox will be able to do the slideshow part. If you don't want the slideshow then simply remove '[grp]' part from the 'rel' attribute value.

    (2) Modify the lightbox.js file. Comment the last line of the file. The line will look like this after the change:

    Code:
    //Event.observe(window, 'load', initLightbox, false);
    (3) Modify the code for the conveyor slideshow. Comment the following line

    Code:
    window.onload = fillup;
    and Insert the following code in place of the above line:

    Code:
    window.onload = function(){				
    				fillup();
    				initLightbox();
    			}
    I have attached the demo version with this page through which you'll be able to view its working.

    Hope this helps.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,681
    Thanks
    43
    Thanked 3,127 Times in 3,093 Posts
    Blog Entries
    12

    Default

    If you use the version of Lightbox I recommend, no changes to either script are required other than to use the Lightbox syntax in the configuration of the links for conveyor:

    Code:
          leftrightslide[0] = '<a href="dynamicbook1.gif" rel="lightbox[grp]" title="my caption"><img src="dynamicbook1.gif" border=1></a>'
          leftrightslide[1] = '<a href="dynamicbook2.gif" rel="lightbox[grp]" title="my caption"><img src="dynamicbook2.gif" border=1></a>'
          leftrightslide[2] = '<a href="dynamicbook3.gif" rel="lightbox[grp]" title="my caption"><img src="dynamicbook3.gif" border=1></a>'
          leftrightslide[3] = '<a href="dynamicbook4.gif" rel="lightbox[grp]" title="my caption"><img src="dynamicbook4.gif" border=1></a>'
          leftrightslide[4] = '<a href="dynamicbook5.gif" rel="lightbox[grp]" title="my caption"><img src="dynamicbook5.gif" border=1></a>'
    However, it might be a nice touch to pause the conveyor while the lightbox displays. If you are interested in that, it would require modifications to the lightbox.js file. But just get it setup first and get back to us.

    @codeexploiter,

    I'm not sure if the rel="lightbox[grp]" syntax you used in your post will work with the version of Lightbox you linked to. In any case though, it doesn't support groups.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,681
    Thanks
    43
    Thanked 3,127 Times in 3,093 Posts
    Blog Entries
    12

    Default

    OK, I've made up a demo:

    http://home.comcast.net/~jscheuer1/s...a/conveyor.htm

    It is also now included in the download archive:

    http://home.comcast.net/~jscheuer1/s...htbox2.04a.zip
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Feb 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Using conveyor belt slideshow that has a lightbox in an iframe

    Hello,
    I want to take this script in an iframe...do you have an idea how to get
    this work? I tried with lytebox but you've adapted the belt script to the
    "normal" ligthbox script".

    For a better understanding. Here is the website I want to run the script.
    http://www.styling-food.de/fleisch.html

    The problem is, that the belt script doesn't workt in this page without the iframe or I don't know other way to do this.

    It would be kind, if you can tell me a way to do this

    Best Regards
    Bernd



    Quote Originally Posted by jscheuer1 View Post
    OK, I've made up a demo:

    http://home.comcast.net/~jscheuer1/s...a/conveyor.htm

    It is also now included in the download archive:

    http://home.comcast.net/~jscheuer1/s...htbox2.04a.zip

  7. #7
    Join Date
    Apr 2013
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    John, I've used your instructions for getting a conveyor lightbox running. Great instructions by the way! My problem is I can't get it to work with thumbnails of 100px height. You can check out my main page at http://www.remainthesame.net this one works like a charm. Except I want to make it 100 px height. You can see the same page with it set to 100 pixels here http://www.remainthesame.net/index1.html notice it makes the page extra wide with a left to right slide bar. Am I doing something wrong? Is there a js file I need to modify for this height? Thanks in advance -Fenix

    Quote Originally Posted by jscheuer1 View Post
    I'm not aware of one. But you can combine one, for example:

    http://www.dynamicdrive.com/dynamici...rightslide.htm

    with Lightbox. The best version of Lightbox for this would be:

    http://www.dynamicdrive.com/forums/s...470#post163470

    because it doesn't require its links to be on the page at load time, which they might not be with conveyor, and because it properly eliminates duplicates, which you will have in a conveyor because a conveyor makes two identical trains of images for continuous scrolling.

    If you go this route, all you would have to do is add the two scripts to your page as instructed on each one's demo page, then add the Lightbox syntax to the links in the conveyor's configuration.

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,681
    Thanks
    43
    Thanked 3,127 Times in 3,093 Posts
    Blog Entries
    12

    Default

    Find this line in the Conveyor belt slideshow script:

    Code:
    document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
    Add a zero as shown:

    Code:
    document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-90000px">'+leftrightslide+'</span>')
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Fenix-TN (04-28-2013)

  10. #9
    Join Date
    Apr 2013
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    You my good sir are a genius! Thank you so much.

  11. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,681
    Thanks
    43
    Thanked 3,127 Times in 3,093 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by downtown View Post
    Hello,
    I want to take this script in an iframe...do you have an idea how to get
    this work? I tried with lytebox but you've adapted the belt script to the
    "normal" ligthbox script".

    For a better understanding. Here is the website I want to run the script.
    http://www.styling-food.de/fleisch.html

    The problem is, that the belt script doesn't workt in this page without the iframe or I don't know other way to do this.

    It would be kind, if you can tell me a way to do this

    Best Regards
    Bernd
    I know this is a little late, not sure why I missed this the first time. What you do is make up a page with the conveyor and Lightbox on it, and change this part of the on page code:

    Code:
    <script type="text/javascript">
    LightboxOptions.startCallback = function(){
    	copyspeed = 0;
    	slideleft.halt = true
    };
    LightboxOptions.startCallbackType = 'afterUpdate';
    LightboxOptions.endCallback = function(){
    	copyspeed = slidespeed;
    	slideleft.halt = false;
    	if(slideleft.stp){
    		$('mousereact').onmouseover();
    	}
    };
    Event.observe(window, 'load', function(){
    	fillup();
    	var mh = $('mouseholder');
    	document.observe('mousemove', function(e) {
    		var x = e.pointerX(), y = e.pointerY(), co = mh.cumulativeOffset(), gd = mh.getDimensions();
    		slideleft.stp = false;
    		if(x > co.left && x < gd.width + co.left && y > co.top && y < gd.height + co.top){
    			slideleft.stp = true;
    		}
    	});
    });
    </script>
    to:

    Code:
    <script type="text/javascript">
    parent.LightboxOptions.startCallback = function(){
    	copyspeed = 0;
    	slideleft.halt = true
    };
    parent.LightboxOptions.startCallbackType = 'afterUpdate';
    parent.LightboxOptions.endCallback = function(){
    	copyspeed = slidespeed;
    	slideleft.halt = false;
    	if(slideleft.stp){
    		$('mousereact').onmouseover();
    	}
    };
    Event.observe(window, 'load', function(){
    	fillup();
    	var mh = $('mouseholder');
    	parent.document.observe('mousemove', function(e) {
    		var x = e.pointerX(), y = e.pointerY(), co = mh.cumulativeOffset(), gd = mh.getDimensions();
    		slideleft.stp = false;
    		if(x > co.left && x < gd.width + co.left && y > co.top && y < gd.height + co.top){
    			slideleft.stp = true;
    		}
    	});
    });
    </script>
    That page goes inside the iframe.

    Then on the top page, in it's head, link to the Lightbox scripts and styles:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen">
    <style type="text/css">
    body {
     margin: 0;
     padding: 0;
    }
    </style>
    <script src="js/prototype.js" type="text/javascript"></script>
    <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
    <script src="js/lightbox.js" type="text/javascript"></script>
    
    </head>
    <body>
    <iframe src="conveyorinframe.htm" width="500" height="300" scrolling="auto" frameborder="1"></iframe>
    </body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

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