PDA

View Full Version : Couple of niggling issues - slideshow



samslystone
03-29-2013, 11:05 AM
Hi all

I have a little problem with this page:

http://www.caterinabelluardo.com/

The slideshow works fine, but I am having problems telling the "contact" div at the bottom of the page to remain hidden and then to fade up toward the end of the slide show. I must be missing some script here!
In addition, I would like the opportunity to add a rollover image to the last image in the slide show (appearing when user hovers). Is this possible?

Any comments welcome,

S

Beverleyh
03-29-2013, 11:51 AM
To fade in #contact, try doing this;
$('#contact').delay(3400).fadeIn(800); but hide #contact initially with CSS;
#contact { display:none; }

I suppose you could do something similar with an overlaying rollover div (eg. #overlay) positioned on top of the slideshow - something like;

$('#overlay').fadeTo(0,0); // initiall hide #overlay
function showOverlay(){
$('#overlay').hover(
function(){$(this).stop().animate({opacity:1});},
function(){$(this).stop().animate({opacity:0});}
);
}
setTimeout(showOverlay,3000) // delay hover function on #overlay for 3 seconds
Demo here: http://fofwebdesign.co.uk/template/_testing/delay-hover-fade-div.html

jscheuer1
03-29-2013, 04:12 PM
There's a Dynamic Drive script on that page and:

Your page is in violation of Dynamic Drive's usage terms (http://www.dynamicdrive.com/notice.htm), which, among other things, state that the script credit must appear in the source code of the page(s) using the script. Please reinstate the notice first.

Please change:


<script type="text/javascript" src="fadeslideshow.js"></script>

to:


<script type="text/javascript" src="fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

samslystone
03-30-2013, 10:38 AM
Thank you both! John, I have reinstated the source code, many apologies for the mistake. Beverley, for some reason the 'contact' div is still not fading in. Now it simply remains hidden.

In addition, I am trying to have the last image work as a link to an external webpage. I have added to link but it also doesn't appear to work. Any ideas?

All the best

S

Beverleyh
03-30-2013, 10:46 AM
Please view the source code for the demo I posted above and apply it to your page. You can add a hyperlink to the div that I have called #overlay.