SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Displaying images on a timed basis on a web page

    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>
    Last edited by Mittineague; Jul 14, 2012 at 15:24. Reason: OP forgot to turn off smilies

  2. #2
    SitePoint Enthusiast
    Join Date
    Jan 2012
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

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



    Quote Originally Posted by Flakes View Post
    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.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jan 2012
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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...

  6. #6
    SitePoint Enthusiast
    Join Date
    Jan 2012
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.....
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  8. #8
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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>
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if


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
  •