• címkék:
  • kép
  • cím
  • caption
  • box
  • doboz
  • slide

Mosaic!

Példa

#1

www.jquery-plugins.hu

Deklaráció

        $(document).ready(function(){
          $('#pelda-1').mosaic({
            opacity: 0.8
          });
          $('#pelda-2').mosaic();
          $('#pelda-3').mosaic({
            animation: 'slide'
          });
          $('#pelda-4').mosaic({
            animation: 'slide'
          });
          $('#pelda-5').mosaic({
            animation: 'slide',
            anchor_y: 'top'	
          });
          $('#pelda-6').mosaic({
            animation: 'slide',
            hover_x: '400px'
          });
          $('#pelda-7').mosaic({
            animation: 'slide',
            anchor_y: 'top',
            hover_y: '80px'
          });
          $('#pelda-8').mosaic({
            animation: 'slide',
            hover_x: '400px',
            hover_y: '300px'
          });
        });
      

HTML kód

        <div class="block">
          <h3>#1</h3>
          <div id="pelda-1" class="mosaic-block">
            <a href="http://www.jquery-plugins.hu" class="mosaic-overlay" target="_blank"></a>
            <div class="mosaic-backdrop"><img src="images/img1.jpg" width="400" height="250" alt="www.jquery-plugins.hu" /></div>
          </div>
        </div>

        <div class="block">
          <h3>#2</h3>
          <div id="pelda-2" class="mosaic-block">
            <a href="http://www.jquery-plugins.hu" class="mosaic-overlay" target="_blank">
              <div class="details">
                <h4>Honda Civic 5gen</h4>
                <p>www.jquery-plugins.hu</p>
              </div>
            </a>
            <div class="mosaic-backdrop"><img src="images/img2.jpg" width="400" height="250" alt="www.jquery-plugins.hu" /></div>
          </div>
        </div>

        <div class="block">
          <h3>#3</h3>
          <div id="pelda-3" class="mosaic-block">
            <a href="http://www.jquery-plugins.hu" class="mosaic-overlay" target="_blank">
              <div class="details">
                <h4>Honda Civic 5gen</h4>
                <p>www.jquery-plugins.hu</p>
              </div>
            </a>
            <div class="mosaic-backdrop"><img src="images/img3.jpg" width="400" height="250" alt="www.jquery-plugins.hu" /></div>
          </div>
        </div>

        <div class="block">
          <h3>#4</h3>
          <div id="pelda-4" class="mosaic-block">
            <a href="http://www.jquery-plugins.hu" class="mosaic-overlay" target="_blank">
              <div class="details">
                <h4>Honda Civic 5gen</h4>
                <p>www.jquery-plugins.hu</p>
              </div>
            </a>
            <div class="mosaic-backdrop"><img src="images/img4.jpg" width="400" height="250" alt="www.jquery-plugins.hu" /></div>
          </div>
        </div>

        <div class="block">
          <h3>#5</h3>
          <div id="pelda-5" class="mosaic-block">
            <a href="http://www.jquery-plugins.hu" class="mosaic-overlay" target="_blank">
              <div class="details">
                <h4>Honda Civic 5gen</h4>
                <p>www.jquery-plugins.hu</p>
              </div>
            </a>
            <div class="mosaic-backdrop"><img src="images/img5.jpg" width="400" height="250" alt="www.jquery-plugins.hu" /></div>
          </div>
        </div>

        <div class="block">
          <h3>#6</h3>
          <div id="pelda-6" class="mosaic-block">
            <div class="mosaic-overlay"><img src="images/img6.jpg" width="400" height="250" alt="www.jquery-plugins.hu" /></div>
            <a href="http://www.jquery-plugins.hu" class="mosaic-backdrop" target="_blank">
              <div class="details">
                <h4>Honda Civic 5gen</h4>
                <p>www.jquery-plugins.hu</p>
              </div>
            </a>
          </div>
        </div>

        <div class="block">
          <h3>#7</h3>
          <div id="pelda-7" class="mosaic-block">
            <a href="http://www.jquery-plugins.hu" class="mosaic-overlay" target="_blank" >
              <img src="images/img7.jpg" width="400" height="250" alt="www.jquery-plugins.hu" />
            </a>
            <a href="http://www.jquery-plugins.hu" class="mosaic-backdrop" target="_blank" >
              <div class="details">
                <h4>Honda Civic 5gen</h4>
                <p>www.jquery-plugins.hu</p>
              </div>
            </a>
          </div>
        </div>

        <div class="block">
          <h3>#8</h3>
          <div id="pelda-8" class="mosaic-block">
            <div class="mosaic-overlay">
              <img src="images/img8.jpg" width="400" height="250" alt="www.jquery-plugins.hu" />
            </div>
            <a href="http://www.jquery-plugins.hu" class="mosaic-backdrop" target="_blank" >
              <div class="details">
                <h4>Honda Civic 5gen</h4>
                <p>www.jquery-plugins.hu</p>
              </div>
            </a>
          </div>
        </div>
      

« bezár