Antworten auf deine Fragen:
Neues Thema erstellen

Mehrere Jquery easyslider auf einer Seite verwenden

S

stefan211

Noch nicht viel geschrieben

Hallo :)
Ich bastel gerade an einer kleinen Informations-Internetseite, deren Inhalt mit hilfe des jquery accordions dargestellt wird. Da ich nicht möchte das die Seite der Accordion Unterpunkte so lang wird, habe ich beschlossen die Inhalte mit hilfe des jquery sliders in unterseiten einzuteilen. Bis dahin funktioniert auch alles ganz gut!
Das einzige Problem was ich habe ist, das der slider nur in einem Accordion unterpunkt funktioniert. Wie kann ich jetzt das ganze lösen damit der slider auch in den anderen unterpunkten funktioniert???

Code: 
<script type="text/javascript" src="./assets/javascript/jquery-1.2.6.min.js"></script>
  <script type="text/javascript" src="./assets/javascript/jquery-ui-custom-1.6b.min.js"></script>
  <script type="text/javascript" src="./assets/javascript/jquery.flyout.js"></script>
  <script type="text/javascript" src="./assets/javascript/jquery.geturlparam.js"></script>
        <script type="text/javascript" src="./assets/js/easySlider.packed.js"></script></script>
  <script type="text/javascript">
   $(document).ready(function () {
    $.ui.accordion.animations.custom = function(options) {
     this.slide(options, {
      easing: options.down ? 'easeInOutCirc' : 'easeInOutCirc',
      duration: options.down ? 600 : 600
     });
    };
    $('#content').accordion({
     header: 'a.section',
     selectedClass: 'active',
     autoHeight: false,
     clearStyle: true,
     animated: 'custom',
     navigation: true,
     navigationFilter: function() {
 
      // Going to this page with a parameter matching a section name will open the accordion at it automatically
      // e.g. [URL]http://www.domain.com/index.html?section=services[/URL]
      return (this.name.toLowerCase() == $(document).getUrlParam('section'));
     }
    });
    $('a.thumb').flyout({
     loader: 'customLoader'
    });
 
    // This fixes hovering over section headers in ie6
    $('a.section').hover(function() {$(this).addClass('hover');}, function() {$(this).removeClass('hover');});
   });
$(document).ready(function(){ 
  $("#slider").easySlider({
   prevText: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;',
   nextText: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'
  });
 });
  </script>

HTML: 
<div id="contentContainer">
    <div id="content">
     <a class="section" name="welcome"><h3>Herzlich Willkommen</h3></a>
     <div class="panel">
  <div id="wrapper">
  <div id="slider">
   <ul>
    <li>
      <div class="inside-box">
      <div class="product-description"><p> oko ok opk opk opk op opk </p></div>
      </div>
      <div style="clear:both;">&nbsp;</div>
     </li>
 
     <li>
      <div class="inside-box">
        <div class="product-description">
          <p> ihii ijh ij ioj ij ij ioj ioj </p>
                                  <a class="thumb" title="Streichhölzer" href="assets/images/pics/1.jpg"><img src="assets/images/kleine/4313596334_057fc667b5_s.jpg" width="80px" height="80px" alt="Item 3" /></a>
      </div>
      </div>
      <div style="clear:both;">&nbsp;</div>
     </li>
<li>
      <div class="inside-box">
        <div class="product-description">
          <p> ihii ijh ij ioj ij ij ioj ioj </p>
                                  <a class="thumb" title="Streichhölzer" href="assets/images/pics/1.jpg"><img src="assets/images/kleine/4313596334_057fc667b5_s.jpg" width="80px" height="80px" alt="Item 3" /></a>
      </div>
      </div>
      <div style="clear:both;">&nbsp;</div>
     </li>
   </ul> 
  </div>
 </div>
 
     </div>
<a class="section" name="welcome"><h3>Herzlich Willkommen2</h3></a>
     <div class="panel">
  <div id="wrapper">
  <div id="slider">
   <ul>
    <li>
      <div class="inside-box">
      <div class="product-description"><p> oko ok opk opk opk op opk </p></div>
      </div>
      <div style="clear:both;">&nbsp;</div>
     </li>
 
     <li>
      <div class="inside-box">
        <div class="product-description">
          <p> ihii ijh ij ioj ij ij ioj ioj </p>
                                  <a class="thumb" title="Streichhölzer" href="assets/images/pics/1.jpg"><img src="assets/images/kleine/4313596334_057fc667b5_s.jpg" width="80px" height="80px" alt="Item 3" /></a>
      </div>
      </div>
      <div style="clear:both;">&nbsp;</div>
     </li>
<li>
      <div class="inside-box">
        <div class="product-description">
          <p> ihii ijh ij ioj ij ij ioj ioj </p>
                                  <a class="thumb" title="Streichhölzer" href="assets/images/pics/1.jpg"><img src="assets/images/kleine/4313596334_057fc667b5_s.jpg" width="80px" height="80px" alt="Item 3" /></a>
      </div>
      </div>
      <div style="clear:both;">&nbsp;</div>
     </li>
   </ul> 
  </div>
 </div>

Code: 
#wrapper {
 
  width: 330px;
  height: 170px;
}
 
 #slider ul, #slider li{
  margin:0;
  padding:0;
  list-style:none;
  }
 #slider, #slider li{ 
  /* 
   define width and height of container element and list item (slide)
   list items must be the same size as the slider area
  */ 
  width:330px;
  height:170px;
  overflow:hidden;
  }
 
/* // Easy Slider */
 .product-description { padding-left: 0px; padding-top: 0px; font-family: "Trebuchet MS"; }
 .product-description .product-title{
 color: #eb6b04;
 font-weight: bold;
}
 .product-description .content { font-size: .75em; color:#656565;  }
 
 span#prevBtn {
   position: relative;
   float:left;
   margin-left: 10px;
   margin-top: -20px;
   background: url(../images/prev.png) no-repeat;
   height: 20px;
  }
 span#nextBtn {
   position: relative;
   float:right;
   margin-top: -20px;
   margin-right: 5px;
   background: url(../images/next.png) no-repeat;
   height: 20px;
  }
 .product-description img{
  padding-top: 2 px;
}

Vielen Dank für eure Hilfe :)
 

sokie

sokie

Mod | Web

AW: Mehrere Jquery easyslider auf einer Seite verwenden

Das ganze konstrukt musst du vielleicht nochmal überdenken. Besonders der Punkt, dass IDs EIN element eindeutig bezeichnen (es kann nur einen geben!).Das gilt auch für die ID wrapper.
wenn du das berücksichtigst ist auch klar, wie du meherere slider funktionierend bekommen kannst:
Code: 
$(document).ready(function(){ 
  $("#slider_1").easySlider({
    //optionen
  });
  $("#slider_2").easySlider({
      //optionen
  });
 });
 
Zuletzt bearbeitet:
S

stefan211

Noch nicht viel geschrieben

AW: Mehrere Jquery easyslider auf einer Seite verwenden

Hallo Sokie, vielen Dank für deine schnelle Antwort :) - Ich habe gerade versucht deinen Gedankengang weiter zu denken, leider habe ich irgendwo immer noch einen Fehler.
Ich habe folgendes gemacht:

Code: 
$(document).ready(function(){ 
  $("#slider").easySlider({
    prevText: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;',
 nextText: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'
  });
  $("#slider_2").easySlider({
      prevText: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;',
   nextText: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'
  });
 });


Danach habe ich in der CSS für den zweiten Slider eigene Eigenschaften hinzugefügt. Bin mir aber net ganz sicher ob du das meintest!



Code: 
#wrapper_1{

  width: 330px;
  height: 170px;
}

 #slider ul, #slider li{
  margin:0;
  padding:0;
  list-style:none;
  }
 #slider, #slider li{ 
  /* 
   define width and height of container element and list item (slide)
   list items must be the same size as the slider area
  */ 
  width:330px;
  height:170px;
  overflow:hidden;
  }
  
/* // Easy Slider */
 .product-description { padding-left: 0px; padding-top: 0px; font-family: "Trebuchet MS"; }
 .product-description .product-title{
 color: #eb6b04;
 font-weight: bold;
}
 .product-description .content { font-size: .75em; color:#656565;  }
 
 span#prevBtn {
   position: relative;
   float:left;
   margin-left: 10px;
   margin-top: -20px;
   background: url(../images/prev.png) no-repeat;
   height: 20px;
  }
 span#nextBtn {
   position: relative;
   float:right;
   margin-top: -20px;
   margin-right: 5px;
   background: url(../images/next.png) no-repeat;
   height: 20px;
  }
 .product-description img{
  padding-top: 2 px;
}
#wrapper_2 {

  width: 330px;
  height: 170px;
}

 #slider_2 ul, #slider_2 li{
  margin:0;
  padding:0;
  list-style:none;
  }
 #slider_2, #slider_2 li{ 
  /* 
   define width and height of container element and list item (slide)
   list items must be the same size as the slider area
  */ 
  width:330px;
  height:170px;
  overflow:hidden;
  }
  
/* // Easy Slider */
 .product-description_2 { padding-left: 0px; padding-top: 0px; font-family: "Trebuchet MS"; }
 .product-description_2 .product-title{
 color: #eb6b04;
 font-weight: bold;
}
 .product-description_2 .content { font-size: .75em; color:#656565;  }
 
 span#prevBtn_2 {
   position: relative;
   float:left;
   margin-left: 10px;
   margin-top: -20px;
   background: url(../images/prev.png) no-repeat;
   height: 20px;
  }
 span#nextBtn_2 {
   position: relative;
   float:right;
   margin-top: -20px;
   margin-right: 5px;
   background: url(../images/next.png) no-repeat;
   height: 20px;
  }
 .product-description_2 img{
  padding-top: 2 px;
}

Das Problem ist das der Slider jetztgar nicht mehr funktioniert :( -
Hast du evtl noch einen Tipp denn ich probieren könnte ??? Vielen Dank :)
 
sokie

sokie

Mod | Web

AW: Mehrere Jquery easyslider auf einer Seite verwenden

gibts den #slider_2 denn in deinem html überhaupt?

ps: alle Klassen (class) dürfen natürlich mehrfach vorkommen (das ist auch sinnvoll um den code schlank zu halten)
 
Zuletzt bearbeitet:
S

stefan211

Noch nicht viel geschrieben

AW: Mehrere Jquery easyslider auf einer Seite verwenden

Soooo hier einmal ein auszug aus dem HTML Quelltext:

HTML: 
<body>
  <div id="container">
   <a accesskey="t" name="top"></a>
   <p class="hidden skip"><a href="#cn">Skip to content</a></p>
   <div id="header">
    <!-- EDIT [Site root URL, Sitename (Put the span around something in your sitename that you want to be the contrasting colour, i.e. the first word, first letter etc.)] -->
    <h1><a href="#"><span></span></a></h1>
    <!-- END EDIT -->
   </div>
   <a accesskey="c" name="cn"></a>
   <div id="contentContainer">
    <div id="content">
     <a class="section" name="welcome"><h3>Herzlich Willkommen</h3></a>
     <div class="panel">
  <div id="wrapper_1">
  <div id="slider">
   <ul>
    <li>
      <div class="inside-box">
      <div class="product-description"><p>Text1</p></div>
      </div>
      <div style="clear:both;">&nbsp;</div>
     </li>
                    
     <li>
      <div class="inside-box">
        <div class="product-description">
          <p> Text 2</p>
                                  <a class="thumb" title="Streichhölzer" href="assets/images/pics/1.jpg"><img src="assets/images/kleine/4313596334_057fc667b5_s.jpg" width="80px" height="80px" alt="Item 3" /></a>
      </div>
      </div>
      <div style="clear:both;">&nbsp;</div>
     </li>
<li>
      <div class="inside-box">
        <div class="product-description">
          <p> Text 3</p>
                                  <a class="thumb" title="Streichhölzer" href="assets/images/pics/1.jpg"><img src="assets/images/kleine/4313596334_057fc667b5_s.jpg" width="80px" height="80px" alt="Item 3" /></a>
      </div>
      </div>
      <div style="clear:both;">&nbsp;</div>
     </li>
   </ul> 
  </div>
 </div>
        
     </div>
<a class="section" name="welcome"><h3>Unterpunkt2</h3></a>
     <div class="panel">
  <div id="wrapper_2">
  <div id="slider_2">
   <ul>
    <li>
      <div class="inside-box">
      <div class="product-description_2"><p> Text1</p></div>
      </div>
      <div style="clear:both;">&nbsp;</div>
     </li>
                    
     <li>
      <div class="inside-box">
        <div class="product-description_2">
          <p> Text 2</p>
                                  <a class="thumb" title="Streichhölzer" href="assets/images/pics/1.jpg"><img src="assets/images/kleine/4313596334_057fc667b5_s.jpg" width="80px" height="80px" alt="Item 3" /></a>
      </div>
      </div>
      <div style="clear:both;">&nbsp;</div>
     </li>
<li>
      <div class="inside-box">
        <div class="product-description_2">
          <p> Text 3</p>
                                  <a class="thumb" title="Streichhölzer" href="assets/images/pics/1.jpg"><img src="assets/images/kleine/4313596334_057fc667b5_s.jpg" width="80px" height="80px" alt="Item 3" /></a>
      </div>
      </div>
      <div style="clear:both;">&nbsp;</div>
     </li>
   </ul> 
  </div>
 </div>
     </div>

Ich habe ja auch schon diese variante hier ausprobiert:
Easy Slider jQuery Plugin Demo

Dort kann man auch mehrere Slider auf einer Seite benutzen, das problem ist nur das ich ja gerne den ersten slieder im 1 Unterpunkt des Accordions haben möchte, dann den zweiten Slider im zweiten Unterpunkt usw.... nur das hat dann auch nicht mehr funktioniert, beide in einem Unterpunkt klappt!. Kann es sein das es evtl am accordion liegt ????
 
S

stefan211

Noch nicht viel geschrieben

AW: Mehrere Jquery easyslider auf einer Seite verwenden

Soooo ich habe jetzt mal ein Beispiel hochgeladen, wenn ich das ganze so mache wie hier: Easy Slider jQuery Plugin Demo

Beispiel:


Im ersten Accordionunterpunkt ist slider 1 im zweiten sollte slider 2 sein, funktioniert aber net! Die NAV Buttons von zwei findet man dann im ersten Accordion Unterpunkt!
 
sokie

sokie

Mod | Web

AW: Mehrere Jquery easyslider auf einer Seite verwenden

du kannst einfach nicht zwei (oder mehr) slider haben, die die option "numeric":"true" haben, jedenfalls nicht mit dem script.
Der Grund ist wie schon Eingangs erwähnt, die Sache mit den gleichen IDs.
das ist auf den ersten Blick nicht offensichtlich; das script erzeugt bei "numeric":"true" diese numerierten Schaltflächen, und belegen diese automatisch mit IDs wie folgt:
Code: 
<ol id="controls">
  <li class="current" id="controls1">
   <a rel="0" href="javascript:void(0);">1</a>
  </li>
  <li class="" id="controls2">
    <a rel="1" href="javascript:void(0);">2</a>
 </li>
 <li class="" id="controls1">
    <a rel="0" href="javascript:void(0);">1</a>
  </li>
  <li class="" id="controls2">
    <a rel="1" href="javascript:void(0);">2</a>
...
das ist ein Ausschnitt von demvom Script erzeugten code, wenn "numeric":"true" gesetzt ist.

das kann man aber erst erkennen, wenn man die Ganze Seite gesehen hat, und nicht nur Teile vom code.
leider keine bessere Auskunft :-(
die 'gute' Nachricht (wenn man das so sagen kann) ist, dass du nicht weiter an deinem Code schrauben musst, weils nicht primär daran liegt

ein Hinweis vielleicht noch:
Notierungen wie <a href=""><h3>Überschrift</h3></a> (das sind die überschriften der accordion-register) sind nicht valide! andersrum, also
<h3><a href="">überschrift</a></h3> geht das.
 
Zuletzt bearbeitet:
S

stefan211

Noch nicht viel geschrieben

AW: Mehrere Jquery easyslider auf einer Seite verwenden

Hallo Sokie, ich habe mich jetzt für etwas anderes entschieden. Wollte nochmal vielen Dank für deine Hilfe sagen :)
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 236 (Mitglieder: 10, Gäste: 226)
Robots: 1.126

Statistik des Forums

Themen
118.565
Beiträge
1.538.067
Mitglieder
67.488
Neuestes Mitglied
Andrew56524
Oben