Иной вариант просмотра изображений

byearnist · November 25, 2010

Не нашел на форуме обсуждения такого варианта просмотра изображений: крупное изображение и несколько маленьких под ним. При нажатии на маленькое изображение оно отображается на месте крупного изображения. Пример реализован здесь: http://cars.auto.ru/cars/used/sale/7839008-ec21.html

Попробовал покопаться в коде странице, но он настолько навороченный (для меня), что разобраться до конца не смог даже с помощью Dreamweaver-a. К тому же, освоение CSS начал не так давно (если тут дело вообще в CSS).

Может кто подскажет, что необходимо для реализации подобного просмотра изображений?

Great Rash · November 25, 2010

Google (30 секунд)

byearnist · November 25, 2010

Значит, это все-таки не CSS.

Хорошо, когда знаешь как задать поисковой вопрос. Я какой-то сайт по jQuery открывал, но там такого варианта не было.

Спасибо за подсказку, пойду изучать эту зверюгу.

byearnist · December 11, 2010

Не освоил.

Попытался сладить с 33-м образцом, но обычное копирование кода результата не принесло, т.к. явно у меня что-то недокопировано. При нажатии на мелкую фотографию ее оригинал не появляется в главном окне, а открывается в новой странице. Да и размещение всех фотографий произошло не в ряд, а в столбец.

Скачивание архива с программой вообще создало головную боль. Что из этого архива нужно (и нужно ли) загнать во внутренности сайта? Разъяснение на английском и не достаточно доскональное.

Если вдруг у кого-то возникнет желание помочь: страничка расположена здесь

deadrash · December 11, 2010

А что за плагин скачал покажи.

byearnist · December 11, 2010

Прошу прощения, закачивал страницу уже полусонный на старый сайт и не проверил даже кодировку. Сейчас подправлю и сам плагин выложу.

Скопировал и постарался переделать под себя вот эту страницу:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>Galleria Demo 1</title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta http-equiv="imagetoolbar" content="false">
	<meta name="description" content="">
	<meta name="keywords" content="">
	<link href="galleria.css" rel="stylesheet" type="text/css" media="screen">
	<script type="text/javascript" src="/media/js/jquery.js"></script>

	<script type="text/javascript" src="jquery.galleria.pack.js"></script>
	<script type="text/javascript">

	jQuery(function($) {

		$('.gallery_demo_unstyled').addClass('gallery_demo'); // adds new class name to maintain degradability

		$('ul.gallery_demo').galleria({
			history   : true, // activates the history object for bookmarking, back-button etc.
			clickNext : true, // helper for making the image clickable
			insert	: '#main_image', // the containing selector for our main image
			onImage   : function(image,caption,thumb) { // let's add some image effects for demonstration purposes

				// fade in the image & caption
				if(! ($.browser.mozilla && navigator.appVersion.indexOf("Win")!=-1) ) { // FF/Win fades large images terribly slow
					image.css('display','none').fadeIn(1000);
				}
				caption.css('display','none').fadeIn(1000);

				// fetch the thumbnail container
				var _li = thumb.parents('li');

				// fade out inactive thumbnail
				_li.siblings().children('img.selected').fadeTo(500,0.3);

				// fade in active thumbnail
				thumb.fadeTo('fast',1).addClass('selected');

				// add a title for the clickable image
				image.attr('title','Next image >>');
			},
			onThumb : function(thumb) { // thumbnail effects goes here

				// fetch the thumbnail container
				var _li = thumb.parents('li');

				// if thumbnail is active, fade all the way.
				var _fadeTo = _li.is('.active') ? '1' : '0.3';

				// fade in the thumbnail when finnished loading
				thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);

				// hover effects
				thumb.hover(
					function() { thumb.fadeTo('fast',1); },
					function() { _li.not('.active').children('img').fadeTo('fast',0.3); } // don't fade out if the parent is active
				)
			}
		});
	});

	</script>
	<style media="screen,projection" type="text/css">

	/* BEGIN DEMO STYLE */
	*{margin:0;padding:0}
	body{padding:20px;background:white;text-align:center;background:black;color:#bba;font:80%/140% georgia,serif;}
	h1,h2{font:bold 80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}
	a{color:#348;text-decoration:none;outline:none;}
	a:hover{color:#67a;}
	.caption{font-style:italic;color:#887;}
	.demo{position:relative;margin-top:2em;}
	.gallery_demo{width:702px;margin:0 auto;}
	.gallery_demo li{width:68px;height:50px;border:3px double #111;margin: 0 2px;background:#000;}
	.gallery_demo li div{left:240px}
	.gallery_demo li div .caption{font:italic 0.7em/1.4 georgia,serif;}

	#main_image{margin:0 auto 60px auto;height:438px;width:700px;background:black;}
	#main_image img{margin-bottom:10px;}

	.nav{padding-top:15px;clear:both;font:80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}

	.info{text-align:left;width:700px;margin:30px auto;border-top:1px dotted #221;padding-top:30px;}
	.info p{margin-top:1.6em;}

	</style>

</head>
<body>
<h1>Galleria Demo 01</h1>
<div class="demo">
<div id="main_image"></div>
<ul class="gallery_demo_unstyled">

	<li><img src="img/flowing-rock.jpg" alt="Flowing Rock" title="Flowing Rock Caption"></li>
	<li><img src="img/stones.jpg" alt="Stones" title="Stones - from Apple images"></li>
	<li class="active"><img src="img/grass-blades.jpg" alt="Grass Blades" title="Apple nature desktop images"></li>
	<li><img src="img/ladybug.jpg" alt="Ladybug" title="Ut rutrum, lectus eu pulvinar elementum, lacus urna vestibulum ipsum"></li>
	<li><img src="img/lightning.jpg" alt="Lightning" title="Black & White"></li>
	<li><img src="img/lotus.jpg" alt="Lotus" title="Fusce quam mi, sagittis nec, adipiscing at, sodales quis"></li>
	<li><img src="img/mojave.jpg" alt="Mojave" title="Suspendisse volutpat posuere dui. Suspendisse sit amet lorem et risus faucibus pellentesque."></li>
	<li><img src="img/pier.jpg" alt="Pier" title="Proin erat nisi"></li>
	<li><img src="img/sea-mist.jpg" alt="Sea Mist" title="Caption text from title"></li>

</ul>
<p class="nav"><a href="#" onclick="$.galleria.prev(); return false;">« previous</a> | <a href="#" onclick="$.galleria.next(); return false;">next »</a></p>
</div>
<div class="info">
<h2>Information</h2>
<p>This demonstration shows you aome more advanced effects you can accomplish with the Galleria plugin. The history object is also active, so feel free to try the back button in your browser and bookmark a page. The next and previous links are simple to create since the galleria object has two public functions for traversing the images in your list.</p>
<p>This gallery was created from a simple unordered list with images - thumbnails and functionality is all in the Galleria plugin. Viewing this page without javascript or CSS enabled with degrade it into a list of full-size images.</p>
<p>Visit the galleria project: <a href="http://galleria.googlecode.com">http://galleria.googlecode.com</a></p>

<p class="footer"><a href="/lab/galleria/">Galleria home page</a> | <a href="http://monc.se">Made by monc</a></p>
</body>
</html>

Понимаю, что со времен изучения мною обычного HTML прогресс не стоял на месте и просто копирование исходного кода не дает информацию об отдельных CSS-файлах, например galleria.css (а может и о еще чем-нибудь), относящихся к данной странице, старался догадаться, чего же не хватает в моей странице, по сравнению с оригиналом, но...

То, что боковые панели не встали на место меня сейчас не интересует, главное скрипт фотографий оживить.

Edited December 11, 2010 by byearnist

deadrash · December 11, 2010

Ну логично что вам нужно скачать и подключить всё что подключено в head секции.

	<link href="galleria.css" rel="stylesheet" type="text/css" media="screen">
	<script type="text/javascript" src="/media/js/jquery.js"></script>

	<script type="text/javascript" src="jquery.galleria.pack.js"></script>

т.е. galleria.css jquery.js и jquery.galleria.pack.js

Sign In

Иной вариант просмотра изображений

Question

byearnist

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

Great Rash

Link to comment

Share on other sites

byearnist

Link to comment

Share on other sites

byearnist

Link to comment

Share on other sites

deadrash

Link to comment

Share on other sites

byearnist

Link to comment

Share on other sites

deadrash

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information