JQuery-based image display effect

sponsored links
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

  • 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.

  • 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-based summary

    Jquery-based summary 1, on a reference page elements by jquery's $ () reference element, including through the id, class, element names, as well as elements of the level of relations and conditions of dom, or xpath method, and returns the object ...

  • jquery DataTables plugin display table

    jquery DataTables plugin display table The plug can sort the table, query, page And plug-ins can use the form jEditable edit, and save back to server-side Official website: http://www.datatables.net/ Annex 1: Download the file from the official websi

  • JQuery based on the color of alternating js sorting and display tables

    JQuery table sorting based on color alternating with the recent end of the project js pages use the page, to write an instance, used to share with you, the one's incompetence it! // Following is a table page code var currentPage; // The current page v

  • book-jQuery-based tutorial jquery

    Chapter 1 jQuery Getting Started 1 1.1 jQuery can do a 1.2 jQuery Why are they so good 2 1.3 The first jQuery documentation 3 1.3.1 download jQuery 3 1.3.2 Setting HTML Document 4 1.3.3 write jQuery code 6 1.4 Summary 9 Chapter 2 selectors - Get everythin

  • jquery real 4 - Tab Effect

    1. A group of labels to manage with a ul, ul of each label is the following one li, label the contents of the region shown below is to use div to manage it. 2. With a floating (float) element after the element is surrounded by floating elements, if y ...

  • jquery combat 4 - Tab effect

    1. A set of tags to manage with a ul, ul of each label is one of the following li, label the contents shown below is to use div to manage the area. 2. With the float (float) element of the element will be around after the floating elements, if you do ...

  • JQuery movement stunning display of special effects

    1. Flu navigation menu The following navigation menu, when moving the mouse in the above time will be lowered smoothly to explain the menu, when you move the mouse around in the fast time of the above would suspect it is Flash. 2. Turn lantern Rounda ...

  • Jquery combination of css effect of small bubbles ~

    Effect is a time when the mouse hover up to the surface of a bubble above the other menu ~ ~ Bubble div: <div> <div></div> <div> <a href="http://www.baidu.com" target="_blank"> Language </a> <a href="#"> Mathemati

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