Results 1 to 8 of 8

Thread: Parallax Slider - Link Entire Slide/div?

  1. #1
    Join Date
    Sep 2004
    Location
    Tallahassee, FL USA
    Posts
    264
    Thanks
    71
    Thanked 2 Times in 2 Posts

    Default Parallax Slider - Link Entire Slide/div?

    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
    Deborah Whipp
    Web Designer
    Tallahassee, FL
    www.DWWebDesigns.com

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

    Code:
    <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):

    Code:
    <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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    dmwhipp (11-25-2014)

  4. #3
    Join Date
    Sep 2004
    Location
    Tallahassee, FL USA
    Posts
    264
    Thanks
    71
    Thanked 2 Times in 2 Posts

    Default

    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
    Code:
     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
    Deborah Whipp
    Web Designer
    Tallahassee, FL
    www.DWWebDesigns.com

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

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

    Code:
    	if(thref){window.open(thref, '_blank');}
    But if you want to be able to choose we could add another data- attribute, like data-target:

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

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

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. The Following User Says Thank You to jscheuer1 For This Useful Post:

    dmwhipp (11-26-2014)

  7. #5
    Join Date
    Sep 2004
    Location
    Tallahassee, FL USA
    Posts
    264
    Thanks
    71
    Thanked 2 Times in 2 Posts

    Default Thanks and (hopefully) final question

    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:
    Code:
    	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:
    Code:
    <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
    Deborah Whipp
    Web Designer
    Tallahassee, FL
    www.DWWebDesigns.com

  8. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    You can only have one onslide function per slider init.

    So I'd change:

    Code:
    	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:

    Code:
    	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);
    		}
    	}
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. The Following User Says Thank You to jscheuer1 For This Useful Post:

    dmwhipp (11-26-2014)

  10. #7
    Join Date
    Sep 2004
    Location
    Tallahassee, FL USA
    Posts
    264
    Thanks
    71
    Thanked 2 Times in 2 Posts

    Default Thank You!

    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?

    Code:
    	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
    Deborah Whipp
    Web Designer
    Tallahassee, FL
    www.DWWebDesigns.com

  11. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Couldn't have done it better myself!
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Embed Video in Parallax Slider?
    By dmwhipp in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 11-25-2014, 10:45 PM
  2. Anylink JS Menu appears behind Parallax Slider
    By dmwhipp in forum Dynamic Drive scripts help
    Replies: 14
    Last Post: 11-20-2014, 03:16 AM
  3. Parallax Slider - there is no attribute "data-bgimage"
    By Absintheur in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 10-08-2014, 07:09 PM
  4. Parallax effect
    By verzenden in forum Submit a DHTML or CSS code
    Replies: 13
    Last Post: 04-24-2009, 08:38 PM
  5. CSS Parallax
    By Medyman in forum The lounge
    Replies: 7
    Last Post: 03-14-2008, 03:18 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •