Reel Slide Show - Not Linking?

**jtsent** · 06-17-2014, 04:53 AM

1) Script Title: Continuous Reel Slideshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...lslideshow.htm

3) Describe problem: Hi, everyone.

I'm hoping someone can help me out with this. I have been using this script for a while on the front page of my website, JTStrecker.com. The script has been working fine for months.

I am redoing my website design but still wanted to use this script, so I went back to the page to gather the coding again. There has apparently been an update as of this month that allows smartphone users swiping ability, which is cool. But I think this might be messing with the ability to have the images link anywhere. I don't want to get rid of the swiping ability, but I think it is interfering.

Let me explain. Because of the swiping script, a web browser on a computer will also allow you to click+drag to swipe between images. But normal left-clicking to hyperlink...I think the script thinks I am getting ready to drag to swipe because it does nothing. The hyperlinking in the code on my current site works just fine, and it doesn't have this June update.

Help please? Maybe the script needs to be updated itself? It is rather new after all, maybe not all the bugs have been worked out.

Here is the script:

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

Thanks!

**jtsent** · 06-17-2014, 11:10 PM

Sorry for putting this in the wrong spot. Newbie here. I am hoping this can be resolved, thanks.

**jtsent** · 06-17-2014, 11:22 PM

P.S. Now the script is moving along slide-by-slide every time I click. It wasn't doing that yesterday, haha. Regardless, the navigation of the swiping seems to be interfering with the hyperlinking, and that's the problem.

**jtsent** · 06-25-2014, 01:12 AM

...is there really no one who can help me with this?

**vwphillips** · 06-25-2014, 09:36 AM

I tested with your init
code without the scripts

Code:

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

#myreel{ /*sample CSS for demo*/
border:0px solid #4e7594;
}

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

</style>

<script type="text/javascript">

/* Continuous Reel Slideshow
* Created: Aug 18th, 2010 by DynamicDrive.com. This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/
// June 7th, 14: Updated to v1.1, which adds swipe navigation in mobile devices. Uses the TouchSwipe plugin (jquery.touchSwipe.min.js).

jQuery.noConflict()

function reelslideshow(options){
	var $=jQuery
	this.setting={displaymode:{type:'auto', pause:2000, cycles:2, pauseonmouseover:true}, orientation:'h', persist:true, slideduration:500} //default settings
	jQuery.extend(this.setting, options) //merge default settings with options
	var curslide=(this.setting.persist)? reelslideshow.routines.getCookie("slider-"+this.setting.wrapperid) : 0
	this.curslide=(curslide==null || curslide>this.setting.imagearray.length-1)? 0 : parseInt(curslide) //make sure curslide index is within bounds
	this.curstep=0
	this.zIndex=1
	this.animation_isrunning=false //variable to indicate whether an image is currently being slided in
	this.posprop=(this.setting.orientation=="h")? "left" : "top"
	options=null
	var slideshow=this, setting=this.setting, preloadimages=[], slidesHTML=''
	for (var i=0; i<setting.imagearray.length; i++){ //preload images
		preloadimages[i]=new Image()
		preloadimages[i].src=setting.imagearray[i][0]
		slidesHTML+=reelslideshow.routines.getSlideHTML(setting.imagearray[i], setting.dimensions[0]+'px', setting.dimensions[1]+'px', this.posprop)+'\n'
	}
	jQuery(function($){ //on document.ready
		slideshow.init($, slidesHTML)
	})
	$(window).bind('unload', function(){ //on window onload
		if (slideshow.setting.persist) //remember last shown slide's index?
			reelslideshow.routines.setCookie("slider-"+setting.wrapperid, slideshow.curslide)
	})
}

reelslideshow.prototype={

	slide:function(nextslide, dir){ //possible values for dir: "left", "right", "top", or "down"
		if (this.curslide==nextslide)
			return
		var slider=this
		var nextslide_initialpos=this.setting.dimensions[(dir=="right"||dir=="left")? 0 : 1] * ((dir=="right"||dir=="down")? -1 : 1)
		var curslide_finalpos=-nextslide_initialpos
		var posprop=this.posprop
		if (this.animation_isrunning!=null)
			this.animation_isrunning=true //indicate animation is running
		this.$imageslides.eq(dir=="left"||dir=="top"? nextslide : this.curslide).css("zIndex", ++this.zIndex) //increase zIndex of upcoming slide so it overlaps outgoing
		this.$imageslides.eq(nextslide).css(reelslideshow.routines.createobj(['visibility', 'visible'], [posprop, nextslide_initialpos])) //show upcoming slide
			.animate(reelslideshow.routines.createobj([posprop, 0]), this.setting.slideduration, function(){slider.animation_isrunning=false})
		this.$imageslides.eq(this.curslide).animate(reelslideshow.routines.createobj([posprop, curslide_finalpos]), this.setting.slideduration, function(){jQuery(this).css("visibility", "hidden")}) //hide outgoing slide
		this.curslide=nextslide
	},

	navigate:function(keyword){ //keyword: "back" or "forth"
		clearTimeout(this.rotatetimer)
		var dir=(keyword=="back")? (this.setting.orientation=="h"? "right" : "down") : (this.setting.orientation=="h"? "left" : "up")
		var targetslide=(keyword=="back")? this.curslide-1 : this.curslide+1
		targetslide=(targetslide<0)? this.$imageslides.length-1 : (targetslide>this.$imageslides.length-1)? 0 : targetslide //wrap around
		if (this.animation_isrunning==false)
			this.slide(targetslide, dir)
	},

	rotate:function(){
		var slideshow=this
		if (this.ismouseover){ //pause slideshow onmouseover
			this.rotatetimer=setTimeout(function(){slideshow.rotate()}, this.setting.displaymode.pause)
			return
		}
		var nextslide=(this.curslide<this.$imageslides.length-1)? this.curslide+1 : 0
		this.slide(nextslide, this.posprop) //go to next slide, either to the left or upwards depending on setting.orientation setting
		if (this.setting.displaymode.cycles==0 || this.curstep<this.maxsteps-1){
			this.rotatetimer=setTimeout(function(){slideshow.rotate()}, this.setting.displaymode.pause)
			this.curstep++
		}
	},

	init:function($, slidesHTML){
		var slideshow=this, setting=this.setting

		var swipeOptions={ // swipe object variables
			triggerOnTouchEnd : true,
			triggerOnTouchLeave : true,
			allowPageScroll: setting.orientation == 'h'? "vertical" : "horizontal",
			swipethreshold: setting.swipethreshold,
			excludedElements:[]
		}

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

		swipeOptions.swipeStatus = function(event, phase, direction, distance){
			var evtparent = event.target.parentNode
			if (phase == 'start' && evtparent.tagName == 'A'){ // cancel A action when finger makes contact with element
				evtparent.onclick = function(){
					return false
				}
			}
			if (phase == 'cancel' && evtparent.tagName == 'A'){ // if swipe action canceled (so no proper swipe), enable A action
				evtparent.onclick = function(){
					return true
				}
			}
			if (phase == 'end'){
				var navkeyword = /(right)|(down)/i.test(direction)? 'back' : 'forth'
				if ( (setting.orientation == 'h' && /(left)|(right)/i.test(direction)) || (setting.orientation == 'v' && /(up)|(down)/i.test(direction)) )
				slideshow.navigate(navkeyword)
			}
		}

		if (this.$wrapperdiv.swipe){
			this.$wrapperdiv.swipe(swipeOptions)
		}

	}

}

reelslideshow.routines={

	getSlideHTML:function(imgref, w, h, posprop){
		var posstr=posprop+":"+((posprop=="left")? w : h)
		var layerHTML=(imgref[1])? '<a href="'+imgref[1]+'" target="'+imgref[2]+'">' : '' //hyperlink slide?
		layerHTML+='<img src="'+imgref[0]+'" style="border-width:0;" />'
		layerHTML+=(imgref[1])? '</a>' : ''
		return '<div class="slide" style="position:absolute;'+posstr+';width:'+w+';height:'+h+';text-align:center;">'
			+'<div style="width:'+w+';height:'+h+';display:table-cell;vertical-align:middle;">'
			+layerHTML
			+'</div></div>' //return HTML for this layer
	},


	getCookie:function(Name){
		var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
		if (document.cookie.match(re)) //if cookie found
			return document.cookie.match(re)[0].split("=")[1] //return its value
		return null
	},

	setCookie:function(name, value){
		document.cookie = name+"=" + value + ";path=/"
	},

	createobj:function(){
		var obj={}
		for (var i=0; i<arguments.length; i++){
			obj[arguments[i][0]]=arguments[i][1]
		}
		return obj
	}
}

</script>

<script type="text/javascript">

var firstreel=new reelslideshow({
	wrapperid: "myreel", //ID of blank DIV on page to house Slideshow
	dimensions: [880, 300], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["http://www.jtstrecker.com/slides_jtsentertainment.png", "http://www.vicsjavascripts.org/"],
		["http://www.jtstrecker.com/slides_wdb.png", "http://www.vicsjavascripts.org/"],
		["http://www.jtstrecker.com/slides_legendsdcau.png", "http://www.vicsjavascripts.org/"] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:4000, cycles:20, 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)
})

</script>
</head>

<body>
		<div id="myreel"></div>

</body>

</html>

and without

jquery.touchSwipe.min.js

all worked fine

but with

jquery.touchSwipe.min.js

an error occured when clicking a slide

'target' parent node is null or not an object

I suggest you post this in the Dynamic Drive scripts help Bug reports topics

**vwphillips** · 06-25-2014, 12:03 PM

I looked at this again and changes in red to the swipeOptions.swipeStatus function corrects the error and the images link correctly
on my PC, I do not have a swipe device

Code:

		swipeOptions.swipeStatus = function(event, phase, direction, distance){
           if (event.target){
			var evtparent = event.target.parentNode
			if (phase == 'start' && evtparent.tagName == 'A'){ // cancel A action when finger makes contact with element
				evtparent.onclick = function(){
					return false
				}
			}
			if (phase == 'cancel' && evtparent.tagName == 'A'){ // if swipe action canceled (so no proper swipe), enable A action
				evtparent.onclick = function(){
					return true
				}
			}
			if (phase == 'end'){
				var navkeyword = /(right)|(down)/i.test(direction)? 'back' : 'forth'
				if ( (setting.orientation == 'h' && /(left)|(right)/i.test(direction)) || (setting.orientation == 'v' && /(up)|(down)/i.test(direction)) )
				slideshow.navigate(navkeyword)
			}
       }
	}

**jtsent** · 06-27-2014, 04:24 AM

Hi, thank you so much. When I removed that script altogether, it did work fine. I want it there for mobile users, though, so I tried pasting in the line you have in red but it just made the slideshow disappear on my webpage. I am afraid to try anything else and risk messing up the code to the point of no return. Am I doing something wrong by pasting it like this? I can only open the Javascript file in Notepad, so everything is in one giant clumped-together paragraph, not laid out the way you present it above. Maybe that has something to do with the issue of putting in the red text. If I can't get this to work, I'll just remove the swiping script so that I know the links will work. Further help would be appreciated, though, if possible. Thanks.

**ddadmin** · 06-27-2014, 05:28 AM

Hmm what browser are you guys using? In FF 30 and IE 11, clicking on a hyperlinked slide on the page http://www.dynamicdrive.com/dynamici...lslideshow.htm works as intended for me.

**jtsent** · 06-27-2014, 07:23 AM

I am using Google Chrome. But that is strange because the links work just fine on that one you linked to, from the original script page. It just doesn't work for my links. I have tried outside URLs as well as links to pages within my site and it just sits there doing nothing...