PDA

View Full Version : 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/dynamicindex14/reelslideshow.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/dynamicindex14/reelslideshow.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

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


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/dynamicindex14/reelslideshow.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...

vwphillips
06-27-2014, 09:26 AM
IE8 and FF30.0

ddadmin
06-27-2014, 06:20 PM
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.

jtsent
06-29-2014, 06:37 PM
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?

ddadmin
06-29-2014, 07:11 PM
Please post a link to the page on your site that contains the problematic script so we can check it out.

montypadre
06-30-2014, 03:28 AM
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!