conveyor belt slideshow that has a lightbox

[Novangel78]

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

Thanks

[jscheuer1]

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

http://www.dynamicdrive.com/dynamicindex14/leftrightslide.htm

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

http://www.dynamicdrive.com/forums/showthread.php?p=163470#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.

[codeexploiter]

Here is a demo. I have combined both the conveyor script slideshow (http://www.dynamicdrive.com/dynamicindex14/leftrightslide.htm) and the lightbox (http://www.dynamicdrive.com/dynamicindex4/lightbox/index.htm) 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


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:


//Event.observe(window, 'load', initLightbox, false);

(3) Modify the code for the conveyor slideshow. Comment the following line


window.onload = fillup;

and Insert the following code in place of the above line:


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.

[jscheuer1]

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:


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.

[jscheuer1]

OK, I've made up a demo:

http://home.comcast.net/~jscheuer1/side/lightbox2.04a/conveyor.htm

It is also now included in the download archive:

http://home.comcast.net/~jscheuer1/side/lightbox2.04a/lightbox2.04a.zip

[downtown]

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




OK, I've made up a demo:

http://home.comcast.net/~jscheuer1/side/lightbox2.04a/conveyor.htm

It is also now included in the download archive:

http://home.comcast.net/~jscheuer1/side/lightbox2.04a/lightbox2.04a.zip

[Fenix-TN]

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


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

http://www.dynamicdrive.com/dynamicindex14/leftrightslide.htm

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

http://www.dynamicdrive.com/forums/showthread.php?p=163470#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.

[jscheuer1]

Find this line in the Conveyor belt slideshow script:


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

Add a zero as shown:


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

[Fenix-TN]

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

[jscheuer1]

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:


<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:


<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:


<!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>

[jscheuer1]

Oh, and for anyone using any of this, I've discovered that it doesn't work with IE 9 and 10. That can be fixed though. We need to update to Prototype v1.7.1 and Scriptaculous v1.9.0 and use the effects.js and builder.js files for that version, and make one small tweak to the lightbox.js file. Since Prototype and Scriptaculous and its effects and builder files are now all hosted on Google, it makes sense to use those, I will attach the updated lightbox.js file.

So on your page(s) replace:


<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>

with:


<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js?load=effects,builder"></script>
<script src="js/lightbox.js" type="text/javascript"></script>

If testing locally you will need http: in the src attributes (live pages do not need it and should not have it):


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js?load=effects,builder"></script>
<script src="js/lightbox.js" type="text/javascript"></script>

And use this updated version of lightbox.js (right click and 'Save As'):

5049

The browser cache may need to be cleared and/or the page refreshed to see changes.

I will be updating the live demos and archives as time permits. But it might take some time, this is not a high priority project for me.

[didemgormus]

keyfinet.com/category/canli-radyo-dinle/

[jscheuer1]

. . . /canli-radyo-dinle/

That page doesn't use iframe or a Conveyor. It could use Lightbox v2.04a or any other good lightbox type script. Do you have a question? If not, your post will be removed.