Problem jQuery Zyklus-Plugin als Bilddreher verwenden und ein Pager

StackOverflow https://stackoverflow.com/questions/913639

Frage

Ich versuche, jQuery zu verwenden, um einen Pager für tumbs und große Bilder zu machen, und ich es nicht schaffen.

Ich bin mit diesem Beispiel von jQuery Website , ich glaube ich die Richtung gefolgt aber es scheint nicht worknig zu werden.

ich sehe nur das erste Bild und nicht alle von ihnen, aber keinen Pager. Bin ich etwas fehlt?

So, hier ist mein HTML: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script src="jquery-1.3.2.js" type="text/javascript"></script>

    <script src="jquery.cycle.all.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $('#slideshow').before('<ul id="nav">').cycle({
                fx: 'turnDown',
                speed: 'fast',
                timeout: 0,
                pager: '#nav',

                // callback fn that creates a thumbnail to use as pager anchor 
                pagerAnchorBuilder: function(idx, slide)
                {
                    return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a></li>';
                }
            });
        });
    </script>

    <style type="text/css">
#slideshow { left: 20px }
#nav { width: 300px; margin: 15px }
#nav li { width: 50px; float: left; margin: 8px; list-style: none }
#nav a { width: 50px; padding: 3px; display: block; border: 1px solid #ccc; }
#nav a.activeSlide { background: #88f }
#nav a:focus { outline: none; }
#nav img { border: none; display: block }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="slideshow" >
        <img src="http://www.freefoto.com/images/12/13/12_13_4---Flowers-in-a-Garden-Border_web.jpg" />
        <img src="http://www.cssnz.org/flower.jpg" />
        <img src="http://www.global-b2b-network.com/direct/dbimage/50322257/Sun_Flowers.jpg" />
    </div>
    </form>
</body>
</html>
War es hilfreich?

Lösung

Sie benötigen einen Container hinzuzufügen

Ex 

<body>
   <form id="form1" runat="server">
      <ul id="nav"></ul>  <!-- You need this -->
      <div id="slideshow">
         <img src="http://www.freefoto.com/images/12/13/12_13_4---Flowers-in-a-Garden-Border_web.jpg" />
         <img src="http://www.cssnz.org/flower.jpg" />
         <img src="http://www.global-b2b-network.com/direct/dbimage/50322257/Sun_Flowers.jpg" />
      </div>
   </form>
</body>

Update:

Für horizontal am unteren Rand der Seite unterhalb der Diashow

Sie müssen diese CSS hinzufügen 

#nav li{
  float: left;
}

Und HTML Änderung 

   <form id="form1" runat="server">
      <div id="slideshow">
         <img src="http://www.freefoto.com/images/12/13/12_13_4---Flowers-in-a-Garden-Border_web.jpg" />
         <img src="http://www.cssnz.org/flower.jpg" />
         <img src="http://www.global-b2b-network.com/direct/dbimage/50322257/Sun_Flowers.jpg" />
      </div>
      <ul id="nav"></ul>  <!-- You need this -->
   </form>

Andere Tipps

soll man das Radfahren beginnen, wenn das Dokument fertig wird? Ich bin nicht mit dem Cycler, aber versuchen Sie stattdessen: 

<script type="text/javascript">
    $(function() {
        $('#slideshow').before('<ul id="nav">').cycle({
            fx: 'turnDown',
            speed: 'fast',
            timeout: 0,
            pager: '#nav',

            // callback fn that creates a thumbnail to use as pager anchor 
            pagerAnchorBuilder: function(idx, slide)
            {
                return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a></li>';
            }
        });
     });    
</script>

Vielleicht haben Sie versucht, einen Cycler auf einem Element zu laufen, die noch nicht existieren, weil das Dokument nicht bereit war. Außerdem glaube ich, die Syntax für Elemente zu schaffen verlangt, dass sie selbstschließend zu sein, das heißt, Sie sollten .before('<ul id="nav" />').cycle() haben ..., aber ich bin nicht sehr vertraut mit dem In und Outs des jQuery noch.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top