PDA

View Full Version : Show two images together in one time (reelslideshow)



shirleymikan
04-24-2012, 03:24 AM
http://www.dynamicdrive.com/dynamicindex14/reelslideshow.htm

Hello everyone,

I would like to ask I succeed to use this javascript in my web.
However, I would show two images (with two links separately) in one time.

I don't know how to edit it.

Could anyone help me?

Thanks a lot!!!

vwphillips
04-24-2012, 09:31 AM
css



#myreel{ /*sample CSS for demo*/
border:15px solid black;
}

.paginate{
width: 330px;
margin-top:5px;
font:bold 14px Arial;
text-align:center;
}

.slide {
POSITION: absolute; WIDTH: 600px; HEIGHT: 200px; LEFT: 600px;
}

.slide IMG {
margin-Left:60px;float:left
}




html


<div id="myreel">
<DIV class=slide>
<IMG src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg">
<IMG src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg">
</DIV>
<DIV class=slide>
<IMG src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg">
<IMG src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg">
</DIV>
<DIV class=slide>
<IMG src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg">
<IMG src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg">
</DIV>

</div>


change function


init:function($, slidesHTML){
var slideshow=this, setting=this.setting
this.$wrapperdiv=$('#'+setting.wrapperid).css({position:'relative', visibility:'visible', overflow:'hidden', width:setting.dimensions[0], height:setting.dimensions[1]}) //main DIV
if (this.$wrapperdiv.length==0){ //if no wrapper DIV found
alert("Error: DIV with ID \""+setting.wrapperid+"\" not found on page.")
return
}
if (slidesHTML){
this.$wrapperdiv.html(slidesHTML)
}
this.$imageslides=this.$wrapperdiv.find('div.slide')
this.$imageslides.eq(this.curslide).css(reelslideshow.routines.createobj([this.posprop, 0])) //set current slide's CSS position (either "left" or "top") to 0
if (this.setting.displaymode.type=="auto"){ //auto slide mode?
this.setting.displaymode.pause+=this.setting.slideduration
this.maxsteps=this.setting.displaymode.cycles * this.$imageslides.length
if (this.setting.displaymode.pauseonmouseover){
this.$wrapperdiv.mouseenter(function(){slideshow.ismouseover=true})
this.$wrapperdiv.mouseleave(function(){slideshow.ismouseover=false})
}
this.rotatetimer=setTimeout(function(){slideshow.rotate()}, this.setting.displaymode.pause)
}
}


change call


var firstreel=new reelslideshow({
wrapperid: "myreel", //ID of blank DIV on page to house Slideshow
dimensions: [600, 200], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [],
displaymode: {type:'auto', pause:2000, cycles:2, pauseonmouseover:true},
orientation: "h", //Valid values: "h" or "v"
persist: true, //remember last viewed slide and recall within same session?
slideduration: 300 //transition duration (milliseconds)
})

shirleymikan
04-25-2012, 02:54 AM
vwphillips, thank you so much.

However, I have followed your guide to change the script.
It doesn't work well...

you can see the below html....
http://dl.dropbox.com/u/12967281/test/example-complete3.html
http://dl.dropbox.com/u/12967281/test/reelslideshow.js

Could you fix it...? I really need your (or others) help.. thanks!!

shirleymikan
04-25-2012, 03:02 AM
oh! sorry, vwphillips, I have missed something before! thank s alot ! I have done it well now!!!