jQuery Plug-in Responsive-3D-Cover-Flow-Gallery
2021. 12. 20. 12:03ㆍStudy/Example & Plug-in
jQuery Plug-in Responsive-3D-Cover-Flow-Gallery
Responsive-3D-Cover-Flow-Gallery-Plugin-with-jQuery(1).zip
0.30MB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>jQuery responsiveGallery Plugin Example</title>
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/jquery-responsiveGallery.css">
<style type="text/css">
html{
background-color: #235E6F;
}
.w-gallery{
margin-top: 80px;
}
</style>
<script type="text/javascript" src="lib/modernizr.custom.js"></script>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="src/jquery.responsiveGallery.js"></script>
<script type="text/javascript">
$(function () {
$('.responsiveGallery-wrapper').responsiveGallery({
animatDuration: 400, //动画时长 单位 ms
$btn_prev: $('.responsiveGallery-btn_prev'),
$btn_next: $('.responsiveGallery-btn_next')
});
});
</script>
</head>
<body>
<div id="jquery-script-menu">
<div class="jquery-script-center">
<ul>
<li><a href="http://www.jqueryscript.net/gallery/Responsive-3D-Cover-Flow-Gallery-Plugin-with-jQuery.html">Download This Plugin</a></li>
<li><a href="http://www.jqueryscript.net/">Back To jQueryScript.Net</a></li>
</ul>
<div class="jquery-script-ads"><script type="text/javascript"><!--
google_ad_client = "ca-pub-2783044520727903";
/* jQuery_demo */
google_ad_slot = "2780937993";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
<div class="jquery-script-clear"></div>
</div>
</div>
<h1 style="margin-top:150px; color:#fff; text-align:center;">jQuery responsiveGallery Plugin Example</h1>
<div class="w-gallery">
<section id="responsiveGallery-container" class="responsiveGallery-container">
<a class="responsiveGallery-btn responsiveGallery-btn_prev" href="javascript:void(0);"></a>
<a class="responsiveGallery-btn responsiveGallery-btn_next" href="javascript:void(0);"></a>
<ul class="responsiveGallery-wrapper">
<li class="responsiveGallery-item"> <a href="#" class="responsivGallery-link"><img src="assets/pics/0.jpg" height="320" width="320" alt="" class="responsivGallery-pic"></a>
<div class="w-responsivGallery-info">
<h2 class="responsivGallery-name">Google</h2>
<h3 class="responsivGallery-position">www.google.com</h3>
</div>
</li>
<li class="responsiveGallery-item"> <a href="#" class="responsivGallery-link"><img src="assets/pics/1.jpg" height="320" width="320" alt="" class="responsivGallery-pic"></a>
<div class="w-responsivGallery-info">
<h2 class="responsivGallery-name">Facebook</h2>
<h3 class="responsivGallery-position">www.facebook.com</h3>
</div>
</li>
<li class="responsiveGallery-item"> <a href="#" class="responsivGallery-link"><img src="assets/pics/2.jpg" height="320" width="320" alt="" class="responsivGallery-pic"></a>
<div class="w-responsivGallery-info">
<h2 class="responsivGallery-name">Twitter</h2>
<h3 class="responsivGallery-position">www.twitter.com</h3>
</div>
</li>
<li class="responsiveGallery-item"> <a href="#" class="responsivGallery-link"><img src="assets/pics/3.jpg" height="320" width="320" alt="" class="responsivGallery-pic"></a>
<div class="w-responsivGallery-info">
<h2 class="responsivGallery-name">jQuery</h2>
<h3 class="responsivGallery-position">www.jquery.com</h3>
</div>
</li>
<li class="responsiveGallery-item"> <a href="#" class="responsivGallery-link"><img src="assets/pics/4.jpg" height="320" width="320" alt="" class="responsivGallery-pic"></a>
<div class="w-responsivGallery-info">
<h2 class="responsivGallery-name">jQuery UI</h2>
<h3 class="responsivGallery-position">www.jqueryui.com</h3>
</div>
</li>
<li class="responsiveGallery-item"> <a href="#" class="responsivGallery-link"><img src="assets/pics/5.jpg" height="320" width="320" alt="" class="responsivGallery-pic"></a>
<div class="w-responsivGallery-info">
<h2 class="responsivGallery-name">W3C</h2>
<h3 class="responsivGallery-position">www.w3c.org</h3>
</div>
</li>
<li class="responsiveGallery-item"> <a href="#" class="responsivGallery-link"><img src="assets/pics/6.jpg" height="320" width="320" alt="" class="responsivGallery-pic"></a>
<div class="w-responsivGallery-info">
<h2 class="responsivGallery-name">Github</h2>
<h3 class="responsivGallery-position">www.github.com</h3>
</div>
</li>
<li class="responsiveGallery-item"> <a href="#" class="responsivGallery-link"><img src="assets/pics/7.jpg" height="320" width="320" alt="" class="responsivGallery-pic"></a>
<div class="w-responsivGallery-info">
<h2 class="responsivGallery-name">Linkedin</h2>
<h3 class="responsivGallery-position">www.linkedin.com</h3>
</div>
</li>
<li class="responsiveGallery-item"> <a href="#" class="responsivGallery-link"><img src="assets/pics/8.jpg" height="320" width="320" alt="" class="responsivGallery-pic"></a>
<div class="w-responsivGallery-info">
<h2 class="responsivGallery-name">Tumblr</h2>
<h3 class="responsivGallery-position">www.tumblr.net</h3>
</div>
</li>
</ul>
</section>
</div>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36251023-1']);
_gaq.push(['_setDomainName', 'jqueryscript.net']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
'Study > Example & Plug-in' 카테고리의 다른 글
| JavaScript Plug-in Calendar (0) | 2021.12.20 |
|---|---|
| jQuery Plug-in waypoint-sticky 예시 (0) | 2021.12.20 |
| jQuery Plug-in scroll waypoint (0) | 2021.12.20 |
| jQuery Plug-in responsiveGallery_sample (0) | 2021.12.20 |
| jQuery Plug-in coin-slider (0) | 2021.12.20 |
