Random Image on page load with onclick event - is this possible?

[danh]

Is it possible to have a javascript random image that links to a web page but has an onclick event speedbump?

I have tried numerous random image codes but I can never get the onclick event to work.

onclick="return confirm('You are about to leave our website. \n Click OK to continue on to the website.')"

I am looking to display 2 images at the same time with a total of no more than 10 images total.

I have experimented with UltimateFade and other random image code I found online.

Thanks,
Dan

[jscheuer1]

Assuming that works with an ordinary link, yes. For Ufade, you could put this after the on page initialization:


<script type="text/javascript">
jQuery(function($){
$('.gallerylayer a').click(function(){
return confirm('You are about to leave our website. \n Click OK to continue on to the other website.');
});
});
</script>

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

[danh]

Where is the
put this after the on page initialization?
I put that code right above the <div> to display my images and it works.

Thank you for your help.

I apologize, but I do not have a live version on this page yet.

Dan

[jscheuer1]

Yes, it should work fine there because in most cases that's after the on page init. For your information, the on page initialization is (from the demo page for U Fade):


<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
["http://i30.tinypic.com/531q3n.jpg"],
["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})


var mygallery2=new fadeSlideShow({
wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
["http://i30.tinypic.com/531q3n.jpg"],
["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
],
displaymode: {type:'manual', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "always",
togglerid: "fadeshow2toggler"
})

</script>

That's as I say from the demo page and actually creates two slideshows. But whether there's 1 slideshow or 100, if you put the code as I suggest (following the on page initialization), it will work. There are also other ways to go about it. But using this exact code, this is the optimal place for it.