Antworten zum Thema „jQuery TABS und jQuery Slider kombinieren“

proximate · 09.10.2011

Hi Community,

Nach meinen ersten gehversuchen mit jQuery hatte ich mir nun vorgenommen mal was spezielleres zu basteln. Grundidee ist folgende :

Verschiedene tabs mit jquery in einem x-belibigen Tab soll dann ein jQuery Slider zu finden sein. Warum ich das so machen will :

auf einer Seite mit 60 Bildern (300px x 200px) aufgeteilt in 3 Kategorien soll so besser ordnung geschaffen werden. mithilfe des Sliders soll es möglich sein jeweils 2-3 Bilder einer Kategorie an zu zeigen...

Der Slider wie auch der Tab funktionieren einwandfrei als eigenständige Seite. Werden beide kombiniert wird der Slider nichtmehr geladen. Ja es muss ein konflikt vorhanden sein, leider jedoch finde ich Ihn mit dem firebug nicht (wird wohl einiges rot dargestellt kann jedoch den Fehler nicht auslesen da ich einfach zu wenig ahnung von Firebug in der DOM ansicht habe.
Kann mich da mal wer mit der Nase draufstossen?

Hier der komplette Quellcode sauber extern Verlinkt müsste also gehen wenn ihr daraus einfach eine HTML Datei anlegt.

HTML:

<head>
<script type="text/javascript" src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
<script type="text/javascript">
// Javascript ausführen nachdem das DOM geladen wurde.
$(function() {
    // setup ul.tabs dass die Tabs div.panes funktionieren
    $(".scrollable").scrollable();
    $("ul.tabs").tabs("div.panes > div");
    $("ul.skin2").tabs("div.skin2 > div");
    // initialize scrollable
    
});


</script>
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/tabs-no-images.css"/>
<link rel="stylesheet" type="text/css" href="http://flowplayer.org/tools/css/scrollable-horizontal.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://flowplayer.org/tools/css/scrollable-buttons.css" media="screen" />

<style type="text/css">
/* alternate colors: skin2 */
    ul.skin2 a {
        background-color:#89a;        
        color:#fff !important;
    }
    
    /* mouseover state */
    ul.skin2 a:hover {
        background-color:#678;
    }
    
    /* active tab */
    ul.skin2 a.current {
        background-color:#4F5C6A;
        border-bottom:2px solid #4F5C6A;    
    }
    
    /* tab pane with background gradient */
    div.skin2 div {
        min-height:200px;
        color:#fff;    
        background:#234 url(http://static.flowplayer.org/img/global/gradient/h300.png) repeat-x scroll 0 -50px;
        
        /* IE6 does not support PNG24 images natively */
        _background:#4F5C6A;
    }

</style>
</head>


<body>
<!-- .......................................................................Tabs..............................................-->
<!-- tabs -->

<ul class="css-tabs skin2">
    <li><a href="#">Tab 1</a></li>
    <li><a href="#">Second tab</a></li>
    <li><a href="#">A ultra long third tab</a></li>
</ul>

<!-- panes -->
<div class="css-panes skin2">
    <div>
    
        <img src="http://static.flowplayer.org/img/title/eye192.png" alt="Flying screens" style="float:left;margin:0 30px 20px 0" />

    
        <h2>Lorem ipsum dolor sit amet</h2>
        
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra, leo sit amet auctor fermentum, risus lorem posuere tortor, in accumsan purus magna imperdiet sem.
        </p>
        
        <p>
            Suspendisse enim. Pellentesque facilisis aliquam enim. Maecenas facilisis molestie lectus. Sed ornare ultricies tortor. Vivamus nibh metus, faucibus quis, semper ut, dignissim id, diam. 
        </p>            
        
        <br clear="all" />
        
    </div>
    
    <div>

        <p>
            Mauris ultricies. Nam feugiat egestas nulla. Donec augue dui, molestie sed, tristique sit amet, blandit eu, turpis. Mauris hendrerit, nisi et sodales tempor, orci tellus laoreet elit, sed molestie dui quam vitae dui.
        </p> 
        <p>
            Pellentesque nisl. Ut adipiscing vehicula risus. Nam eget tortor. Maecenas id augue. Vivamus interdum nulla ac dolor. Fusce metus. Suspendisse eu purus. Maecenas quis lacus eget dui volutpat molestie.
        </p>
    </div>
    
    <div>
        <p>
<!-- .............................. Hier kommt der Slider ............................-->

<!-- "previous page" action -->
<a class="prev browse left"></a>

<!-- root element for scrollable -->
<div class="scrollable">   
   
   <!-- root element for the items -->
   <div class="items">
   
      <!-- 1-5 -->
      <div>
         <img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" />
         <img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" />
         <img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" />
         <img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg" />
         <img src="http://farm1.static.flickr.com/164/399223606_b875ddf797_t.jpg" />
      </div>
      
      <!-- 5-10 -->
      <div>
         <img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg" />
         <img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg" />
         <img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg" />
         <img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg" />
         <img src="http://farm1.static.flickr.com/50/117346182_1fded507fa_t.jpg" />
      </div>
      
      <!-- 10-15 -->
      <div>
         <img src="http://farm4.static.flickr.com/3629/3323896446_3b87a8bf75_t.jpg" />
         <img src="http://farm4.static.flickr.com/3023/3323897466_e61624f6de_t.jpg" />
         <img src="http://farm4.static.flickr.com/3650/3323058611_d35c894fab_t.jpg" />
         <img src="http://farm4.static.flickr.com/3635/3323893254_3183671257_t.jpg" />
         <img src="http://farm4.static.flickr.com/3624/3323893148_8318838fbd_t.jpg" />
      </div>
      
   </div>
   
</div>

<!-- "next page" action -->
<a class="next browse right"></a>

<!--............................... Ende des Sliders .................................-->
        </p>
    </div>
</div>

Benutzt wird jQuery tools in der aktuellen Version. Bisher habe ich im Net leider keine angaben dazu gefunden ob eine solche nutzung der beiden Plugins überhaupt möglich ist.

Ich hoffe schon wäre nämlich ein toller hingucker

Danke und grüsse

Proximate