Vianoce v ITnetwork sú tu! Dobí si teraz kredity a získaj až 80 % extra kreditov na e-learningové kurzy ZADARMO. Zisti viac.
Hľadáme nové posily do ITnetwork tímu. Pozri sa na voľné pozície a pridaj sa k najagilnejšej firme na trhu - Viac informácií.

jQuery - fullscreen galéria

Triviálne jQuery plug-in, ktorý vytvorí galériu cez celú stránku. Automaticky zmenšuje alebo zväčšíte obrázok na pozadí. Je to skôr základ pre nejakú zložitejšie galériu, tak dúfam, že sa skript využije. Licencia je MIT.

Použitie plug-inu

<html>
<head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
  <script type="text/javascript" src="gallery.js"></script>
  <script type="text/javascript">
  $(document).ready(function() {
      $('#gallery')
          .gallery({  })
          .css({ top: ($(this).height()-130), left: 50 });

      $('#gallery img')
          .mouseover(function() {
              $(this).stop().animate({ width: 200, height: 130, marginTop: -50, marginLeft: -25 });
          })
          .mouseout(function() {
              $(this).stop().animate({ width: 150, height: 80, marginTop: 0, marginLeft: 0 });
          });
  });

  $(window).resize(function() {
      $('#gallery').css({ top: ($(this).height()-130), left: 50 });
  });
  </script>
</head>
<body>
  <!-- Gallery images -->
  <div id="gallery">
    <a href="javascript:;" title="Landscape Wallpaper"><img src="images/landscape.jpg" alt="Landscape Wallpaper" width="150" height="80" /></a>
    <a href="javascript:;" title="Landscape Wallpaper"><img src="images/landscape2.jpg" alt="Landscape Wallpaper" width="150" height="80" /></a>
    <a href="javascript:;" title="Landscape Wallpaper"><img src="images/landscape3.jpg" alt="Landscape Wallpaper" width="150" height="80" /></a>
    <a href="javascript:;" title="Landscape Wallpaper"><img src="images/landscape4.jpg" alt="Landscape Wallpaper" width="150" height="80" /></a>
    <a href="javascript:;" title="Landscape Wallpaper"><img src="images/landscape5.jpg" alt="Landscape Wallpaper" width="150" height="80" /></a>
  </div>

  <!-- Current -->
  <div id="image"><img src="images/landscape.jpg" /></div>
</body>
</html>

Galéria


 

Stiahnuť

Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami

Stiahnuté 1410x (3.79 kB)
Aplikácia je vrátane zdrojových kódov v jazyku JavaScript

 

Všetky články v sekcii
JavaScriptu zdrojákoviště - jQuery
Program pre vás napísal Drahomír Hanák
Avatar
Užívateľské hodnotenie:
Ešte nikto nehodnotil, buď prvý!
Autor v současné době studuje Informatiku. Zajímá se o programování, matematiku a grafiku.
Aktivity