Show two images together in one time (reelslideshow)

[shirleymikan]

http://www.dynamicdrive.com/dynamici...lslideshow.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]

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]

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/tes...complete3.html
http://dl.dropbox.com/u/12967281/test/reelslideshow.js

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

[shirleymikan]

oh! sorry, vwphillips, I have missed something before! thank s alot ! I have done it well now!!!