SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    635
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Random or Sequence Changing Images

    SitePoint Members,
    Is there code for changing randomly or in sequence dispayed images?

    Thanks,

    Chris

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Lots of ways. For example, in jQuery:

    Code:
    <script type="text/javascript">
    (function($){
        $.fn.shuffle = function() {
            var allElems = this.get(),
                getRandom = function(max) {
                    return Math.floor(Math.random() * max);
                },
                shuffled = $.map(allElems, function(){
                    var random = getRandom(allElems.length),
                        randEl = $(allElems[random]).clone(true)[0];
                    allElems.splice(random, 1);
                    return randEl;
               });
            this.each(function(i){
                $(this).replaceWith($(shuffled[i]));
            });
            return $(shuffled);
        };
    })(jQuery);
    
    $(function () {
                $('div.slideshow img').shuffle();
            });
    </script>
    Depends on what you are trying to do, though. We'd need more information. It could be doe without a JS library, and with PHP, too, probably.

  3. #3
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    635
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I hear about problems with javascript all the time. How about php, htnl, or css.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    JS is fine, as long as it's used wisely. That script works very reliably. Anyhow, as I said, you need to give some details of what you are trying to do.

  5. #5
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    635
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Once I find the right images, I thought I'd have a different header image each time a visitor goes to a different page. I propably wouldn't use the code if it were javascript.

    Thanks Ralph

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    You can do that in PHP.
    Just name your images accordingly (e.g. IMG_1.jpg, IMG_2.jpg, IMG_3.jpg etc) and put them all in the same directory.
    Then, just generate a random number and use it to constract the image path:

    PHP Code:
    $rand rand(1,3);
    echo (
    '<img src="' /img/random/' . $rand . '.jpg" alt="Random Image" />'); 

  7. #7
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    635
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Pullo,
    PHP is some powerful stuff.
    On the part ... = rand(1,3);

    If I have 7 images, for example, I would use ...= rand(1,7); right?

    I'm gong to have one of these
    echo ('<img src="' /img/random/' . $rand . '.jpg" alt="Random Image" />');
    for each image right?, since there's only one src="" in that line you gave me.


    Thanks

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    So, first off, let me see if I've understood what you are trying to do:

    You have a page with a header image.
    Every time the visitor loads the page, you want that header image to be one of seven images, which is selected at random.

    Is that correct?

  9. #9
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    635
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Yes, but if using a random function will slow the site then in series (in order).

  10. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by Chris77 View Post
    Yes, but if using a random function will slow the site then in series (in order).
    Nah, it won't slow the site.

    So, what you want to do is create a directory within your website's root directory.
    E.g. /images/random

    Then, copy your seven images into that directory and name them IMG_1.jpg, IMG_2.jpg, IMG_3.jpg, IMG_4.jpg, IMG_5.jpg, IMG_6.jpg, IMG_7.jpg

    Then, on every page you want the random image to appear, add this code in the relevant position:

    PHP Code:
    <?php 
    $rand 
    rand(1,7); 
    echo (
    '<img src="/imgages/random/IMG_' $rand '.jpg" alt="Random Image number ' $rand '" />');
    ?>
    What this script will do, is every time the page loads, it will generate a random number between one and seven, then add that to the file name.

    E.g. if it generates 6, the HTML rendered will be:

    HTML Code:
    <img src="/imgages/random/IMG_6.jpg" alt="Random Image number 6" />
    Does that make sense?

  11. #11
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    635
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    By hand. Had wordpress, got tired of updates, too slow. It sure was a lot of work to go back.
    Take out -
    -a-c-t-u-a-l-c-u-r-e-s-.-c-om

    I haven't got the pictures to use just yet but I'm sure I'll be doing it soon. I think my code and htaccess and css are fully tweaked as is practical, so it's the next project.

  12. #12
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Oh, sorry, I was updating my post while you were replying (a bad habit)
    See my last post for more info.

  13. #13
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    635
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I started signing in to write whengmail noitified me. I think sitepoint is notifying google mail before the member is finished.

  14. #14
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Nah, I submited my original post and you were notified.
    Then I though, "Oh hang on" and started editing the post I just submitted, during which time you had already answered.
    Sorry for the confusion.

  15. #15
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    635
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Yeah it makes sense.
    That src points to the folder containing the images, not any one image.

    Thanks for the help!


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
  •