Displaying images on a timed basis on a web page

**hazzakenya** · Jul 12, 2012, 21:24

I used the code shown below to display images on a timed basis in the same place on my web page.
It waorked fine before, but has since started to display the images one after the other. This messes up
the rest of the web page.

Why are images no longer displayed as a slideshow?

Please help.

<t:seq repeatCount="indefinite">
<t:par>
<img class="time" begin="0" dur="5" timeAction="display" src="lotus01.jpg"
/>
<p align="center">
</t:par>
<t:par>
<img class="time" dur="5" timeAction="display" src="lotus02.jpg"
/>
<p align="center">
</t:par>

**Flakes** · Jul 12, 2012, 22:35

This is not an asp issue, but ..

check if you have anything like :

<?IMPORT namespace="t" implementation="#default#time2">

in your page. If not, you should.

**hazzakenya** · Jul 12, 2012, 22:51

I recently upgraded Explorer to v9, could that have caused it?

Originally Posted by Flakes

This is not an asp issue, but ..

check if you have anything like :

<?IMPORT namespace="t" implementation="#default#time2">

in your page. If not, you should.

**Flakes** · Jul 12, 2012, 22:56

That's it .

http://msdn.microsoft.com/en-us/libr...=vs.85%29.aspx

it says :

This topic documents a feature of HTML+TIME 2.0, which is obsolete as of Windows Internet Explorer 9.

**hazzakenya** · Jul 12, 2012, 23:03

I appreciate your help sir!

Now, how can I get Explorer 9 to display images as I want them to be? Any ideas?
Most people will have upgraded their Explorer, so I need to find a solution...

**Flakes** · Jul 12, 2012, 23:08

Sorry, no idea.

but using jquery would not be too complicated...

check this:
http://snook.ca/technical/fade/fade.html

there are many other jquery eamples on the web.

**Markdidj** · Jul 22, 2012, 11:20

There are numerous ways to do this, but IMO the best is not to use images, but elements with images in. This way they become more versatile in the future. And also, you'll need javascript to change the images. For that, you'll need a noscript alternative.

so....

Code:

<html>
<head>
<style type="text/css">
*{border:0;padding:0;margin:0;}
ul,li{display:block;position:relative;width:448px;height:336px;float:left;}
li{background:gold;}
ul.tabs{height:32px;}
ul.tabs li{width:32px;height:32px;float:left;}
.container1{width:448px;height:336px;float:left;overflow:hidden;font-size:336px;}
.container1 ul{width:2250px;-webkit-transition:left 1s;}
.container2{display:block;width:224px;height:168px;float:left;overflow:hidden;font-size:168px;}
.container2 ul{display:block;width:224px;height:1008px;-webkit-transition:top 1s;}
.container2 li{width:224px;height:168px;clear:both;}
</style>
<script type="text/javascript">
function dgebi(s){
 return document.getElementById(s);
}
function scrollAnchor(obj){
 if(obj.indexOf("#")>-1){
  a=obj.split("#");
  obj=a[1];
 }
 if(obj_id=dgebi(obj)){
  if((dgebi(obj).parentNode.id=="targets")||(dgebi(obj).parentNode.className.indexOf("targets")>-1)){
   dgebi(obj).parentNode.scrollTop=parseFloat(obj_id.offsetTop);
   dgebi(obj).parentNode.scrollLeft=parseFloat(obj_id.offsetLeft);
  } else if((dgebi(obj).parentNode.parentNode.id=="targets")||(dgebi(obj).parentNode.parentNode.className.indexOf("targets")>-1)){
   dgebi(obj).parentNode.style.top=-parseFloat(obj_id.offsetTop)+"px"
   dgebi(obj).parentNode.style.left=-parseFloat(obj_id.offsetLeft)+"px"
  } else {
   dgebi(obj).parentNode.scrollTop=parseFloat(obj_id.offsetTop);
   dgebi(obj).parentNode.scrollLeft=parseFloat(obj_id.offsetLeft);
  }
 }
}
window.onload=function(){
 a=document.getElementsByTagName("a");
 for(i=0;i<a.length;i++){
  a[i].onclick=function(){
   scrollAnchor(this.href);
   return false;
  }
 }
 var current_image=0;
 setInterval(function(){
  current_image++
  scrollAnchor("img"+current_image);
  if(current_image>10) current_image=0;
 },3000);
 
}
</script>
</head>
<body>
<div style="position:relative;margin:64px;width:448px">
<ul class="tabs">
<%
for i=1 to 10
 response.write "<li><a href=""/scroller/index.asp#img" & i & """ title=""image number " & i & """>" & i & "</a></li>" & vbcrlf
next
%></ul>
<div class="container1 targets">
<ul><%
for i=1 to 5
 response.write "<li id=""img" & i & """>" & i & "</li>" & vbcrlf
next
%></ul>
</div>
<div class="container2 targets">
<ul><%
for i=6 to 10
 response.write "<li id=""img" & i & """>" & i & "</li>" & vbcrlf
next
%></ul>
</body>

It'll need some tweaking on the css and javascript, but you'll understand what it's doing. It loads all the areas as html, so you've no need to preload images. It also works without javascript and is enhanced with javascript and css transitions, but only webkit. Add others if you wish.

Edit: Sorry, but left the index.asp in. Trying to force myself to learn more or .NET so only .aspx is default! You'll need to tweak the address, or put it in a folder called scroller as a file name index.asp.....

**Markdidj** · Jul 22, 2012, 11:38

HTML Code:

<html>
<head>
<style type="text/css">
*{border:0;padding:0;margin:0;}
ul,li{display:block;position:relative;width:448px;height:336px;float:left;}
li{background:gold;}
ul.tabs{height:32px;}
ul.tabs li{width:32px;height:32px;float:left;}
.container1{width:448px;height:336px;float:left;overflow:hidden;font-size:336px;}
.container1 ul{width:2250px;-webkit-transition:left 1s;}
.container2{display:block;width:224px;height:168px;float:left;overflow:hidden;font-size:168px;}
.container2 ul{display:block;width:224px;height:1008px;-webkit-transition:top 1s;}
.container2 li{width:224px;height:168px;clear:both;}
</style>
<script type="text/javascript">
function dgebi(s){
 return document.getElementById(s);
}
function scrollAnchor(obj){
 if(obj.indexOf("#")>-1){
  a=obj.split("#");
  obj=a[1];
 }
 if(obj_id=dgebi(obj)){
  if((dgebi(obj).parentNode.id=="targets")||(dgebi(obj).parentNode.className.indexOf("targets")>-1)){
   dgebi(obj).parentNode.scrollTop=parseFloat(obj_id.offsetTop);
   dgebi(obj).parentNode.scrollLeft=parseFloat(obj_id.offsetLeft);
  } else if((dgebi(obj).parentNode.parentNode.id=="targets")||(dgebi(obj).parentNode.parentNode.className.indexOf("targets")>-1)){
   dgebi(obj).parentNode.style.top=-parseFloat(obj_id.offsetTop)+"px"
   dgebi(obj).parentNode.style.left=-parseFloat(obj_id.offsetLeft)+"px"
  } else {
   dgebi(obj).parentNode.scrollTop=parseFloat(obj_id.offsetTop);
   dgebi(obj).parentNode.scrollLeft=parseFloat(obj_id.offsetLeft);
  }
 }
}
window.onload=function(){
 a=document.getElementsByTagName("a");
 for(i=0;i<a.length;i++){
  a[i].onclick=function(){
   scrollAnchor(this.href);
   return false;
  }
 }
 var current_image=0;
 setInterval(function(){
  current_image++
  scrollAnchor("img"+current_image);
  if(current_image>10) current_image=0;
 },3000);
 
}
</script>
</head>
<body>
<div style="position:relative;margin:64px;width:448px">
<ul class="tabs">
<li><a href="#img1" title="image number 1">1</a></li>
<li><a href="#img2" title="image number 2">2</a></li>
<li><a href="#img3" title="image number 3">3</a></li>
<li><a href="#img4" title="image number 4">4</a></li>
<li><a href="#img5" title="image number 5">5</a></li>
<li><a href="#img6" title="image number 6">6</a></li>
<li><a href="#img7" title="image number 7">7</a></li>
<li><a href="#img8" title="image number 8">8</a></li>
<li><a href="#img9" title="image number 9">9</a></li>
<li><a href="#img10" title="image number 10">10</a></li>
</ul>
<div class="container1 targets">
<ul><li id="img1">1</li>
<li id="img2">2</li>
<li id="img3">3</li>
<li id="img4">4</li>
<li id="img5">5</li>
</ul>
</div>
<div class="container2 targets">
<ul><li id="img6">6</li>
<li id="img7">7</li>
<li id="img8">8</li>
<li id="img9">9</li>
<li id="img10">10</li>
</ul>
</body>

The SitePoint Forums have moved.

User Tag List

Thread: Displaying images on a timed basis on a web page

Thread Tools

Display

Displaying images on a timed basis on a web page

I had that bit on the page, still does not work...

Thanks! Any idea how I can get it to work with Explorer 9?

Bookmarks

Bookmarks

Posting Permissions