Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    May 2009
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Combine random image with pop up window

    I need to know how to create a pop up window that displays a random image when opened. I need it to open as a result of an onclick event.

    Do I need to create a list array at the head of the doc naming all the images, and then an array displaying the link to each image? Do those images need to be a new page for each of them, basically a new html page for each image?

    I think I can do this, but how do you combine it to open in a pop up window onclick? What does the code look like in the head, and at the point of the onclick?

    Is there a better way to do this? Yes I am a noob on the dev side of things..lol

    Any help on these scripts would be much appreciated.

    Thanks and Blessings!

  • #2
    God Emperor Fou-Lu's Avatar
    Join Date
    Sep 2002
    Location
    Saskatoon, Saskatchewan
    Posts
    16,994
    Thanks
    4
    Thanked 2,662 Times in 2,631 Posts
    I assume (by the sounds of this) you're asking for Javascript.
    Despite the simliar sounding names, Java is not the same as (or even related to) Javascript.
    Moving to the Javascript forum.
    PHP Code:
    header('HTTP/1.1 420 Enhance Your Calm'); 
    Been gone for a few months, and haven't programmed in that long of a time. Meh, I'll wing it ;)

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,965
    Thanks
    79
    Thanked 4,429 Times in 4,394 Posts
    Do I need to create a list array at the head of the doc naming all the images
    Don't have to, but that's probably the easiest and best way. Another option is to simply give all your images a "regular" name that is different only by the numeric part of the name. Example: "pic0.jpg", "pic1.jpg", "pic2.jpg", etc.
    , and then an array displaying the link to each image?
    Not unless you WANT a link to each image. How do you reconcile that with the desire to *randomly* pop up one of the imaes?
    Do those images need to be a new page for each of them, basically a new html page for each image?
    No. You can popup a raw image. Won't necessarily look pretty, but you can do it.

    Code:
    <html>
    <head>
    <script type="text/javascript">
    var pix = ["prettyScene.jpg","uglyPeople.jpg","zamboni.jpg","NYCSubway.jpg"];
    
    function poppic( )
    {
       var random = Math.floor( pix.length * Math.random() );
       window.open( pix[random], "POPUPPIX", "height=600,width=800" );
    }
    </script>
    </head>
    <body>
    ....
    <a href="#" onclick="poppic(); return false;">Pick a random picture</a>
    ...
    </body>
    </html>
    If you named your images sequentially ("pix0.jpg", etc.) then it's even easier:
    Code:
    <html>
    <body>
    ...
    <a href="#" 
       onclick="window.open('pix'+Math.floor(10*Math.random())+'.jpg',
                           'POPUP',
                           'width=800;height=600');
                           return false;">
    pick a random image from 0 to 9</a>
    ...
    </body>
    </html>
    In the last example, change the hard coded value of 10 to match the number of images, where they are numbered from 0 to one less than your chosen number.

  • Users who have thanked Old Pedant for this post:

    JCOMPANYDESIGN (05-27-2009)

  • #4
    New Coder
    Join Date
    May 2009
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    In your last option would the images be housed in the array in the head of the doc? This is what I assume. Would you mind too terribly to show me what that would look like?

    Is it possible to house the images in their own folder? And then just add them using sequential values each time? I assume if this was done you would need to change the hard code values to reflect this as well.

    I appreciate this!

  • #5
    New Coder
    Join Date
    May 2009
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I got this working and it works great! Thank you Old Pedant, and greetings to you out there in WA. We just moved from the Seattle area last year back to the midwest. I guess you are getting ready for the best weather of the year!

    Thanks again!

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,965
    Thanks
    79
    Thanked 4,429 Times in 4,394 Posts
    Since you have it working, you probably don't need this answer, but...
    Code:
    In your last option would the images be housed in the array in the head of the doc?
    No, if the images are numbered you don't need any array.

    And to use some other directory, just use that as part of the code:
    Code:
    <html>
    <body>
    ...
    <a href="#" 
       onclick="window.open('/path/to/images/pix'+Math.floor(10*Math.random())+'.jpg',
                           'POPUP',
                           'width=800;height=600');
                           return false;">
    pick a random image from 0 to 9</a>
    ...
    </body>
    </html>


  •  

    Tags for this Thread

    Posting Permissions

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