change big img

by AJIEKCEU

HTML

<link rel="stylesheet" href="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.css">
<script src="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.js"></script>
<div class="catalog-item-image">
    <div class="big-img">
        <a rel="images_gallery" href="http://placehold.it/300x225/"><img src="http://placehold.it/300x225/" alt="" /></a>
    </div>
    <ul class="list_img clearfix">
        <li><a rel="images_gallery" href="http://placehold.it/300x225/"><img src="http://placehold.it/150x150/" alt="" /></a></li>
        <li><a rel="images_gallery" href="http://placehold.it/410x410/"><img src="http://placehold.it/150x150/" alt="" /></a></li>
        <li><a rel="images_gallery" href="http://placehold.it/420x420/"><img src="http://placehold.it/150x150/" alt="" /></a></li>
        <li><a rel="images_gallery" href="http://placehold.it/420x420/"><img src="http://placehold.it/150x150/" alt="" /></a></li>
    </ul>
</div>

CSS

.clearfix:after{
    display:block;
    clear:both;
    content:" ";
    font-size:0;
    height:0;
    visibility:hidden;
}
* html .clearfix{//zoom: 1;}/*IE6*/
*:first-child+html .clearfix{//zoom: 1;}/*IE7*/

.catalog-item-image{
    float: left;
    margin: 0 20px 20px 0;
    width: 300px;
}

.big-img{
    width: 300px;
}
.big-img img{
    max-width: 100%;
    height: auto;
    vertical-align: top;
}

.list_img{
    list-style:none;
    padding-left: 0;
    margin: 10px 0;
}
.list_img li{
    float:left;
    margin:0 0 10px 10px;
    width: 93px;
    height: 93px;
}
.list_img li:nth-child(3n+1){
    margin-left: 0;
}
.list_img img{
    max-width: 100%;
    height: auto;
    vertical-align: top;
}

JavaScript

$(document).ready(function() {
	/* Apply fancybox to multiple items */
	$("list_img a").fancybox({
		'transitionIn'	:	'elastic',
		'transitionOut'	:	'elastic',
		'speedIn'		:	600, 
		'speedOut'		:	200, 
		'overlayShow'	:	false
	});
});