This article is an image preview effect code that is implemented using jquery. You can click a thumbnail to display the preview effect of a large image on the current page, that is, click the thumbnail of jQuery to preview the large image plug-in instance.
This article is an image preview effect code that is implemented using jquery. You can click a thumbnail to display the preview effect of a large image on the current page, that is, click the thumbnail of jquery to preview the large image plug-in instance.
<! Doctype html public "-// w3c // dtd xhtml 1.0 strict // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "en" lang = "en">
<Head>
<Meta http-equiv = "content-type" content = "text/html; charset = gb2312"/>
<Meta http-equiv = "imagetoolbar" content = "no"/>
<Title> jquery click the thumbnail to preview the large image </title>
<Script type = "text/Webpage effects" src = "http://code.jquery.com/jquery-1.4.2.min.js"> </script>
<Script type = "text/javascript" src = "js/jquery. mousewheel-3.0.2.pack.js"> </script>
<Script type = "text/javascript" src = "js/jquery. fancybox-1.3.1.js"> </script>
<Script type = "text/javascript" src = "js/pngobject. js"> </script>
<Link rel = "stylesheet" href = "style/style.css tutorial" type = "text/css"/>
<Link rel = "stylesheet" href = "style/jquery.fancybox-1.3.1.css" type = "text/css"/>
<Script type = "text/javascript">
$ (Document). ready (function (){
/*
* Examples-images
*/
$ ("A # example1"). fancybox ({
'Titleshow': false
});
$ ("A # example2"). fancybox ({
'Titleshow': false,
'Transitionin': 'elastic ',
'Transitionout': 'elastic'
});
$ ("A # example3"). fancybox ({
'Titleshow': false,
'Transitionin': 'none ',
'Transitionout': 'none'
});
$ ("A # example4"). fancybox ();
$ ("A # example5"). fancybox ({
'Titleposition': 'inside'
});
$ ("A # example6"). fancybox ({
'Titleposition': 'over'
});
$ ("A [rel = example_group]"). fancybox ({
'Transitionin': 'none ',
'Transitionout': 'none ',
'Titleposition': 'over ',
'Titleformat': function (title, currentarray, currentindex, currentopts ){
Return '<span id = "fancybox-title-over"> image' + (currentindex + 1) +'/'+ currentarray. length + (title. length? '& Nbsp;' + title: '') + '</span> ';
}
});
/*
* Examples-various
*/
$ ("# Various1"). fancybox ({
'Titleposition': 'inside ',
'Transitionin': 'none ',
'Transitionout': 'none'
});
$ ("# Various2"). fancybox ();
$ ("# Various3"). fancybox ({
'Width': '123 ',
'Height': '123 ',
'Autoscale': false,
'Transitionin': 'none ',
'Transitionout': 'none ',
'Type': 'iframe'
});
$ ("# Various4"). fancybox ({
'Padding': 0,
'Autoscale': false,
'Transitionin': 'none ',
'Transitionout': 'none'
});
});
</Script>
</Head>
<Body>
<Div id = "content">
<H4> jquery fancybox implements clicking a small graph to display a large image <P>
<A rel = "example_group" href = "example/4_ B .jpg" title = "lorem ips tutorial um dolor sit amet"> </a>
<A rel = "example_group" href = "example/5_ B .jpg" title = ""> </a>
<A rel = "example_group" href = "example/6_ B .jpg" title = ""> </a>
</P>
<P>
<A rel = "example_group" href = "example/7_ B .jpg" title = "lorem ipsum dolor sit amet"> </a>
<A rel = "example_group" href = "example/8_ B .jpg" title = ""> </a>
<A rel = "example_group" href = "example/9_ B .jpg" title = ""> </a>
</P>
</Div>
<Div> <p> & nbsp; </p> </div>
</Body>
</Html>
Source code
Http://down.bKjia. c0m/down/code/js/jiaodiantu/2010/0907/20675.html
Effect preview address
Http://g.111cn.cn/javascript/js/20100907/fancybox/