• címkék:
  • lightbox
  • modális
  • ablak
  • window
  • popup
  • felugró

YoxView

Képek

Deklaráció

        $(document).ready(function(){
          $('.pelda-1').yoxview({
            lang: 'hu'
          });
        });
      

HTML kód

        <div class="pelda-1">
          <a href="images/img1.jpg">
            <img src="images/img1-s.jpg" alt="" title="cím 1" />
          </a>
          <a href="images/img2.jpg">
            <img src="images/img2-s.jpg" alt="" title="cím 1" />
          </a>
          <a href="images/img3.jpg">
            <img src="images/img3-s.jpg" alt="" title="cím 1" />
          </a>
        </div>
      

Videók

Vimeo
YouTube
Flash

Deklaráció

        $(document).ready(function(){
          $('.pelda-2').yoxview({
            lang: 'hu',
            defaultDimensions: {
              video: { width: 640, height: 360 },
              flash: { width: 640, height: 460 }
            }
          });
        });
      

HTML kód

        <div class="pelda-2">
          <a href="http://vimeo.com/10733597">
            <img src="images/img4-s.jpg" alt="" title="Vimeo videó" />
          </a>
          <a href="http://www.youtube.com/watch?v=53c6o_cNPEo">
            <img src="images/img5-s.jpg" alt="" title="YouTube videó" />
          </a>
          <a href="http://www.adobe.com/jp/events/cs3_web_edition_tour/swfs/perform.swf">
            <img src="images/img6-s.jpg" alt="" title="Flash animáció" />
          </a>
        </div>
      

iFrame + inline + skin

iFrame
jQuery plugins
inline

Deklaráció

        $(document).ready(function(){
          $('.pelda-3').yoxview({
            lang: 'hu',
            skin: 'top_menu',
            allowInternalLinks: true
          });
        });
      

HTML kód

        <div class="pelda-3">
          <div>
            <strong>iFrame</strong><br/>
            <a href="http://www.jquery-plugins.hu" target="yoxview">
              <img src="images/img7-s.jpg" alt="jQuery plugins" title="jQuery plugins - A legjobb jQuery plugin-ok egy helyen!" />
            </a>
          </div>
          <div>
            <strong>inline</strong><br/>
            <a href="#inlineContent">
              <img src="images/img8-s.jpg" alt="" title="Inline tartalom címe" />
            </a>
          </div>
        </div>
      

Picasa galéria (Picasa plugin használata)

Deklaráció

        $(document).ready(function(){
          $('#pelda-4').yoxview({
            lang: 'hu',
            dataUrl: 'http://picasaweb.google.com/toledo64.fx/TypeRJDM'
          });
        });
      

HTML kód

        <div id="pelda-4" class="thumbnails"></div>
      

Flickr galéria (Flickr plugin használata)

Deklaráció

        $(document).ready(function(){
          $('#pelda-5').yoxview({
            lang: 'hu',
            autoPlay: false,
            dataUrl: 'http://www.flickr.com/photos/jprice/sets/72157618419355715/',
            dataSourceOptions: {
              per_page: 25,
              page: 1
            }
          });
        });
      

HTML kód

        <div id="pelda-5" class="thumbnails"></div>
      

« bezár