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 10 of 10
  1. #1
    New to the CF scene
    Join Date
    May 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Make weekly image rotator in JS?

    I am working on a site for someone, and they asked me to have a small link-bar that has small thumbnail pictures next to every link. He wants the picture next to each link to change weekly, and what I was thinking of was having a small directory of imgs, he will have 31 in total, and name them 1-31.png, and have something similar to this:
    var now = new Date();
    var dd = now.getDate();
    [code]
    if (dd==1)
    document.write('<img src="pic1.gif">')
    else if (dd==2)
    document.write('<img src="pic2.gif">')
    else if (dd==3)
    document.write('<img src="pic3.gif">')
    else if (dd==4)
    [code]
    but what I am looking for mostly is for the ability for it to loop back through, so that after the 31st week, it starts right back to the first.

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,128
    Thanks
    38
    Thanked 504 Times in 498 Posts

    Question More information needed...

    I'm not sure I understand the concept.

    How do you get 31 images when there are 52 weeks in a year?

    Are you asking to change the images daily as there are 28, 30 or 31 days per month?

    How are the link URLs determined for each image?

    How many links and images are displayed at one time? 1 or 7 or 31 or 52 or ???

  • #3
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,128
    Thanks
    38
    Thanked 504 Times in 498 Posts

    Lightbulb

    Just a guess based on limited information...
    Code:
    <!DOC HTML>
    <html>
    <head>
    <title> Weekly Image Rotation </title>
    <script type="text/javascript">
    // For: http://www.codingforums.com/showthread.php?t=227131
    
    // following from: http://javascript.about.com/library/blweekyear.htm
    Date.prototype.getWeek = function() {
      var onejan = new Date(this.getFullYear(),0,1);
      return Math.ceil((((this - onejan) / 86400000) + onejan.getDay()+1)/7);
    } 
    
    var imageList = [
      'http://www.codingforums.com/images/smilies/rolleyes.gif',
      'http://www.codingforums.com/images/smilies/cool.gif',
      'http://www.codingforums.com/images/smilies/tongue.gif',
      'http://www.codingforums.com/images/smilies/wink.gif',
      'http://www.codingforums.com/images/smilies/biggrin.gif',
      'http://www.codingforums.com/images/smilies/redface.gif',
      'http://www.codingforums.com/images/smilies/frown.gif',
      'http://www.codingforums.com/images/smilies/thumbsup.gif',
      'http://www.codingforums.com/images/smilies/smile.gif',
      'http://www.codingforums.com/images/smilies/confused.gif',
      'http://www.codingforums.com/images/smilies/eek.gif',
      'http://www.codingforums.com/images/smilies/mad.gif',
      'http://www.codingforums.com/images/icons/icon1.gif',
      'http://www.codingforums.com/images/icons/icon16.gif',
      'http://www.codingforums.com/images/icons/icon15.gif',
      'http://www.codingforums.com/images/icons/icon14.gif',
      'http://www.codingforums.com/images/icons/icon13.gif',
      'http://www.codingforums.com/images/icons/icon5.gif',
      'http://www.codingforums.com/images/icons/icon4.gif',
      'http://www.codingforums.com/images/icons/icon3.gif',
      'http://www.codingforums.com/images/icons/icon2.gif',
      'http://www.codingforums.com/images/icons/icon17.gif'
    ];
    
    function InitDisplay() {
      var today = new Date();
      var weekno = today.getWeek();
    //      weekno = weekno % 31;               // limit selection to 0..30 with Pic0.jpg to Pic30.jpg
          weekno = weekno % imageList.length;   // limit selection to 0..21 for above image list array
      document.getElementById('WeeklyPic').src = imageList[weekno];
      document.getElementById('WeeklyPic').alt = 'Image for Week '+weekno;
    }
    onload = function() {
      InitDisplay();
    }
    
    </script>
    
    </head>
    <body>
    
    <a href="http://www.codingforums.com">Coding Forums</a>
    <img id="WeeklyPic" src="" alt="Image for Week">
    
    </body>
    </html>
    You will need to modify the 'imageList' array to suit your needs for PicX.jpg

  • #4
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    In this demo I use a customised getWeekNumber()

    The demo has only 5 images in it for brevity. You will need 52. If you have only 31 distinct images, just add the first 21 again at the end of the array.

    You can add as many <img>s as you like to the link bar (div "imgContainer") without having to touch the javascript.

    So, say for week 20, the first img src will be picsO[20], the 2nd img src will be picsO[21] and so on. When the end of the picsO array is reached curPic is reset to 0 to continue the loop.


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title></title>
            <script type="text/javascript">
                var picPaths = ['num1.jpg','num2.jpg','num3.jpg','num4.jpg','num5.jpg'];
                var picsO = new Array();
                for(i=0; i < picPaths.length; i++){
                    picsO[i] = new Image();
                    picsO[i].src = picPaths[i];
                }
                function getWeekNumber(){
                    var today = new Date();
                    var first = new Date(today.getFullYear(), 0, 1);
                    return Math.floor(Math.round(((today - first) / 1000 / 60 / 60 / 24) + .5, 0)/7);
                }
                window.onload=function(){
                    var curPic = getWeekNumber();
                    var imgsO = document.getElementById('imgContainer').getElementsByTagName('img');
                    for(i=0; i < imgsO.length; i++){
                        imgsO[i].src = picsO[curPic].src;
                        curPic = (++curPic > 51)? 0 : curPic;
                    }
                }
            </script>
        </head>
        <body>
            <div id="imgContainer">
                <img src="" alt="" />
                <img src="" alt="" />
                <img src="" alt="" />
            </div>
        </body>
    </html>
    Last edited by bullant; 05-18-2011 at 03:07 AM.

  • #5
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,128
    Thanks
    38
    Thanked 504 Times in 498 Posts

    Question Yes, but ...

    Quote Originally Posted by bullant View Post
    I don't think the date object has a method called getWeek()

    ...
    Of course it does not have that method ... that's why the prototype was defined at the very start!

    Did you try to execute the script? It works in browsers I have tested.

  • #6
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    No I didn't actually run your code since it appears to handle only 1 <img> when the op said he/she has several thumbnails and I didn't see the prototype in your code initially. I removed my comment when I saw it later on

    Anyway, we're both using a similar concept in our code. I just posted the way I would do it.
    Last edited by bullant; 05-18-2011 at 03:19 AM.

  • #7
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,128
    Thanks
    38
    Thanked 504 Times in 498 Posts

    Arrow Ok

    Quote Originally Posted by bullant View Post
    ...
    Anyway, we're both using a similar concept in our code. I just posted the way I would do it.
    One minor difference: I don't need the extra 21 files repeated (space waster)
    because of the use of the modulo (%) command.

    Also, the imageList Array could be compressed if all the images come from the same directory.

    Other than that it's nearly the same concept.

  • #8
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Quote Originally Posted by jmrker View Post
    Other than that it's nearly the same concept.
    yep, no problem that's what I said - we're using similar concepts.

    It's just that in situations like this I prefer to allow clients to add as many thumbnails as they like to the html without having to touch the javascript because most of them know very little, if any, javascript.

  • #9
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    iamaresome:
    My code returns the correct week number.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
    <head>
    <script type="text/javascript">
    
    	function init(){
    
    		var nForm = document.forms[0];
    		var endDate = new Date();
    		endDate.setHours(0,0,0,0);
    		nForm.isToday.value = endDate.getMonth()+1+"/"+endDate.getDate()+"/"+endDate.getFullYear();
    		nForm.isToday.value = nForm.isToday.value.replace(/^(\d{1}\/)/,"0$1").replace(/(\d{2}\/)(\d{1}\/)/,"$10$2")
    		var eDay = endDate.getDay()+1;
    		var startDate = new Date("1/1/"+endDate.getFullYear());
    		var sDay = startDate.getDay()+1;
    		var daysApart = Math.round((endDate-startDate)/86400000);
    		var tmp1 = Math.abs(Math.abs(1-sDay)-7);
    		var tmp2 = tmp1-(parseInt(tmp1/7)*7);
    		var nWeek = ((daysApart-tmp2-eDay+1)/7);
    		if (sDay > 1 || eDay > 1){nWeek++}
    		nWeek = nWeek == 0 ? 1 : nWeek > 52 ? nWeek = 52 : nWeek;	
    		nForm['wCount'].value = nWeek;
    	}
    	
    	navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);	
    
    </script>
    </head>
    	<body>
    		<p>A week starts on Sunday. Therefore Week 1 may be more than 7 days.<br>
    			 1 week minimum, 52 weeks maximum.</p>
    		
    		<form action="">		
    			<label>Today is: <input type=text size=9 name='isToday' readonly></label>
    			<br>
    			<label>Week Number: <input type=text size=3 name='wCount' readonly></label>			
    		</form>
    	</body>
    </html>
    Last edited by Sciliano; 05-18-2011 at 03:51 PM.

  • #10
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Quote Originally Posted by Sciliano View Post
    iamaresome:
    Calculate week number:
    @Sciliano

    The demos posted before yours do that as well and I think you've got way more code there than is necessary.

    I got the week number in 3 lines and jmrker in 2 lines.

    If you charge people for your code, I hope it's not X amount per line
    Last edited by bullant; 05-18-2011 at 03:20 PM.


  •  

    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
    •