JQuery-based image display effect

This is a jQuery plug-in, with a very clever way to display a large image, click on the thumbnail, big plan is perfectly adapted to the browser window, drag with the mouse, you can browse the various parts of a large map.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Example</title>
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.box-0.1.0.js"></script>
    <link rel="stylesheet" type="text/css" href="css/jquery.box-0.1.0.css" media="screen" />
    <script type="text/javascript">
      $(document).ready(function() {
        $('#gallery a').largePhotoBox();
      });
    </script>
    <style type="text/css">
      body {margin:0}
      h2, p, #gallery {margin:15px}
      #gallery {
        background-color:#444;
        padding:10px;
        width:auto
      }
      #gallery ul {list-style:none}
      #gallery ul li {display:inline}
      #gallery ul img {
        border:5px solid #3E3E3E;
        border-width:5px
      }
      #gallery ul a {text-decoration:none}
      #gallery ul a:hover img {
        border:5px solid #FFF;
        border-width:5px;
        color:#FFF
      }
      #gallery ul a:hover {color:#FFF}
    </style>
  </head>
  <body>
    <div>
      <ul>
        <li>
          <a href="photos/image1.jpg" title="$('#gallery').largePhotoBox();">
            <img src="photos/thumb_image1.jpg" alt="">
          </a>
        </li>
        <li>
          <a href="photos/image2.jpg" title="$('#gallery a').largePhotoBox();">
            <img src="photos/thumb_image2.jpg" alt="">
          </a>
        </li>
        <li>
          <a href="photos/image3.jpg" title="$('#gallery a').largePhotoBox();">
            <img src="photos/thumb_image3.jpg" alt="">
          </a>
        </li>
        <li>
          <a href="photos/image4.jpg" title="$('#gallery a').largePhotoBox();">
            <img src="photos/thumb_image4.jpg" alt="">
          </a>
        </li>
        <li>
          <a href="photos/image5.jpg" title="$('#gallery a').largePhotoBox();">
            <img src="photos/thumb_image5.jpg" alt="">
          </a>
        </li>
        <li>
          <a href="photos/image6.jpg" title="$('#gallery a').largePhotoBox();">
            <img src="photos/thumb_image6.jpg" alt="">
          </a>
        </li>
        <li>
          <a href="photos/image7.jpg" title="$('#gallery a').largePhotoBox();">
            <img src="photos/thumb_image7.jpg" alt="">
          </a>
        </li>
      </ul>
    </div>
  </body>
</html>
  • del.icio.us
  • StumbleUpon
  • Digg
  • TwitThis
  • Mixx
  • Technorati
  • Facebook
  • NewsVine
  • Reddit
  • Google
  • LinkedIn
  • YahooMyWeb
Tags:

Related Posts of JQuery-based image display effect

  • ImageZoom image magnification effect (expansion of article)

    On a ImageZoom effect has been done on the image to enlarge detailed analysis, this time based on the ImageZoom expansion, to achieve more results. Major expansion of the original image and display box, display model, there are several modes: "F ...

  • 13 good effect jquery image amplifier

    For a given graph, you can use jquery to enlarge one of the local, the station in the e-commerce is a very common technique, this paper gives a good 13 jquery image zoom plug-in: http://www.designdim.com/2010/12/13-outstanding-jquery-image-zoom-effec

  • Jquery-image switching and image magnifier effect (jqzoom + jcarousel)

    Jquery.jqzoom + jcarousel image scrolling and partial realization of a magnifying glass effect pictures Sha did not say, on the map: demo Basic Description: Picture of the automatic switch, when the mouse moves to the pictures automatically enlarge p ...

  • JQuery-based Random picture display

    View results Download JQuery-based Random picture display, and tips with fine effect, really quite good, in fact, not only in the "Avatar", where only a picture display can be used, like the product category sites, dating sites category can, jQu

  • jquery picswitch pictures showing the effect of the focus map

    jquery pictureswitch create an image showing the effect of the implementation code, the focus for the realization of plans to use the jquery friends can refer to the following effect. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

  • Nearly 20 species of 3D image display presentation

    3D Multimedia Studio designed 20 models of the 3D image space presentation. Click to show image full flash website, view the 3D image display space effect.

  • JQuery's getting better and better - a magnifying glass effect

    Posted on 2008-10-22 15:10 Fencer Reading (1958) Comments (6) Edit Favorites belongs Categories: JQuery Display of goods in a number of e-commerce or online, in order to better display merchandise, usually to add a magnifying glass effect. Figure: (When t

  • JQuery getting better and better the - magnifying glass effect

    Posted on 2008-10-22 15:10 Fencer Reading (1958) Comments (6) Edit Favorites Category: JQuery Display of goods in a number of e-commerce or online, in order to better display merchandise, usually add a magnifying glass effect. Figure: (When the mouse ...

  • Image Warp plug-ins to achieve picture Click to expand the fade effect

    I download the jQuery Image Warp plug-in source code [ Online demo ] [ download source ] Help need to use jQuery library and jQuery Image Warp plug-in library file Use one instance, some include files Second, HTML part Third, Javascript section As ex ...

  • Lightweight JavaScript pop-up box script: TinyBox

    ThickBox is an extension based on JQuery library that can display in the browser interface, great pop-up box, it can display a single image, multiple images, AJAX requests for content or links to the content. To use ThickBox, need to download three f ...

blog comments powered by Disqus
Recent
Recent Entries
Tag Cloud
Random Entries