Results 1 to 4 of 4

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

  1. #1
    Join Date
    Dec 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,127
    Thanks
    44
    Thanked 3,228 Times in 3,189 Posts
    Blog Entries
    12

    Default

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

    Code:
    <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.
    Last edited by jscheuer1; 12-11-2013 at 08:58 PM. Reason: add code
    - John
    ________________________

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

  3. #3
    Join Date
    Dec 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,127
    Thanks
    44
    Thanked 3,228 Times in 3,189 Posts
    Blog Entries
    12

    Default

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

    Code:
    <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.
    Last edited by jscheuer1; 12-12-2013 at 06:38 AM.
    - John
    ________________________

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

Similar Threads

  1. Onclick event - to load different categories
    By Goodboy in forum JavaScript
    Replies: 0
    Last Post: 10-13-2009, 11:59 AM
  2. Random Image on Page Load
    By Tyg3r in forum JavaScript
    Replies: 10
    Last Post: 08-17-2009, 07:12 AM
  3. random banner image change on page load each time
    By sujata_ghosh in forum JavaScript
    Replies: 2
    Last Post: 06-30-2008, 08:37 AM
  4. Replies: 1
    Last Post: 02-25-2008, 09:44 PM
  5. Ultimate Fade-in slideshow - add an onClick event to an image link
    By button1 in forum Dynamic Drive scripts help
    Replies: 8
    Last Post: 04-02-2006, 06:23 PM

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
  •