Reel Slide Show - Not Linking?

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!

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

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.

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

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

Quote:

'target' parent node is null or not an object

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

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

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.

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.

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

IE8 and FF30.0

Hmm strange vwphilips I assume the problem for you occurs in the DD demo as well? For easier testing please check out this demo, with all of the slides hyperlinked: http://www.dynamicdrive.com/dynamicindex14/test.htm For me in all desktop browsers and Android Chrome browser (on HTC phone) works.

That all works fine. If I use the exact script but replace with my own links, it stops working. I'm not putting in weird URLs or anything. It should work just fine. I could copy+paste the code directly from my page, maybe?

Please post a link to the page on your site that contains the problematic script so we can check it out.

Dude, jtsent, thanks so much for this thread my man! I've been fightin with a different slideshow for two days now and this discussion pointed me in the right direction to fix it! Thank ya thank ya brother! Thanks as well to the good folks here at DD, ya'll have a great community and a killer product! Keep up the awesome work!