Javascript 
Galleries & SlideShow Fancy Moves Products Gallery
Galleries & SlideShow Fancy Moves Products Gallery Galleries & SlideShow Fancy Moves Products Gallery Hi, today i will prest a Fancy Moves Products Gallery. This gallery is made by jQuery, html and css. Is very useful for product presentation, you have one image in the foreground with title, buttons for more details, if you click this is loaded a slide show with next and prev buttons.I hope you enjoy!
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" charset="utf-8">
<script src="js/jquery-1.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/slider.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="fancybox/fancybox/jquery.fancybox-1.2.6.css" media="screen" />
<script type="text/javascript" src="fancybox/fancybox/jquery.fancybox-1.2.6.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a.zoom2").fancybox({
'zoomSpeedIn' : 500,
'zoomSpeedOut' : 500,
'overlayOpacity' : 0.6,
'overlayColor' : '#000'
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#Button1').click(function() {
location.reload();
});
});
</script>
<!-- Slider Outer Starts -->
<div id="slider-outer" >
<!-- Slider Starts -->
<div id="slider">
<img class="scrollButtons left" src="images/arrow-left.png" alt="" />
<!-- Scroll Starts Here -->
<div style="overflow: hidden;" class="scroll">
<!-- Scroll Container Starts -->
<div class="scrollContainer">
<!-- Panel Starts -->
<div class="panel" id="panel_1">
<!-- Panel Inside Starts -->
<div class="inside">
<!-- Image Starts -->
<img src="images/img6.jpg" alt="" />
<p>math problem (charcoal)<br />
<a class="zoom2" href="images/5-2.jpg" target="_blank" rel="group6">More Views</a>
<a class="zoom2" href="images/5-3.jpg" target="_blank" rel="group6"></a>
<a class="zoom2" href="images/img6.jpg" target="_blank" rel="group6"></a></p>
<!-- Image Ends -->
</div>
<!-- Panel Inside Ends -->
</div>
<!-- Panel Ends -->
<!-- Panel Starts -->
<div class="panel" id="panel_2">
<!-- Panel Inside Starts -->
<div class="inside">
<!-- Image Starts -->
<img src="images/img2.jpg" alt="" />
<p>path to nowhere<br />
<a class="zoom2" href="images/red-1.jpg" target="_blank" rel="group2">More Views</a>
<a class="zoom2" href="images/red-2.jpg" target="_blank" rel="group2"></a>
<a class="zoom2" href="images/img2.jpg" target="_blank" rel="group2"></a></p>
<!-- Image Ends -->
</div>
<!-- Panel Inside Ends -->
</div>
<!-- Panel Ends -->
<!-- Panel Starts -->
<div class="panel" id="panel_3">
<!-- Panel Inside Starts -->
<div class="inside">
<!-- Image Starts -->
<img src="images/img3.jpg" alt="" />
<p>and then I woke up<br />
<a class="zoom2" href="images/ss-1.jpg" target="_blank" rel="group3">More Views</a>
<a class="zoom2" href="images/ss-2.jpg" target="_blank" rel="group3"></a>
<a class="zoom2" href="images/img3.jpg" target="_blank" rel="group3"></a></p>
<!-- Image Ends -->
</div>
<!-- Panel Inside Ends -->
</div>
<!-- Panel Ends -->
<!-- Panel Starts -->
<div class="panel" id="panel_4">
<!-- Panel Inside Starts -->
<div class="inside">
<!-- Image Starts -->
<img src="images/img4.jpg" alt="" />
<p>one hundred<br />
<a class="zoom2" href="images/100-1.jpg" target="_blank" rel="group4">More Views</a>
<a class="zoom2" href="images/100-2.jpg" target="_blank" rel="group4"></a>
<a class="zoom2" href="images/img4.jpg" target="_blank" rel="group4"></a></p>
<!-- Image Ends -->
</div>
<!-- Panel Inside Ends -->
</div>
<!-- Panel Ends -->
<!-- Panel Starts -->
<div class="panel" id="panel_5">
<!-- Panel Inside Starts -->
<div class="inside">
<!-- Image Starts -->
<img src="images/img5.jpg" alt="" />
<p>math problem<br />
<a class="zoom2" href="images/5-1.jpg" target="_blank" rel="group5">More Views</a>
<a class="zoom2" href="images/img5.jpg" target="_blank" rel="group5"></a></p>
<!-- Image Ends -->
</div>
<!-- Panel Inside Ends -->
</div>
<!-- Panel Ends -->
<!-- Panel Starts -->
<div class="panel" id="panel_6">
<!-- Panel Inside Starts -->
<div class="inside">
<!-- Image Starts -->
<img src="images/img1.jpg" alt="" />
<p>seven days a week<br />
<a class="zoom2" href="images/7-1.jpg" target="_blank" rel="group1">More Views</a>
<a class="zoom2" href="images/7-2.jpg" target="_blank" rel="group1"></a>
<a class="zoom2" href="images/img1.jpg" target="_blank" rel="group1"></a></p>
<!-- Image Ends -->
</div>
<!-- Panel Inside Ends -->
</div>
<!-- Panel Ends -->
<!-- Panel Starts -->
<div class="panel" id="panel_7">
<!-- Panel Inside Starts -->
<div class="inside">
<!-- Image Starts -->
<img src="images/img7.jpg" alt="" />
<p>there's more to life<br />
<a class="zoom2" href="images/more-1.jpg" target="_blank" rel="group7">More Views</a>
<a class="zoom2" href="images/more-2.jpg" target="_blank" rel="group7"></a>
<a class="zoom2" href="images/img7.jpg" target="_blank" rel="group7"></a></p>
<!-- Image Ends -->
</div>
<!-- Panel Inside Ends -->
</div>
<!-- Panel Ends -->
<!-- Panel Starts -->
<div class="panel" id="panel_8">
<!-- Panel Inside Starts -->
<div class="inside">
<!-- Image Starts -->
<img src="images/img8.jpg" alt="" />
<p>Label info here<br />
<a class="zoom2" href="images/e-1.jpg" target="_blank" rel="group8">More Views</a>
<a class="zoom2" href="images/e-2.jpg" target="_blank" rel="group8"></a>
<a class="zoom2" href="images/img8.jpg" target="_blank" rel="group8"></a></p>
<!-- Image Ends -->
</div>
<!-- Panel Inside Ends -->
</div>
<!-- Panel Ends -->
<!-- Panel Starts -->
<div class="panel" id="panel_9">
<!-- Panel Inside Starts -->
<div class="inside">
<!-- Image Starts -->
<img src="images/img9.jpg" alt="" />
<p>Words aren't always meant to be read<br />
<a class="zoom2" href="images/w-1.jpg" target="_blank" rel="group9">More Views</a>
<a class="zoom2" href="images/w-2.jpg" target="_blank" rel="group9"></a>
<a class="zoom2" href="images/img9.jpg" target="_blank" rel="group9"></a></p>
<!-- Image Ends -->
</div>
<!-- Panel Inside Ends -->
</div>
<!-- Panel Ends -->
</div>
<!-- SCroll Container Ends -->
</div>
<!-- Scroll Ends Here -->
<img class="scrollButtons right" src="images/arrow-right.png" alt="right" />
</div>
<!-- Slider Ends -->
</div>
<!-- Slider Outer Ends -->
*{
margin:0;
padding:0;
}
body{
background:url(../images/pageBack.jpg)
}
/* Slider Styles Starts */
#intro {
padding-bottom: 10px;
}
#slider-outer{
height:470px;
padding:15px 0 0 0;
text-transform:uppercase
}
#slider {
width: 800px;
margin: 0 auto;
position: relative;
}
.scroll {
overflow: hidden;
width: 790px;
margin: 0 auto;
position: relative;
}
.scrollContainer {
position: relative;
}
.scrollContainer div.panel {
padding: 10px;
width: 274px;
height: 470px;
}
.inside {
padding: 10px 0; text-align:center
}
.inside img {
display: block;
margin: 0 0 10px 0;
width: 250px;
}
.inside h2 {
font-weight: normal;
color: #111;
font-size: 16px;
margin: 0 0 8px 0;
}
.inside p {
font-size: 11px;
color: #ccc;
}
.scrollButtons {
position: absolute;
top: 150px;
cursor: pointer;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
.scrollButtons:hover {
filter:alpha(opacity=80);
-moz-opacity:0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
}
.scrollButtons.left {
left: -70px;
}
.scrollButtons.left:hover {
left: -70px;
}
.scrollButtons.right {
right: -70px;
}
.scrollButtons.right:hover {
right: -70px;
}
.hide {
display: none;
}
#slider p{position:relative; top:-2.8em; text-align:center; font-weight:bold; font-family:Arial, Helvetica, sans-serif}
/* Slider Styles Ends */
img {border:0px}
#slider a:link, #slider a:visited {color:#0CF; text-decoration:none; font-size:.6em; }
#slider a:hover, #slider a:active {color:#fff; text-decoration:none; font-size:.6em; cursor:pointer}
/* DEMO STYLES - delete these */
#info {width:800px; margin:0 auto; color:#666; margin-top:50px; text-align:center; font-size:12px; padding-bottom:25px}
#info a:link, #info a:visited {color:#ccc}
#info a:hover, #info a:active {color:#fff}
#demo-outer {width:980px; margin:0 auto; background:#202020; -webkit-box-shadow: 0px 0px 4px #000;
-moz-box-shadow: 0px 0px 15px #000; padding-bottom:25px}
This script has been developed by http://webdesignandsuch.com !
