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 人气:425
blog comments powered by Disqus


  • JQuery-based Random picture display 2010-06-30

    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 2008-12-31

    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 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()表示display:block, $("#id").hide()表示display:none; $(

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

  • book-jQuery-based tutorial jquery 2008-06-02

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

iOS 开发

Android 开发

Python 开发



PHP 开发

Ruby 开发






Javascript 开发

.NET 开发



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

CodeWeblog.com 版权所有 黔ICP备15002463号-1

processed in 0.064 (s). 12 q(s)