jQuery UI w przykładach

Image replacement gallery

Suppose you have a portfolio where you want to showcase multi images without jumping to another page, you can load the JPG into the target element.

[image gallery]

First append an empty <em> to h2.

When a link within the <p class=thumbs> is clicked:

Kod:

$(document).ready(function(){
    $("h2").append('<em></em>')
    $(".thumbs a").click(function(){
      var largePath = $(this).attr("href");
      var largeAlt = $(this).attr("title");
      $("#largeImg").attr({ src: largePath, alt: largeAlt });
      $("h2 em").html(" (" + largeAlt + ")"); return false;
    });
});

Link do przykładu: Image Replacement Gallery

Code Magnets

Takie przykłady są w książkach z serii Head First.

Link: draggable

Źródła przykładów

  1. Image replacement gallery, jQuery Tutorials for Designers