Skocz do zawartości

Zarchiwizowany

Ten temat jest archiwizowany i nie można dodawać nowych odpowiedzi.

Gość

Rozwiązany: JavaScript Tabs

Przez Gość, w Programowanie i webmastering

Polecane posty

Gość

Gość

Napisano
Napisano

Witam.

Potrzebuję skryptu JS Tabs wraz z prosta instrukcją co trzeba mniej więcej zrobić.

Przykład: http://store.steampowered.com/

Chodzi o tą tabelkę z płynnie zmieniającymi się obrazkami.

Obszukałem Google po polsku - niewiele się dowiedziałem, a znaleźć - nic konkretnego nie znalazłem.

W Google po angielsku znalazłem coś zastępczego, też w JS, ale niestety obrazki nie zmieniają się płynnie i trzeba kliknąć zakładkę by się zmieniły (same się nie zmienią).

Tak wygląda to, co znajduje się w index.html (pomijam zawartość head - deklaracje script type=... i linijkę z oddzielnym CSS który określa wygląd tabelki) - skrypt, który jest w head(+2 pliki .js)

<script type="text/javascript">

document.write('<style type="text/css">.tabber{display:none;}<\/style>');

</script>

i zawartość:

<div class="tabber">


     <div class="tabbertab">

      <div valign="top"><img src="graphics/1.jpg"></div>

     </div>


     <div class="tabbertab">

      <div valign="top"><img src="graphics/2.jpg"></div>

     </div>


     <div class="tabbertab">

      <div valign="top"><img src="graphics/3.jpg"></div>

     </div>


</div>

Zamieszczam też sam skrypt do wglądu, ale ze względu na objętość - w linku:

http://www.wklej.org/hash/793dc6975d/

Jeśli ktoś znalazłby lepszy skrypt, albo podsunął jakiś pomysł, by go zmodyfikować tak, by był jak prawdziwy "JS Tabs", będę niezmiernie wdzięczny.

PS Dodam, że w ogóle się na JS nie znam, dlatego nie widzę sensu, by szukać czegoś i go modyfikować samemu.

Link do komentarza
Udostępnij na innych stronach
Zap Skalny Troll

Zap

Napisano
Napisano

Daj sobie spokój z czystym JS, poniżej masz link do prostego jak budowa cepa tutoriala, jak zrobić takie coś przy pomocy jquery (framework javascriptu, tyle że zasadniczo wywracający wszystko do górny nogami i robiący od jakiegoś czasu nielichą furrorę =] ).

http://apricotstudios.wordpress.com/2008/0...-tabs-tutorial/

Dodam tylko ze obrazki musisz zrobić sobie sam (albo nie robić, w formie tekstowej tez będzie działac).

I żeby to zadziałało, to musisz załadować framework jquery, przykładwo wklejając to do sekcji <head> :

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>

HTML do html, css do styli, zastartowanie skryptu rownież do <head> - i już =]

Jesli nie bedzie działać - wrzuć gdzieś swoje pliku w których to robiłeś, popatrzymy.

Link do komentarza
Udostępnij na innych stronach
Gość

Gość

Napisano
Napisano

Wszystko fajnie..ale chyba nie do końca o to mi chodziło, tj. nie ma tutaj automatyki na jakiej mi zależy (czyli zakładki zmieniają się same co kilka sekund, oraz po kliknięciu - trochę jak na stronie CD-Action i te zakładki "Polecamy").

Link do komentarza
Udostępnij na innych stronach
Zap Skalny Troll

Zap

Napisano
Napisano

No to chodzi ci pewnie o coś takiego.

http://jqueryfordesigners.com/coda-slider-effect/

po małych przeróbkach (dodanie interwału to dopisanie 1 argumentu w zasadzie + usunięcie tego efektu slide jesli go nie chcesz) będziesz miał to co chciałeś.

Edit:

A zresztą, i tak nie mam co robić ;)

Najlepiej ogarnij sobie dokumentację, ale w skrócie to jest tak, że serialScroll ma atrybut interval pozwalający na zmianę co pewien czas contentu.

Jak to zrobić? w tutku masz linijkę

$('#slider').serialScroll(scrollOptions);

Jesli zmienisz ją np na

$('#slider').serialScroll({interval:1500});

zawartośc będzie się przesuwać co 1,5 sekundy (wartości wpisujesz w milisekundach).

I już =]

edit2:

Jesli chcesz to tutaj:

http://www.sendspace.pl/file/ocGMXMWN/

wrzuciłem już przerobione pliki z tego tutoriala, zawierające zdaje się taką funkcjonalność jak chciałeś. W pliku coda-slider.js dodałem komentarze do rzeczy które dodałem / zmieniłem (komentarze wytabowane i po polsku żeby łatwiej było znaleźć : P ). W razie problemów daj znać =]

Link do komentarza
Udostępnij na innych stronach
Gość

Gość

Napisano
Napisano

Serdeczne dzięki :D Niebawem pewnie się zajmę moją stroną, przy której b. długo już pracuję i kilka razy była prawie od zera robiona od nowa (hmm..Duke Nukem Forever), ale obecna wersja powinna być już ostateczną, więc wkrótce wypróbuję Twoje rady.

/edit/

Działa, a to oznacza, że już problem rozwiązany. Jeszcze raz wielkie dzięki za pomoc, właśnie się bawię w dostosowywanie tego do mojej strony, jest więc duża szansa, że za za jakiś czas zobaczysz efekty mojej pracy.

Link do komentarza
Udostępnij na innych stronach
Joann

Joann

Napisano
Napisano

Odświeżę wątek.

Dzięki za informacje. Wasza rozmowa bardzo mi się przydała - stworzyłam coda slider effect na mojej stronie, choć zupełnie nie mam pojęcia o java i jquery.

Nie działa mi jedynie efekt przewijania co kilka sekund, o którym pisaliście.

Jeśli mianowicie zmienię

$('#slider').serialScroll(scrollOptions);

na

$('#slider').serialScroll({interval:1500});

przestaje działać nawigacja, a efekt samoistnie przesuwających się zdjęć i tak nie działa.

Może macie jakieś inne pomysły rozwiązania tego problemu?

Link do komentarza
Udostępnij na innych stronach
Joann

Joann

Napisano
Napisano

Nie znam się zupełnie na JS, więc jest identyczny z proponowanym na stronie:

// when the DOM is ready...

   $(document).ready(function () {

   

   var $panels = $('#slider .scrollContainer > div');

   var $container = $('#slider .scrollContainer');

   

   // if false, we'll float all the panels left and fix the width 

   // of the container

   var horizontal = true;

   

   // float the panels left if we're going horizontal

   if (horizontal) {

     $panels.css({

       'float' : 'left',

       'position' : 'relative',

       'overflow' : 'hidden', // IE fix to ensure overflow is hidden

     });

     

     // calculate a new width for the container (so it holds all panels)

     $container.css('width', $panels[0].offsetWidth * $panels.length);

   }

   

   // collect the scroll object, at the same time apply the hidden overflow

   // to remove the default scrollbars that will appear

   var $scroll = $('#slider .scroll').css('overflow', 'hidden');

   

   // apply our left + right buttons

   $scroll

     .before('<img class="scrollButtons left" src="/poradnik_biurowy/wp-content/themes/stary_subiekt/obrazki/scroll_left.png" />')

     .after('<img class="scrollButtons right" src="/poradnik_biurowy/wp-content/themes/stary_subiekt/obrazki/scroll_right.png" />');

   

   // handle nav selection

   function selectNav() {

     $(this)

       .parents('ul:first')

         .find('a')

           .removeClass('selected')

         .end()

       .end()

       .addClass('selected');

   }

   

   $('#slider .navigation').find('a').click(selectNav);

   

   // go find the navigation link that has this target and select the nav

   function trigger(data) {

     var el = $('#slider .navigation').find('a[href$="' + data.id + '"]').get(0);

     selectNav.call(el);

   }

   

   if (window.location.hash) {

     trigger({ id : window.location.hash.substr(1) });

   } else {

     $('ul.navigation a:first').click();

   }

   

   // offset is used to move to *exactly* the right place, since I'm using

   // padding on my example, I need to subtract the amount of padding to

   // the offset.  Try removing this to get a good idea of the effect

   var offset = parseInt((horizontal ? 

     $container.css('paddingTop') : 

     $container.css('paddingLeft')) 

     || 0) * -1;

   

   

   var scrollOptions = {

     target: $scroll, // the element that has the overflow

     

     // can be a selector which will be relative to the target

     items: $panels,

     

     navigation: '.navigation a',

     

     // selectors are NOT relative to document, i.e. make sure they're unique

     prev: 'img.left', 

     next: 'img.right',

     

     // allow the scroll effect to run both directions

     axis: 'xy',

     

     onAfter: trigger, // our final callback

     

     offset: offset,

     

     // duration of the sliding effect

     duration: 500,

     

     // easing - can be used with the easing plugin: 

     // http://gsgd.co.uk/sandbox/jquery/easing/

     easing: 'swing'

   };

   

   // apply serialScroll to the slider - we chose this plugin because it 

   // supports// the indexed next and previous scroll along with hooking 

   // in to our navigation.

   $('#slider').serialScroll(scrollOptions);

   

   // now apply localScroll to hook any other arbitrary links to trigger 

   // the effect

   $.localScroll(scrollOptions);

   

   // finally, if the URL has a hash, move the slider in to position, 

   // setting the duration to 1 because I don't want it to scroll in the

   // very first page load.  We don't always need this, but it ensures

   // the positioning is absolutely spot on when the pages loads.

   scrollOptions.duration = 1;

   $.localScroll.hash(scrollOptions);

   

   });

Link do komentarza
Udostępnij na innych stronach
Zap Skalny Troll

Zap

Napisano
Napisano

zamień całe scrollOptions na takie:

var scrollOptions = {

  target: $scroll, // the element that has the overflow


  // can be a selector which will be relative to the target

  items: $panels,


  navigation: '.navigation a',


  // selectors are NOT relative to document, i.e. make sure they're unique

  prev: 'img.left', 

  next: 'img.right',


  axis: 'xy',


  onAfter: trigger, 


  offset: offset,


  // duration of the sliding effect

  duration: 300,

  interval: 1500,

  //            force:true wymusza przewinięcie pierwsego elementu

  //            jesli tego nie będzie, lub będzie ustawione na false, 

  //            slider będzie się przewijać dopiero po kliknięciu w któryś link

  force: true,

  // easing - can be used with the easing plugin: 

  // http://gsgd.co.uk/sandbox/jquery/easing/

  easing: 'swing'


  

};

jakby dalej nie działało(możliwe, że masz jakieś różnice w plikach, czegoś nie ściągnęłaś itp. - a ja już nie pamiętam co tam wtedy dokładnie pozmieniałem) - poniżej wrzuciłem paczke z aktualnym i działającym całym skryptem:

http://www.mediafire.com/?4hddmiuzdnj

Link do komentarza
Udostępnij na innych stronach
Gość
Temat jest zablokowany i nie można w nim pisać.
Przejdź do listy tematów

  • Kto przegląda   0 użytkowników

    • Brak zalogowanych użytkowników przeglądających tę stronę.
×
×
  • Utwórz nowe...