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é 1409x (3.79 kB)
Aplikácia je vrátane zdrojových kódov v jazyku JavaScript

Program pre vás napísal Drahomír Hanák

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