Hvordan lage er elegant slideshow?

A

Aina

Medlem
Hei,

Jeg skal lage et slideshow som skal erstatte gif animasjons løsning. Gif funker dessverre ikke på alle android tlf, og det er jo litt teit. Jeg har funnet en kode for slideshow, men denne har litt dårlige overganger også funker den ikke på noen mobile enheter. Noen som har bedre forslag?

Det må vise kun bilde, ikke noe utenforliggende bokser eller youtube løsninger.

Dette er koden jeg har:

&nbsp;<html>
<head>
<script language="JavaScript1.1">
<!--
var image1=new Image()
image1.src="image1.gif"
var image2=new Image()
image2.src="image2.gif"
var image3=new Image()
image3.src="image3.gif"
//-->
</script>
</head>
<body>
<img src="image1.gif" name="slide" width=128 height=80>
<script>
<!--
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}
slideit()
//-->
</script>
</body>
</html>

Aina:)
 
adeneo

adeneo

Medlem
Oida, "javascript 1.1" å greier! Den koden er nok ikke fra i går, men det ser ut som det du prøver å gjøre er rimelig rett frem, bare bytte mellom noen bilder?

Prøv noe sånt i stedet:

HTML: 
<!DOCTYPE html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            var delay = 2500, images = $("img", "#slideshow"), index = 0;
            $(images[0]).fadeIn(300);
            slide();
        
            function slide() {
                index = images.length-2<index ? 0 : index+1;
                $("img:visible", "#slideshow").fadeOut(delay)
                $(images[index]).fadeIn(delay, function() {slide();});
            }
        });
    </script>
    <style type="text/css">
          #slideshow img {position: absolute; top: 0; left:0; display:none;}
    </style>
</head>
<body>
    <div id="slideshow">
        <img src="image1.gif" width=128 height=80 />
        <img src="image2.gif" width=128 height=80 />
        <img src="image3.gif" width=128 height=80 />
    </div>
</body>
</html>​

SLIDESHOW DEMONSTRASJON
 
Sist redigert:
A

Aina

Medlem
adeneo skrev:
Oida, "javascript 1.1" å greier! Den koden er nok ikke fra i går, men det ser ut som det du prøver å gjøre er rimelig rett frem, bare bytte mellom noen bilder?

Prøv noe sånt i stedet:

HTML: 
<!DOCTYPE html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            var delay = 2500, images = $("img", "#slideshow"), index = 0;
            $(images[0]).fadeIn(300);
            slide();
        
            function slide() {
                index = images.length-2<index ? 0 : index+1;
                $("img:visible", "#slideshow").fadeOut(delay)
                $(images[index]).fadeIn(delay, function() {slide();});
            }
        });
    </script>
        <style type="text/css">
            #slideshow img {position: absolute; top: 0; left:0; display:none;}
        </style>
</head>
<body>
    <div id="slideshow">
        <img src="image1.gif" width=128 height=80 />
        <img src="image2.gif" width=128 height=80 />
        <img src="image3.gif" width=128 height=80 />
    </div>
</body>
</html>​

SLIDESHOW DEMONSTRASJON
Klikk for å utvide...

Hehe, nei jeg kan jo ikke dette her i det hele tatt, så må bare kopiere det jeg finner:) Takk for tips!
 
zechi

zechi

Medlem
adeneo skrev:
Oida, "javascript 1.1" å greier! Den koden er nok ikke fra i går, men det ser ut som det du prøver å gjøre er rimelig rett frem, bare bytte mellom noen bilder?

Prøv noe sånt i stedet:

HTML: 
<!DOCTYPE html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            var delay = 2500, images = $("img", "#slideshow"), index = 0;
            $(images[0]).fadeIn(300);
            slide();
        
            function slide() {
                index = images.length-2<index ? 0 : index+1;
                $("img:visible", "#slideshow").fadeOut(delay)
                $(images[index]).fadeIn(delay, function() {slide();});
            }
        });
    </script>
    <style type="text/css">
          #slideshow img {position: absolute; top: 0; left:0; display:none;}
    </style>
</head>
<body>
    <div id="slideshow">
        <img src="image1.gif" width=128 height=80 />
        <img src="image2.gif" width=128 height=80 />
        <img src="image3.gif" width=128 height=80 />
    </div>
</body>
</html>​

SLIDESHOW DEMONSTRASJON
Klikk for å utvide...


Vet dette er en forferdelig bump men har spørsmål angående denne.
Om jeg vil at bildene skal bruke lengre tid på å skrifte. La oss si 7 sekunder før den skifter til neste bilde. Og om jeg vil ha inn fler bilder. Hva må jeg forandre da?
 
adeneo

adeneo

Medlem
Har oppdatert den litt slik at den kanskje er litt enklere å bruke, var mest ment som et raskt eksempel.

HTML: 
<!DOCTYPE html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            var options = {fade: 800,            // tid bildene bruker på å fade inn/ut
                           delay: 7000,          // ventetid mellom bildebytte - 7 sekunder
                           height: 400,          // slideshow høyde
                           width: 500,           // slideshow bredde
                           images: "#slideshow", // element hvor bildene ligger
                           index: 0              // intern for å holde litt orden
                          };
        
            (function slide(o) {
                var elems = $('img', o.images).css({height: o.height, width: o.width});
                  o.index = elems.length - 2 < o.index ? 0 : o.index + 1;
        
                $("img:visible", "#slideshow").fadeOut(o.fade);
                $(elems).eq(o.index).fadeIn(o.fade, function() {
                    setTimeout(function() {slide(o);}, o.delay);
                });
            })(options);
        });
    </script>
    <style type="text/css">
        #slideshow img {position: absolute; top: 0; left:0; display:none;}
    </style>
</head>
<body>
    <!-- legg til bilder i slideshow elementet -->
    <div id="slideshow">
        <img src="http://t1.gstatic.com/images?q=tbn:ANd9GcSyjfzLdy3V509AQWXac7SgHz5FldmgpiMkYw6fO_o1SnQHY1t1cHPOiutu"  />
        <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" />
        <img src="http://www.dreamincode.net/forums/uploads/monthly_05_2010/post-380028-12747928967239.jpg.pagespeed.ce.yRppR_j7ae.jpg" />
        <img src="http://leandrovieira.com/projects/jquery/lightbox/photos/image1.jpg" />
        <img src="http://www.nasa.gov/images/content/66676main_image_feature_221_jw4.jpg" />
    </div>

</body>
</html>
​

FIDDLE
​
 
Du må logge inn eller registrere deg for å svare her.
Topp