Vertical Conveyor Belt J Script For Blogger [Archive]

View Full Version : Vertical Conveyor Belt J Script For Blogger

rajivkohli

06-22-2011, 06:14 PM

I am searching for a Vertical Conveyor Belt Java Script for my blog from last 10 days. After Googling... for hours I found a solution but I am not truely satisfied with the output.

I search the entire forum of Dynamic Drive and found many good threads and 100s of script available on internet but unfortunately not everything is working fine for me.

I want a Vertical Script [Up to Down & Down To Up] same as Horizontal available in Dynamic Drive:

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

The above script is fantastic. There are 2 problems with me:

1. I don't know anything about HTML & Javascripts.
2. I need a simple script like above which I can copy and paste into the Blogger's HTML / JAVASCRIPT Widget.

I get a little success through Dynamic Drive forum and you can see the example in: unripebeauty.blogspot.com [Adult Blog]. But I don't know how to modify the script to take more than 5 images and links. It only shows 5 scrolling images.

That is all.

I don't understand that what is so difficult for you great programmers to create a new script like the above one so we can just copy and paste it to the Blogger's widget.

I found that thousand's of bloggers are looking for this script.

Any help will highly be appreciated.

vwphillips

06-23-2011, 10:00 AM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
</head>

<body>
<br /><br />
<script type="text/javascript">

/***********************************************
* Conveyor belt slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

//Specify the slider's width (in pixels)
var sliderwidth="120px"
//Specify the slider's height
var sliderheight="350px"
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=3
//configure background color:
slidebgcolor="#EAEAEA"

//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="http://"><img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook1.gif" border=1></a><br><br>'
leftrightslide[1]='<a href="http://"><img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook2.gif" border=1></a><br><br>'
leftrightslide[2]='<a href="http://"><img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook3.gif" border=1></a><br><br>'
leftrightslide[3]='<a href="http://"><img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook4.gif" border=1></a><br><br>'
leftrightslide[4]='<a href="http://"><img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook5.gif" border=1></a><br><br>'

//Specify gap between each image (use HTML):
var imagegap=" "

//Specify pixels gap between each slideshow rotation (use integer):
var slideshowgap=0

////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<div id="temp" style="position:absolute;top:100px;left:-800px;width:0px;">'+leftrightslide+'</div>')
var actualwidth;
var cross_slide;

function fillup(){
cross_slide=document.getElementById("test2");
cross_slide2=document.getElementById("test3")
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide;
actualwidth=document.getElementById("temp").offsetHeight;
cross_slide2.style.top=actualwidth+slideshowgap+"px";
lefttime=setInterval("slideleft()",30)
}

window.onload=fillup

function slideleft(){
if (parseInt(cross_slide.style.top)>(actualwidth*(-1)+8))
cross_slide.style.top=parseInt(cross_slide.style.top)-copyspeed+"px"
else
cross_slide.style.top=parseInt(cross_slide2.style.top)+actualwidth+slideshowgap+"px"
if (parseInt(cross_slide2.style.top)>(actualwidth*(-1)+8))
cross_slide2.style.top=parseInt(cross_slide2.style.top)-copyspeed+"px"
else
cross_slide2.style.top=parseInt(cross_slide.style.top)+actualwidth+slideshowgap+"px"

}

html='<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden;">';
html+='<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">';
html+='<div id="test2" style="position:absolute;left:0px;top:0px"></div>';
html+='<div id="test3" style="position:absolute;left:0px;top:0px"></div>';
html+='</div></div>';
document.write(html)

</script>

<p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
<a href="http://dynamicdrive.com">Dynamic Drive</a></font></p>
</body>

</html>

rajivkohli

06-23-2011, 01:02 PM

Thanks a ton for your reply and solution. Maybe I was already using the same script that you had posted in some other forums.

The script is better than before but have an issue. If I place the script in left hand side then it works perfect but if I place it on right side then it reflect the images on left side too.

rajiv-kohli.blogspot.com/

Please check and let me know what is wrong. Also if I use both the Horizontal and Vertical script in my blog then the Horizontal Script stop working. I think it could be because you have not changed the variables defined in the script. I am really amazed that why it is so difficult for the great programmers like you to make a beautiful vertical slideshow script.

One more thing, please add Tooltip and Open Link New Video code if you can. So if someone stop on an image the it display the description in tooltip and the link open in new window.

Thanks and Regards.

vwphillips

06-23-2011, 04:16 PM

I modified the script you gave me
The script only allows one instance of the script

This is a vv old script and should have been bined years ago.

there are many better scripts on my site and DD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.crawler {
position:absolute;left:100px;top:100px;width:200px;height:400px;border:solid red 1px;
}

.inner {
position:absolute;left:0px;top:0px;
}

.inner IMG{
width:200px;height:150px;float:left;margin-Top:5px;
}

.inner2 {
position:absolute;left:0px;top:0px;width:2000px;
}

.inner2 IMG {
width:200px;height:150px;float:left;margin-Left:5px;
}

/*]]>*/
</style></head>

<body>

<div id="c1" class="crawler" onmouseover="C1.Speed=0" onmouseout="C1.Speed=-2" >
<div class="inner" >
<img src="http://www.dynamicdrive.com/dynamicindex2/crawler/bonsai.jpg" />
<img src="http://www.dynamicdrive.com/dynamicindex2/crawler/beach.jpg" />
<img src="http://www.dynamicdrive.com/dynamicindex2/crawler/mountain.jpg" />
<img src="http://www.dynamicdrive.com/dynamicindex2/crawler/coco.jpg" />
<img src="http://www.dynamicdrive.com/dynamicindex2/crawler/water.jpg" />
</div>
</div>

<div id="c2" class="crawler" onmouseover="C2.Speed=0" onmouseout="C2.Speed=-2" style="left:400px;width:400px;height:150px;">
<div class="inner2" >
<img src="http://www.dynamicdrive.com/dynamicindex2/crawler/bonsai.jpg" />
<img src="http://www.dynamicdrive.com/dynamicindex2/crawler/beach.jpg" />
<img src="http://www.dynamicdrive.com/dynamicindex2/crawler/mountain.jpg" />
<img src="http://www.dynamicdrive.com/dynamicindex2/crawler/coco.jpg" />
<img src="http://www.dynamicdrive.com/dynamicindex2/crawler/water.jpg" />
</div>
</div>

<script type="text/javascript">
/*<![CDATA[*/
// Crawler (31-May-2011)
// by Vic Phillips http://www.vicsjavascripts.org.uk/

function zxcCrawler(o){
var mde=o.Mode,mde=typeof(mde)=='string'&&mde.charAt(0).toUpperCase()=='V'?['top','offsetTop','offsetHeight','height']:['left','offsetLeft','offsetWidth','width'],obj=document.getElementById(o.ID),slide=obj.getElementsByTagName('DIV')[0],psz=obj[mde[2]],clds=slide.getElementsByTagName('*'),lst=clds[clds.length-1],sz=lst[mde[1]]+lst[mde[2]],nu=Math.ceil(psz/sz)+1,slider=document.createElement('DIV'),z0=0,spd=o.Speed,ssz=o.ParentSize;
obj.style.overflow='hidden';
obj.style[mde[3]]=(isFinite(ssz)&&clds[ssz]?clds[ssz][mde[1]]:psz)+'px';
slider.style.position='absolute';
slider.style[mde[0]]='0px';
obj.appendChild(slider);
for (;z0<nu;z0++){
slide=z0>0?slide.cloneNode(true):slide;
slide.style[mde[0]]=sz*z0+'px';
slider.appendChild(slide);
}
this.mde=mde;
this.sz=sz;
this.slider=slider;
this.Speed=isFinite(spd)?spd:-1;
this.spd=this.Speed;
this.to=null;
this.Scroll();
}

zxcCrawler.prototype.Scroll=function(){
var oop=this,spd=this.Speed,spd=isFinite(spd)?spd:this.spd,slider=this.slider,sz=this.sz,mde=this.mde[0],pos=parseInt(slider.style[mde])+spd;
if ((spd<0&&pos<-sz)||(spd>0&&pos>0)){
pos+=sz*(spd<0?1:-1);
}
slider.style[mde]=pos+'px';
this.to=setTimeout(function(){ oop.Scroll(); },20);
}

var C1=new zxcCrawler({
ID:'c1', // the unique ID name of the parent DIV. (string)
Mode:'Vertical', //(optional) the mode of execution, 'Horizontal' or 'Vertical'. (string, default = 'Horizontal')
Speed:-2, //(optional) the scroll speed, >0 = clockwise, <0 = anticlockwise. (number, default = -1)
ParentSize:3 //(optional) the number of images to display. (number, default = the current size of the parent DIV)
});

var C2=new zxcCrawler({
ID:'c2',
Speed:-2
});

/*]]>*/
</script>
</body>

</html>

rajivkohli

06-26-2011, 01:27 PM

The script is not working well. If I use the script with links then it is fine but as soon as I insert the links the images get unpositioned and a bit disorted.

However, the Horizontal script that I am using is working fine.

So you are requested to please make a new script that can be used on both sides (Left and Right) of my blog. As I already told you I am not familiar with HTML Or Javascirpt, so I need a script that just can be copied and paste into the Blogger's Widget.

I will be very thankful to you for your help.

vwphillips

06-26-2011, 05:29 PM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
</head>

<body>
<br /><br />
<script type="text/javascript">

////NO NEED TO EDIT BELOW THIS LINE////////////

function Conveyor(mde,id,spd){
var oop=this,obj=document.getElementById(id),slide=obj.getElementsByTagName('DIV')[0],slider=slide.cloneNode(false),sz=slide['offset'+(mde=='V'?'Height':'Width')],mde=mde=='V'?'top':'left';
obj.appendChild(slider);
slider.appendChild(slide);
slide.style[mde]='0px';
slide=slide.cloneNode(true)
slide.style[mde]=sz+'px';
slider.appendChild(slide);
this.mde=mde;
this.slider=slider;
this.sz=-sz;
this.spd=isFinite(spd)?spd:2;
this.cspd=this.spd;
this.pos=0;
obj.onmouseover=function(){ oop.spd=0; }
obj.onmouseout=function(){ oop.spd=oop.cspd; }
setInterval(function(){ oop.slide(); },30)
}

Conveyor.prototype.slide=function(){
this.pos+=this.spd
if ((this.spd>0&&this.pos>0)||(this.spd<0&&this.pos<this.sz)){
this.pos+=this.sz*(this.spd>0?1:-1);
}
this.slider.style[this.mde]=this.pos+'px';
}

/*]]>*/
</script>

<script type="text/javascript">
/*<![CDATA[*/

var html='<div id="belt1" style="position:absolute;left:50px;top:50px;width:120px;height:350px;border:solid red 1px;overflow:hidden;">';
html+='<div style="position:absolute;width;width:120px;height:800px;">'; 
html+='<a href="http://"><img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook1.gif" border=1></a><br><br>';
html+='<a href="http://"><img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook2.gif" border=1></a><br><br>';
html+='<a href="http://"><img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook3.gif" border=1></a><br><br>';
html+='<a href="http://"><img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook4.gif" border=1></a><br><br>';
html+='<a href="http://"><img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook5.gif" border=1></a><br><br>';
html+='</div>';
html+='</div>';
document.write(html)

new Conveyor('V','belt1',-3);

</script>

<script type="text/javascript">
/*<![CDATA[*/

var html='<div id="belt2" style="position:absolute;left:450px;top:50px;width:120px;height:350px;border:solid red 1px;overflow:hidden;">';
html+='<div style="position:absolute;width;width:120px;height:800px;">'; 
html+='<a href="http://"><img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook1.gif" border=1></a><br><br>';
html+='<a href="http://"><img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook2.gif" border=1></a><br><br>';
html+='<a href="http://"><img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook3.gif" border=1></a><br><br>';
html+='<a href="http://"><img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook4.gif" border=1></a><br><br>';
html+='<a href="http://"><img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook5.gif" border=1></a><br><br>';
html+='</div>';
html+='</div>';
document.write(html)

new Conveyor('V','belt2',3);

</script>

<script type="text/javascript">
/*<![CDATA[*/

var html='<div id="belt3" style="position:absolute;left:450px;top:450px;width:350px;height:120px;border:solid red 1px;overflow:hidden;">';
html+='<div style="position:absolute;width;width:580px;height:120px;">'; 
html+='<a href="http://"><img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook1.gif" border=1></a> ';
html+='<a href="http://"><img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook2.gif" border=1></a> ';
html+='<a href="http://"><img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook3.gif" border=1></a> ';
html+='<a href="http://"><img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook4.gif" border=1></a> ';
html+='<a href="http://"><img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook5.gif" border=1></a>';
html+='</div>';
html+='</div>';
document.write(html)

new Conveyor('H','belt3',3);

</script>

</body>

</html>

rajivkohli

06-27-2011, 11:40 AM

Bunch of Thanks for your help. The last script you posted is perfect. But I will glad if you add take a look into my blog unripebeauty.blogspot.com. The bottom script is only showing 3 images whereas I have added 5 links. There might be a problem. Please let me know.

And one last request. I need a tooltip on mouseover on images and want to open the link in new video.

rajivkohli

06-27-2011, 01:53 PM

Also in left and right pane it only shows 5 to 6 images in a time. If I add more links then they hide behind other images. I need atleast 10 images to display all side. Please take a look at make a final correction in the script.

vwphillips

06-27-2011, 04:50 PM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
</head>

<body>
<script type="text/javascript">

////NO NEED TO EDIT BELOW THIS LINE////////////

function Conveyor(mde,id,spd){
var oop=this,obj=document.getElementById(id),slide=obj.getElementsByTagName('DIV')[0],slider=slide.cloneNode(false),sz=slide['offset'+(mde=='V'?'Height':'Width')],mde=mde=='V'?'top':'left';
obj.appendChild(slider);
slider.appendChild(slide);
slide.style[mde]='0px';
slide=slide.cloneNode(true)
slide.style[mde]=sz+'px';
slider.appendChild(slide);
this.mde=mde;
this.slider=slider;
this.sz=-sz;
this.spd=isFinite(spd)?spd:2;
this.cspd=this.spd;
this.pos=0;
obj.onmouseover=function(){ oop.spd=0; }
obj.onmouseout=function(){ oop.spd=oop.cspd; }
setInterval(function(){ oop.slide(); },30)
}

Conveyor.prototype.slide=function(){
this.pos+=this.spd
if ((this.spd>0&&this.pos>0)||(this.spd<0&&this.pos<this.sz)){
this.pos+=this.sz*(this.spd>0?1:-1);
}
this.slider.style[this.mde]=this.pos+'px';
}

/*]]>*/

</script>

<script type="text/javascript">
/*<![CDATA[*/

var html='<div id="belt1" style="position:absolute;left:25px;top:55px;width:150px;height:850px;border:solid red 1px;overflow:hidden;">';
html+='<div style="position:absolute;width;width:150px;height:1880px;">'; 
html+='<a href="http://unripebeauty.blogspot.com/2011/01/carre-otis-in-wild-orchid_31.html"><img src="http://img51.imageporter.com/i/00391/knis0z1c0hhu_t.jpg" border=1></a><br><br>';
html+='<a href="http://unripebeauty.blogspot.com/2011/01/daryl-hannah-in-at-play-in-fields-of.html"><img src="http://img51.imageporter.com/i/00391/uli69f0wsf5w_t.jpg" border=1></a><br><br>';
html+='<a href="http://unripebeauty.blogspot.com/2011/02/elizabeth-berkley-and-rena-riffel-in.html"><img src="http://img52.imageporter.com/i/00391/thqyomvefdfk_t.jpg" border=1></a><br><br>';
html+='<a href="http://unripebeauty.blogspot.com/2011/02/helena-bonham-carter-in-wings-of-dove.html"><img src="http://img52.imageporter.com/i/00391/wquy50si3jnm_t.jpg" border=1></a><br><br>';
html+='<a href="http://unripebeauty.blogspot.com/2011/02/jane-march-in-color-of-night.html"><img src="http://img51.imageporter.com/i/00391/s98izbi9th47_t.jpg" border=1></a><br><br>';
html+='<a href="http://unripebeauty.blogspot.com/2011/02/ashley-judd-in-normal-life.html"><img src="http://img52.imageporter.com/i/00391/ljpa1n4e6wpq_t.jpg" border=1></a><br><br>';
html+='<a href="http://unripebeauty.blogspot.com/2011/02/juliette-binoche-and-lena-olin-in.html"><img src="http://img51.imageporter.com/i/00391/9vzwx2o4alyq_t.jpg" border=1></a><br><br>';
html+='<a href="http://unripebeauty.blogspot.com/2011/02/lauren-lee-smith-in-lie-with-me.html"><img src="http://img51.imageporter.com/i/00391/azvzlr5jqjxf_t.jpg" border=1></a><br><br>';
html+='<a href="http://unripebeauty.blogspot.com/2011/02/lisa-bonet-in-angel-heart.html"><img src="http://img52.imageporter.com/i/00391/q080pzz812gr_t.jpg" border=1></a><br><br>';
html+='<a href="http://unripebeauty.blogspot.com/2011/02/maggie-gyllenhaal-in-secretary.html"><img src="http://img51.imageporter.com/i/00391/hukiyvica5jf_t.jpg" border=1></a><br><br>';
html+='<a href="http://unripebeauty.blogspot.com/2011/02/olivia-wilde-in-alpha-dog.html"><img src="http://img51.imageporter.com/i/00391/w42qqt3caeg1_t.jpg" border=1></a><br><br>';

html+='</div>';
html+='</div>';
document.write(html)

new Conveyor('V','belt1',-3);

</script>

</body>

</html>

It is just about setting the height correctly