Welcome, Old Sport!

可缩放的图像展示画廊 CSS & jQuery

by ilikecss ON 2010/12/01 7736

网上找到的插件,效果还不错,只是他不支持IE,为了广大中国用户,我修改了下 jQuery 和 CSS,现在兼容大众浏览器了。
这个效果在很多商务网站,个人博客被运用到,一般是在画廊展示或作品展示的位置,希望的朋友可以下载。
PS: 制作中运用了CSS圆角和阴影效果,如果需要看最好效果,请使用FF浏览器。
Zoomable-Image-Gallery

Step1. 创建HTML

<div id="col">
    <ul id="pg" class="thumb">
    <li>
    <img src="images/main_image1.jpg" alt="images1" />
    <p>Title Here</p>
    </li>
    <li>
    <img src="images/main_image2.jpg" alt="images2" />
    <p>Title Here</p>
    </li>
    <li>
    <img src="images/main_image3.jpg" alt="images3" />
    <p>Title Here</p>
    </li>
    <li>
    <img src="images/main_image4.jpg" alt="images4" />
    <p>Title Here</p>
    </li>
    <li>
    <img src="images/main_image5.jpg" alt="images5" />
    <p>Title Here</p>
    </li>
    <li>
    <img src="images/main_image6.jpg" alt="images6" />
    <p>Title Here</p>
    </li>
    <li>
    <img src="images/main_image7.jpg" alt="images7" />
    <p>Title Here</p>
    </li>
    <li>
    <img src="images/main_image8.jpg" alt="images8" />
    <p>Title Here</p>
    </li>
    <li>
    <img src="images/main_image9.jpg" alt="images9" />
    <p>Title Here</p>
    </li>
    </ul>
</div>

Step2. 创建CSS

#col {
width: 750px;
margin: 50px auto 0 auto;
clear: both;
padding-bottom: 50px;
}
ul.thumb {
width: 620px;
list-style: none;
margin: 0 auto;
padding: 10px 0 10px 10px;
}
#pg {
position: relative;
height: 335px;
background: #111;
}
#pg li {
width: 200px;
height: 104px;
position: relative;
list-style: none;
overflow: hidden;
float: left;
margin: 0 5px 10px 0;
z-index: 2;
opacity: 0.3;
filter:alpha(opacity=30);
cursor: pointer;
}
#pg li.active {
opacity: 1;
filter: alpha(opacity=100);
}
#pg li.selected {
opacity: 1;
filter: alpha(opacity=100);
z-index: 99;
-moz-box-shadow: 0px 0px 10px #fff;
-webkit-box-shadow: 0px 0px 10px #fff;
}
#pg li img {
display: block;
width: 100%;
}
#pg li p {
color: #FFF;
margin: 4px 0 5px 0;
font-size: 12px;
}

Step3. 插入jQuery和脚本包

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
(function($) {
	$.fn.jphotogrid = function(settings, callback) {
		settings = $.extend(true, {
			activeClass: 'active',
			selectedClass: 'selected',
			baseCSS: {},
			selectedCSS: {}
		}, settings);

		var url = settings.flickrbase   settings.feedapi   '?';
		var first = true;

		//Convert floats to absolute
		function toAbsolute(el){
			$(el).children().each(function(){
				var pos = $(this).position();
				$(this).data('ptop',Math.floor(Number(pos.top))   'px');
				$(this).data('pleft',Math.floor(Number(pos.left))   'px');
			}).each(function(){
				placeOriginal(this);
			});
		}

		function placeOriginal(el, animate, callback){
			var dtop = $(el).data('ptop');
			var dleft = $(el).data('pleft');
			var props = $.extend({
				top: dtop,
				left: dleft
			}, settings.baseCSS);
			if(animate){
				$(el).animate(props, 'slow', function(){
					if($.isFunction(callback)) callback();
				});
			}
			else{
				$(el).css($.extend(props, {position: 'absolute'}));
			}
		}

		function hideSelected(callback){
			$container.find('.'   settings.selectedClass).each(function(){
				$(this).removeClass(settings.selectedClass);
				placeOriginal(this, true);
			});
			if($.isFunction(callback)) callback();
		}

		function select(el){
			hideSelected(function(){
				$(el).addClass('selected').removeClass('active');
				$(el).animate(settings.selectedCSS, 'slow');
			});
		}

		for(var key in settings.qstrings){
			if(!first)
				url  = '&';
			url  = key   '='   settings.qstrings[key];
			first = false;
		}

		return $(this).each(function(){
			$container = $(this);
			$(this).css('position','relative');
			toAbsolute(this);

			$(this).children()
				.css('cursor', 'pointer')
				.hover(function(){
					if(!$(this).hasClass(settings.selectedClass))
						$(this).addClass(settings.activeClass);
				},function(){
					$(this).removeClass(settings.activeClass);
				});
			$('.'   settings.activeClass).live('click', function(){
				select(this);
			});
			$('.'   settings.selectedClass).live('click', function(){
				hideSelected();
			});

			$(this).find('div')
				.hover(function(){
					$(this).css('opacity', 0);
				},function(){
					$(this).css('opacity', 0.5);
				})
				.click(function(){
					$(this).css('opacity', 1);
					$li = $(this).parent();
					$li.css("z-index", 99);
					$li.animate({
						top: 0,
						left: 0,
						width: '100%',
						height: '400px'
					}, 'slow');
				});
			});
	}
})(jQuery);

$(document).ready(function(){

	$('#pg').jphotogrid({
		baseCSS: {
			width: '200px',
			height: '104px',
			padding: '0px'
		},
		selectedCSS: {
			top: '50px',
			left: '100px',
			width: '360px',
			height: '187px',
			padding: '20px'
		}
	});

});
4条评论
  1. #1

    wikileaks说道:

    i am a big fan of wikileaks and love it to the core…..

  2. #2

    airoschou说道:

    Thank you for your reomment comment!

  3. #3

    jerichoun说道:

    Great blog!!! A++++

  4. Beneficial info and excellent design you got here! I want to thank you for sharing your ideas and putting the time into the stuff you publish! Great work!




TOP