Jump to content

Archived

This topic is now archived and is closed to further replies.

Guest

Rozwiązany: JavaScript Tabs

Recommended Posts

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 to comment
Share on other sites

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 to comment
Share on other sites

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 to comment
Share on other sites

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 to comment
Share on other sites

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 to comment
Share on other sites

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 to comment
Share on other sites

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 to comment
Share on other sites

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 to comment
Share on other sites

Guest
This topic is now closed to further replies.


  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...