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">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <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();
    <style type="text/css">
      body {margin:0}
      h2, p, #gallery {margin:15px}
      #gallery {
      #gallery ul {list-style:none}
      #gallery ul li {display:inline}
      #gallery ul img {
        border:5px solid #3E3E3E;
      #gallery ul a {text-decoration:none}
      #gallery ul a:hover img {
        border:5px solid #FFF;
      #gallery ul a:hover {color:#FFF}
          <a href="photos/image1.jpg" title="$('#gallery').largePhotoBox();">
            <img src="photos/thumb_image1.jpg" alt="">
          <a href="photos/image2.jpg" title="$('#gallery a').largePhotoBox();">
            <img src="photos/thumb_image2.jpg" alt="">
          <a href="photos/image3.jpg" title="$('#gallery a').largePhotoBox();">
            <img src="photos/thumb_image3.jpg" alt="">
          <a href="photos/image4.jpg" title="$('#gallery a').largePhotoBox();">
            <img src="photos/thumb_image4.jpg" alt="">
          <a href="photos/image5.jpg" title="$('#gallery a').largePhotoBox();">
            <img src="photos/thumb_image5.jpg" alt="">
          <a href="photos/image6.jpg" title="$('#gallery a').largePhotoBox();">
            <img src="photos/thumb_image6.jpg" alt="">
          <a href="photos/image7.jpg" title="$('#gallery a').largePhotoBox();">
            <img src="photos/thumb_image7.jpg" alt="">
分类:Web 时间:2010-03-17 人气:457
blog comments powered by Disqus


  • jquery DataTables plugin display table 2011-01-14

    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 设置style:display的方法 2014-09-15

    这篇文章主要介绍了jquery 设置style:display的方法,需要的朋友可以参考下 ("#id").css('display','none'); $("#id").css('display','block'); 或 $("#id")[0].style.display = 'none'; $("#id")返回的是JQuery 它是个集合肯定有display属性 $("#id").show()表示dis

  • JQuery based on the color of alternating js sorting and display tables 2011-05-31

    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

  • jquery real 4 - Tab Effect 2010-03-30

    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 movement stunning display of special effects 2010-03-08

    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 ~ 2010-03-25

    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 hr

  • jquery combat 4 - Tab effect 2010-03-30

    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 control the display of hidden TR 2011-05-16

    There are many online, here are three: The first method is to use the id, this method can generate html dynamically set the time tr of the id, but also with the most simplest, as follows: <table> <tr><td> This line is not hidden </td&

  • jQueryTree1.2.1 - jQuery based object-oriented tree 2011-05-25

    1. Using jquery, jquery, but did not follow the coding style, because the object-oriented easier to maintain, can be more scalable. 2. DOM node delay generation. 3. Can be generated by the node before the callback function to achieve a variety of tre

iOS 开发

Android 开发

Python 开发



PHP 开发

Ruby 开发






Javascript 开发

.NET 开发



Copyright (C) codeweblog.com, All Rights Reserved.

CodeWeblog.com 版权所有 闽ICP备15018612号

processed in 0.034 (s). 13 q(s)