It appears you have not yet registered with DEVPPL. To register please click here... (it's fast, easy and free!)

Forum

Log In Sponsors
Board index ‹ Programming ‹ JavaScript Forum

Help! Image Change (rotate) on Refresh in Sequence Order

Post a reply

Help! Image Change (rotate) on Refresh in Sequence Order

Postby twistidphreak on Thu May 26, 2011 4:38 pm

I want the images to change (rotate) in sequence when the page is refreshed not random like i have below. Can someone help me with this please? Also I also need text to change on refresh to because I am going to have a descritption of the image below. So the image and text sync up together when some refreshes the page or goes page to the home page. Thanks

I want the images to change like on this pagehttp://www.dougv.com/demo/js_ordered_images_onload/

Code: Select all
<script type="text/javascript" language="JavaScript">

var imgs = new Array('<a href="VW_1.shtml"><img border=0 src="img/samples/VW/large_1.jpg" width=165 height=109" class="thumbnail_img">',
'<a href="fortshelby1.shtml"><img border=0 src="img/samples/Fort Shelby/image1-large.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="jaguar1.shtml"><img border=0 src="img/samples/Jag_of_Novi/large_1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="harley1.shtml"><img border=0 src="img/samples/wolverine_harley/large_1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="bc1.shtml"><img border=0 src="img/samples/BC_Coney_Island/large_1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="mama1.shtml"><img border=0 src="img/samples/Pozios_Retail_Mama_Vickys_Coney_Island/large_1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="children1.shtml"><img border=0 src="img/samples/Detroit_Childrens_Museum/large_1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="harper1.shtml"><img border=0 src="img/samples/Harper_Woods_Library/large_1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="dps1.shtml"><img border=0 src="img/samples/DPS_Facilities_building/large_1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="lakeland1.shtml"><img border=0 src="img/samples/Lakeland_School_Huron_Valley/large_1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="auto1.shtml"><img border=0 src="img/samples/Manhattan_Auto_Group/large_1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="maxey1.shtml"><img border=0 src="img/samples/Maxey_Ford/large_1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="benz1.shtml"><img border=0 src="img/samples/Mercedes_Benz_of_St_Clair_Shores/large_1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="metro_lofts1.shtml"><img border=0 src="img/samples/Metro_Lofts/large_1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="mtclemens1.shtml"><img border=0 src="img/samples/Mt_Clemens_Library/large_1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="st_gertrudes.shtml"><img border=0 src="img/samples/st_gertrudes/large_1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="rayconnect1.shtml"><img border=0 src="img/samples/Rayconnect/large 1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="faulhauber1.shtml"><img border=0 src="img/samples/Faulhauber/large1.jpg" width=165 height=109 class="thumbnail_img">');

var max = imgs.length;
var num = Math.floor((Math.random() * max));

document.writeln(imgs[num]);

</script>
twistidphreak
 
Posts: 1
Joined: Thu May 26, 2011 4:33 pm
Top

Re: Help! Image Change (rotate) on Refresh in Sequence Order

Postby rajmv on Sun Jul 17, 2011 4:26 pm

With the help of that article you posted this was fairly easy to solve..

I've changed only imgs[0] (the very first image in the list) to add that description field you wanted, and i added some CSS that will allow you for your current list of images to leave out

style="width:165px; height:109px;"

on that <img> tag in imgs[0]. The CSS code at the top of the page will handle it if it's the default, you only add that style= when the image's width and height differ from the default.

Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
.thumbnail_img {
   width : 165px;
   height : 109px;
   border : 0px;
}
</style>
<script type="text/javascript" language="javascript">
<!--
   
   function setCookie(someint) {
      var now = new Date();
      var addDays = now.getDate() + 7
      now.setDate(addDays); // cookie expires in 7 days
      var theString = 'imgID=' + escape(someint) + ';expires=' + now.toUTCString();
      document.cookie = theString;
   }
   
   function getCookie() {
      var output = "0";
      if(document.cookie.length > 0) {
         var temp = unescape(document.cookie);
         temp = temp.split(';');
         for(var i = 0; i < temp.length; i++) {
            if(temp[i].indexOf('imgID') != -1) {
               temp = temp[i].split('=');
               output = temp.pop();
               break;
            }
         }
      }
      return output;
   }
   
   function loadNextImage() {
       var imgs = ['<div id="imageLink"><a href="VW_1.shtml"><img style="width:165px; height:109px;" src="img/samples/VW/large_1.jpg" class="thumbnail_img"></a></div><div id="description">description here</div>',
       '<a href="fortshelby1.shtml"><img border=0 src="img/samples/Fort Shelby/image1-large.jpg" width=165 height=109 class="thumbnail_img">',
       '<a href="jaguar1.shtml"><img border=0 src="img/samples/Jag_of_Novi/large_1.jpg" width=165 height=109 class="thumbnail_img">',
       '<a href="harley1.shtml"><img border=0 src="img/samples/wolverine_harley/large_1.jpg" width=165 height=109 class="thumbnail_img">',
       '<a href="bc1.shtml"><img border=0 src="img/samples/BC_Coney_Island/large_1.jpg" width=165 height=109 class="thumbnail_img">',
       '<a href="mama1.shtml"><img border=0 src="img/samples/Pozios_Retail_Mama_Vickys_Coney_Island/large_1.jpg" width=165 height=109 class="thumbnail_img">',
       '<a href="children1.shtml"><img border=0 src="img/samples/Detroit_Childrens_Museum/large_1.jpg" width=165 height=109 class="thumbnail_img">',
       '<a href="harper1.shtml"><img border=0 src="img/samples/Harper_Woods_Library/large_1.jpg" width=165 height=109 class="thumbnail_img">',
       '<a href="dps1.shtml"><img border=0 src="img/samples/DPS_Facilities_building/large_1.jpg" width=165 height=109 class="thumbnail_img">',
       '<a href="lakeland1.shtml"><img border=0 src="img/samples/Lakeland_School_Huron_Valley/large_1.jpg" width=165 height=109 class="thumbnail_img">',
       '<a href="auto1.shtml"><img border=0 src="img/samples/Manhattan_Auto_Group/large_1.jpg" width=165 height=109 class="thumbnail_img">',
       '<a href="maxey1.shtml"><img border=0 src="img/samples/Maxey_Ford/large_1.jpg" width=165 height=109 class="thumbnail_img">',
       '<a href="benz1.shtml"><img border=0 src="img/samples/Mercedes_Benz_of_St_Clair_Shores/large_1.jpg" width=165 height=109 class="thumbnail_img">',
       '<a href="metro_lofts1.shtml"><img border=0 src="img/samples/Metro_Lofts/large_1.jpg" width=165 height=109 class="thumbnail_img">',
       '<a href="mtclemens1.shtml"><img border=0 src="img/samples/Mt_Clemens_Library/large_1.jpg" width=165 height=109 class="thumbnail_img">',
       '<a href="st_gertrudes.shtml"><img border=0 src="img/samples/st_gertrudes/large_1.jpg" width=165 height=109 class="thumbnail_img">',
       '<a href="rayconnect1.shtml"><img border=0 src="img/samples/Rayconnect/large 1.jpg" width=165 height=109 class="thumbnail_img">',
       '<a href="faulhauber1.shtml"><img border=0 src="img/samples/Faulhauber/large1.jpg" width=165 height=109 class="thumbnail_img">'];
   
      //get current cookie value
      var currentIndex = parseInt(getCookie());
      document.getElementById('changingContent').innerHTML = imgs[currentIndex];
   
   //set next cookie index
      currentIndex += 1;
      if(currentIndex > (imgs.length - 1)) {
         currentIndex = 0;
      }
      setCookie(currentIndex);
   }
-->
</script>
</head>
<body onload="loadNextImage();">
   <div id="changingContent" style="overflow:visible;"> </div>
</body>

</html>
rajmv
100+ Club
 
Posts: 103
Joined: Thu Jul 14, 2011 7:22 am
Top
Post a reply

Who is online

Users browsing this forum: No registered users and 3 guests