SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 29
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2013
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Random image on refresh ?

    I have tried to find a script via google that could change a image on page refresh - but i cant make a single one of them work. I need a Jquery/JavaScript solution not PHP. Also the images should be a link ? How can i make this ?

    Ingenting

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,111
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Randomizing images is really the last step in the process. First, you need your HTML and CSS set up. What do you have so far? Please provide a link. The script you use depends on what you are trying to do. For example, is this an image gallery?
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

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

    One way to go about this would be to use JS to create a new image, set its src attribute accordingly, then inject it into the page. As a bonus, if you are using jQuery, it would also be a doddle to have it fade in or do other cool stuff.

    However, as Ralph says, we really need to see a bit of code. What do you have so far?

  4. #4
    SitePoint Enthusiast
    Join Date
    Feb 2013
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
     /*
    -------------------------------------------------------------------
    		Image change
    --------------------------------------------------------------------
    */
     
    
    (function($){
    	
    	$.randomImage = {
    		defaults: {
    			
    			//you can change these defaults to your own preferences.
    			path: 'images/', //change this to the path of your images
    			myImages: ['1shuffleimg.jpg', '2shuffleimg.jpg', '3shuffleimg.jpg', '4shuffleimg.jpg', '5shuffleimg.jpg' ] //put image names in this bracket. ex: 'harold.jpg', 'maude.jpg', 'etc'
    			
    		}			
    	}
    	
    	$.fn.extend({
    			randomImage:function(config) {
    				
    				var config = $.extend({}, $.randomImage.defaults, config); 
    				
    				 return this.each(function() {
    						
    						var imageNames = config.myImages;
    						
    						//get size of array, randomize a number from this
    						// use this number as the array index
    
    						var imageNamesSize = imageNames.length;
    
    						var lotteryNumber = Math.floor(Math.random()*imageNamesSize);
    
    						var winnerImage = imageNames[lotteryNumber];
    
    						var fullPath = config.path + winnerImage;
    						
    						
    						//put this image into DOM at class of randomImage
    						// alt tag will be image filename.
    						$(this).attr( {
    										src: fullPath,
    										alt: winnerImage
    									});
    				
    						
    				});	
    			}
    			
    	});
    	
    	
    	
    })(jQuery);
    HTML Code:
      <div class="one-fourth last">
    		<h4>Lorum ibsum</h4>
    		<p>Some text</p>
                        <br>
                        <div class="thumbnail-link">
    		        <a href="http://www.google.com" class="thumbnail-roll-link">
    				<span>Visit<strong>This page</strong></span>
    				<img class="shuffle" src="images/shuffleimg.jpg" alt="">
    			</a>
    	            </div>
               </div>
    				</div>

    HTML Code:
    </div>
    <!--WRAPPER ENDS-->
    <script>
    $('.shuffle').randomImage();
    //or to change the default path
    $('.shuffle').randomImage({path: 'images/'});
    </script>
    </body>
    </html>

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

    Try this:

    HTML Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <!--http://www.sitepoint.com/forums/showthread.php?1047258-Random-image-on-refresh-->
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Display random image on page load</title>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
      </head>
    
      <body>
        <div class="one-fourth last">
          <h4>Lorum ipsum</h4>
          <p>Some text</p>
          <div class="thumbnail-link">
            <span>Click on the image to visit the page</strong></span>
            <div id="randomImage"><a href=""></a></div>
          </div>
        </div>
        
        <script>
          var randomImage = {
            paths: [
              "http://www.roflcat.com/images/cats/Vortex_Kitteh_Claims_Another.jpg",
              "http://nextgenfmradio.com/wp/wp-content/uploads/2012/09/iran-ballistic-missile-kitteh-600x480.jpg",
              "http://cdn.iwastesomuchtime.com/6242012164748iwsmt.jpeg"
            ],
            
            generate: function(){
              var path = randomImage.paths[Math.floor(Math.random()*randomImage.paths.length)];
              var img = new Image();
              img.src = path;
              $("#randomImage a").html(img);
              $("#randomImage a").attr("href", path);
            }
          }
          
          randomImage.generate();
        </script>
      </body>
    </html>

  6. #6
    SitePoint Enthusiast
    Join Date
    Feb 2013
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Pullo. Okay this works. But there is some sort of conflict, because it does not work on my site. Is there something i could add to this code to not make it conflicting ?

  7. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,881
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    Could you post a link to the page you want it to work on?

  8. #8
    SitePoint Enthusiast
    Join Date
    Feb 2013
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Could you post a link to the page you want it to work on?
    Yes i have uploaded.http://www.posterlikes.com/lolcat/

    Btw can this effect SEO, when the site should not be on this site ?

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

    The problem is that on your page, jQuery is running in compatibility mode.

    Change these to lines:

    Code JavaScript:
    $("#randomImage a").html(img);
    $("#randomImage a").attr("href", path);
    to this:

    Code JavaScript:
    jQuery("#randomImage a").html(img);
    jQuery("#randomImage a").attr("href", path);
    And all will be well.

    Quote Originally Posted by ingenting
    Btw can this effect SEO, when the site should not be on this site ?
    TBH, I don't know.
    I know Google can crawl content loaded by AJAX, but I'm really no SEO expert.
    If you're concerned about this, then it would be better to ask in the Internet Marketing forum.

  10. #10
    SitePoint Enthusiast
    Join Date
    Feb 2013
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, it works. How come it shows two pictures instead of one ? I only jave one of these : <div id="randomImage"><a href=""></a></div>

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

    When I click on the link you posted above, I see:

    Code:
    Uncaught TypeError: Property '$' of object [object Object] is not a function
    Could you update your test page and I'll have a look.

  12. #12
    SitePoint Enthusiast
    Join Date
    Feb 2013
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, I have updated the page now.

  13. #13
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,881
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    Hey,

    Your mark-up is invalid. You have an open <a> tag which is causing the image to appear twice.

    You have:

    HTML Code:
    <div class="one-fourth last">
      <h4>...</h4>
      <p>Billeder og eksperimenter med grafisk tryk, foto og tegning.</p>
      <br>
      <div class="thumbnail-link">
        <a href="..." class="thumbnail-roll-link">
        <span>Besg <strong>...</strong></span>
        <div id="randomImage"><a href=""></a></div>
      </div>
    </div>
    It should be:

    HTML Code:
    <div class="one-fourth last">
      <h4>...</h4>
      <p>Billeder og eksperimenter med grafisk tryk, foto og tegning.</p>
      <br>
      <div class="thumbnail-link">
        <span>Besg <strong>...</strong></span>
        <div id="randomImage"><a href=""></a></div>
      </div>
    </div>
    HTH

  14. #14
    SitePoint Enthusiast
    Join Date
    Feb 2013
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks could you please remove the link name and text, I would really like not to post client names on forum. Is that okay ?

    Ah yes i see sorry about that will update

  15. #15
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,881
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by ingenting View Post
    could you please remove the link name
    Done

  16. #16
    SitePoint Enthusiast
    Join Date
    Feb 2013
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, could you also remove <h4> and span strong.
    Btw updated and it works perfect. Thaks alot

  17. #17
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,881
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by ingenting View Post
    Thanks, could you also remove <h4> and span strong.
    Btw updated and it works perfect. Thaks alot
    No problem. Also done

  18. #18
    SitePoint Enthusiast
    Join Date
    Feb 2013
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have tried to copy the code into my js/script.js. But then it does not work. Does the images path then also change ? Cant see any problems


    EDIT: I can see that my script.js is loaded in the header. The random image script should be loaded just before closing body tag.

  19. #19
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,881
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    Yeah, make sure you aren't referencing elements in your JS before they exist in your HTML.
    If in doubt, wrap the randomImage.generate() in window.onload = function(){...}

    Edit: or $(document).ready(function(){
    ...
    })


    as you are using jQuery

  20. #20
    SitePoint Enthusiast
    Join Date
    Feb 2013
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Yeah, make sure you aren't referencing elements in your JS before they exist in your HTML.
    If in doubt, wrap the randomImage.generate() in window.onload = function(){...}

    Edit: or $(document).ready(function(){
    ...
    })


    as you are using jQuery
    Not sure how to implement what you are saying

  21. #21
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,881
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by ingenting View Post
    Not sure how to implement what you are saying
    Just open scripts.js and add my code to the bottom of the file.
    As we don't want the code to fire until the page has finished loading and the elements that it references are available in the DOM, just wrap the call to the generate() method in $(document).ready(function(){});

    E.g.

    Code JavaScript:
    var randomImage = {
      paths: [
        "http://www.roflcat.com/images/cats/Vortex_Kitteh_Claims_Another.jpg",
        "http://nextgenfmradio.com/wp/wp-content/uploads/2012/09/iran-ballistic-missile-kitteh-600x480.jpg",
        "http://cdn.iwastesomuchtime.com/6242012164748iwsmt.jpeg"
      ],
     
      generate: function(){
        var path = randomImage.paths[Math.floor(Math.random()*randomImage.paths.length)];
        var img = new Image();
        img.src = path;
        $("#randomImage a").html(img);
        $("#randomImage a").attr("href", path);
      }
    }
     
    $(document).ready(function(){
      randomImage.generate();
    });

    That's it

  22. #22
    SitePoint Enthusiast
    Join Date
    Feb 2013
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks will update my code. Thanks alot for helping me out with this. God day Pullo

  23. #23
    SitePoint Enthusiast
    Join Date
    Feb 2013
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Just open scripts.js and add my code to the bottom of the file.
    As we don't want the code to fire until the page has finished loading and the elements that it references are available in the DOM, just wrap the call to the generate() method in $(document).ready(function(){});

    E.g.

    Code JavaScript:
    var randomImage = {
      paths: [
        "http://www.roflcat.com/images/cats/Vortex_Kitteh_Claims_Another.jpg",
        "http://nextgenfmradio.com/wp/wp-content/uploads/2012/09/iran-ballistic-missile-kitteh-600x480.jpg",
        "http://cdn.iwastesomuchtime.com/6242012164748iwsmt.jpeg"
      ],
     
      generate: function(){
        var path = randomImage.paths[Math.floor(Math.random()*randomImage.paths.length)];
        var img = new Image();
        img.src = path;
        $("#randomImage a").html(img);
        $("#randomImage a").attr("href", path);
      }
    }
     
    $(document).ready(function(){
      randomImage.generate();
    });

    That's it
    If i add the code it does not work somehow

  24. #24
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,881
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    Seems ok to me.
    What error are you seeing (apart from one telling you not to hotlink to images ) ?

  25. #25
    SitePoint Enthusiast
    Join Date
    Feb 2013
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Seems ok to me.
    What error are you seeing (apart from one telling you not to hotlink to images ) ?
    I have updated the server (only index.html) random image is placed in custom.js. I am not that good with js and firebug yet - is all that is marked red an error that need to be fixed ?


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
  •