Parallax Slider - Link Entire Slide/div?

[dmwhipp]

1. Script: Parallax Slider
2. Script URL: http://www.dynamicdrive.com/dynamici...ider/index.htm, but I'm using a version updated by John Scheuer from http://www.dynamicdrive.com/forums/s...light=parallax
3. Issue: How do I hyperlink an entire slide (passing HTML5 validation if possible)?

This script is working for my client thanks to John Scheuer and Arie (http://www.dynamicdrive.com/forums/s...light=parallax). They solved the issue of embedding a YouTube video and having the drop-down menu appear on top.

Today I've added a fourth slide for AmazonSmile. Adding a text link in the description section was no problem, but I would also like the entire slide to be a link. I've got it working by enclosing the whole div in an anchor tag, but am running into validation issues and all of the text being linked.

I've been experimenting with different methods (i.e. adding onclick), but thought someone might already know the best way to do this.

Here is the page: http://www.cisfl.org/sample1.html
Thanks,
Deborah

[jscheuer1]

You could simply give each class="slide" div a data-targethref attribute, ex:

<div class="slide" data-targethref="http://www.dynamicdrive.com/">
	<div class="bgoverlay" data-bgi . . .

and to (highlighted as shown at the end of the script init):

<script type="text/javascript">

var firstparallaxslider=new parallaxSlider({
	wrapperid: 'myparallaxslider', //ID of DIV on page to house slider
	displaymode: {type:'manual', pause:3000, cycles:2, stoponclick:true, pauseonmouseover:true},
	delaybtwdesc:  500, // delay in milliseconds between the revealing of each description layer inside a slide
	navbuttons: ['left.png', 'right.png', 'up.png', 'down.png'], // path to nav images
	activeslideclass: 'selectedslide', // CSS class that gets added to currently shown DIV slide
	orientation: 'h', //Valid values: "h" or "v"
	persist: true, //remember last viewed slide and recall within same session?
	slideduration: 1000 //transition duration (milliseconds)
})

jQuery(document).on('click', '.slide', function(){
	var thref = jQuery(this).data('targethref');
	if(thref){window.location.href = thref;}
});
</script>

[dmwhipp]

Thanks John! I have it working: http://www.cisfl.org/sample1.html. Do you know how I would make the link open in a new window? After searching the Internet, it looks like that might be in the jQuery section, and I'm not sure how to do that.

I did a few tweaks to the <iframe section so the page is passing validation. Then I added

 style="cursor:pointer; cursor:hand;

to the slide div for the cursor.

Thank you again for all your help with this script. I think if I can get the slide to open in a new window, I'll be good to go!
Deborah

[jscheuer1]

If you want all of these links to open in a new window (or tab - most browsers nowadays open a new tab instead of a new window), it's easy, just change:

	if(thref){window.location.href = thref;}

to:

	if(thref){window.open(thref, '_blank');}

But if you want to be able to choose we could add another data- attribute, like data-target:

<div class="slide" data-targethref="http://www.dynamicdrive.com/" data-target="_blank">
	<div class="bgoverlay" data-bgi . . .

Then change:

jQuery(document).on('click', '.slide', function(){
	var thref = jQuery(this).data('targethref');
	if(thref){window.location.href = thref;}
});

to:

jQuery(document).on('click', '.slide', function(){
	var thref = jQuery(this).data('targethref'), t = jQuery(this).data('target');
	if(thref){window.open(thref, t || '_self');}
});

[dmwhipp]

Thanks once again John - I had the data-target="_blank", but was absolutely making a mess of what I was adding to the jQuery section to go with it. Nothing I tried worked, but your solution is already up and running on the sample page: http://www.cisfl.org/sample1.html

Here is what I hope is the final question: I'm adding an additional slide with another video. I've copied the coding from the first slide and have it working here: http://www.cisfl.org/sample2.html. I haven't edited the script in the head section yet, so even though the second video works, after the first pass through I have the blank screen issue from my other thread (http://www.dynamicdrive.com/forums/s...arallax-Slider).

I tried adding another instance of the code you gave me:

	onslide: function(slider, setting, nextslide){
		if(slider.curslide == 2){
		setTimeout(function(){
				document.getElementById('thevidiframe').src = document.getElementById('thevidiframe').src;
			}, setting.slideduration);
		}
	}

Since it's the third slide, it's zero based index is 2 if(slider.curslide == 2).

I made the new slide == 4

Finally, we need to assign a unique id to the iframe with the video.

I renamed them 'thevidiframe1' and 'thevidiframe2'

The final code in the head section is:

<script type="text/javascript">
var firstparallaxslider=new parallaxSlider({
	wrapperid: 'myparallaxslider', //ID of DIV on page to house slider
	displaymode: {type:'auto', pause:5000, cycles:0, stoponclick:true, pauseonmouseover:true},
	delaybtwdesc:  500, // delay in milliseconds between the revealing of each description layer inside a slide
	navbuttons: ['/scripts/parallax/arrowleft.png', '/scripts/parallax/arrowright.png', 'up.png', 'down.png'], // path to nav images
	activeslideclass: 'selectedslide', // CSS class that gets added to currently shown DIV slide
	orientation: 'h', //Valid values: "h" or "v"
	persist: true, //remember last viewed slide and recall within same session?
	slideduration: 1000, //transition duration (milliseconds)
	onslide: function(slider, setting, nextslide){
		if(slider.curslide == 2){
		setTimeout(function(){
				document.getElementById('thevidiframe1').src = document.getElementById('thevidiframe1').src;
			}, setting.slideduration);
		}
	}
	onslide: function(slider, setting, nextslide){
		if(slider.curslide == 4){
		setTimeout(function(){
				document.getElementById('thevidiframe2').src = document.getElementById('thevidiframe2').src;
			}, setting.slideduration);
		}
	}

})

jQuery(document).on('click', '.slide', function(){
	var thref = jQuery(this).data('targethref'), t = jQuery(this).data('target');
	if(thref){window.open(thref, t || '_self');}
});
</script>

This sample page is here: http://www.cisfl.org/sample3.html and I'm still working on it since the slideshow now no longer works at all.

Is it possible to embed 2 different videos without running into the blank screen issue after the first pass through?
Thanks,
Deborah

[jscheuer1]

You can only have one onslide function per slider init.

So I'd change:

	onslide: function(slider, setting, nextslide){
		if(slider.curslide == 2){
		setTimeout(function(){
				document.getElementById('thevidiframe1').src = document.getElementById('thevidiframe1').src;
			}, setting.slideduration);
		}
	}
	onslide: function(slider, setting, nextslide){
		if(slider.curslide == 4){
		setTimeout(function(){
				document.getElementById('thevidiframe2').src = document.getElementById('thevidiframe2').src;
			}, setting.slideduration);
		}
	}

to:

	onslide: function(slider, setting, nextslide){
		if(slider.curslide == 2){
		setTimeout(function(){
				document.getElementById('thevidiframe1').src = document.getElementById('thevidiframe1').src;
			}, setting.slideduration);
		}
		if(slider.curslide == 4){
		setTimeout(function(){
				document.getElementById('thevidiframe2').src = document.getElementById('thevidiframe2').src;
			}, setting.slideduration);
		}
	}

[dmwhipp]

Hi John,
Thank you again for your expertise and patience! It's working perfectly with 2 embedded videos and the entire AmazonSmile slide linked here: http://www.cisfl.org/sample2.html

I am saving a version of the page as a working example for future use and would like to add comments about the 0 based index so I don't forget that. Can you tell me if I correctly added them?

	onslide: function(slider, setting, nextslide){
		if(slider.curslide == 2){ // Since it's the third slide, it's 0 based index is 2
		setTimeout(function(){
				document.getElementById('thevidiframe1').src = document.getElementById('thevidiframe1').src;
			}, setting.slideduration);
		}
		if(slider.curslide == 4){ // Since it's the fifth slide, it's 0 based index is 4
		setTimeout(function(){
				document.getElementById('thevidiframe2').src = document.getElementById('thevidiframe2').src;
			}, setting.slideduration);
		}
	}

Thanks,
Deborah

[jscheuer1]

Couldn't have done it better myself!