Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

jQuery - fullscreen galerie

Triviální jQuery plug-in, který vytvoří galerii přes celou stránku. Automaticky zmenšuje nebo zvětšije obrázek na pozadí. Je to spíš základ pro nějakou složitější galerii, tak doufám, že se skript využije. Licence je MIT.

Použití 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>

Galerie


 

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 1408x (3.79 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

 

Všechny články v sekci
JavaScript zdrojákoviště - jQuery
Program pro vás napsal Drahomír Hanák
Avatar
Uživatelské hodnocení:
1 hlasů
Autor v současné době studuje Informatiku. Zajímá se o programování, matematiku a grafiku.
Aktivity