Эффекты на основе Java Script, jQuery и т.д.

Галерея Highslide создание нескольких колод(галерей) картинок

Caption for the first image. This caption can be styled using CSS. Caption for the second image in the first group. Caption for the third image in the first group.	<-- Кликните для просмотра галереи. Кликните для просмотра галереи.-->	Caption for the first image in the second group. This caption can be styled using CSS. Caption for the second image in the second group. Caption for the third image in the second group.
	Скопируйте и вставте
	Внутри тега <HEAD> - </HEAD>
<script type="text/javascript" src="http://skriptkpbstudio.ucoz.ru/highslide/highslide-with-gallery.js"></script> <link rel="stylesheet" type="text/css" href="http://skriptkpbstudio.ucoz.ru/highslide/highslide.css" /> <script type="text/javascript"> hs.graphicsDir = 'http://skriptkpbstudio.ucoz.ru/highslide/graphics/'; hs.align = 'center'; hs.transitions = ['expand', 'crossfade']; hs.outlineType = 'rounded-white'; hs.fadeInOut = true; hs.numberPosition = 'caption'; hs.dimmingOpacity = 0.75; // затемнение основного содержимого странички // Add the controlbar if (hs.addSlideshow) hs.addSlideshow({ //slideshowGroup: 'group1', interval: 5000, repeat: false, useControls: true, fixedControls: 'fit', overlayOptions: { opacity: .75, position: 'bottom center', hideOnMouseOut: true } }); </script>
Все стили и параметры картинок задаются в CSS таблице, файл highslide.css. А все надписа и параметры всех переменных скрипта и их значения по умолчанию можно посмотреть и, если нужно, изменить в самом скрипте, файл highslide-with-gallery.js. Скрипт очень гибкий и универсальный, поэтому этих переменных достаточно много и я не стал их выносить из тела скрипта все, здесь вынесены только те которые я посчитал нужным. Если Вы хотите что-то изменить в CSS или JS Вам нужно, воспользовавшись функцией [Скачать с сервера], скачать данные файлы и внести необходимые изменения. Подробнее о параметрах и переменных скрипта смотрите Highslide.com
Внутри тега <BODY> - </BODY> там где у Вас будут картинки.
<!-- Первая колода --> <div class="highslide-gallery"> <a id="thumb1" href="http://skriptkpbstudio.ucoz.ru/demo_srt/gal_highslide/images/thumbstrip01.jpg" class="highslide" onclick="return hs.expand(this, { slideshowGroup: 1 } )"> <img src="http://skriptkpbstudio.ucoz.ru/demo_srt/gal_highslide/images/thumbstrip01.thumb.png" alt="Highslide JS" title="Click to enlarge" /></a>Click the thumbnail to open the first gallery. <div class="highslide-caption"> Caption for the first image. This caption can be styled using CSS. </div> <div class="hidden-container"> <a href="http://skriptkpbstudio.ucoz.ru/demo_srt/gal_highslide/images/thumbstrip02.jpg" class="highslide" onclick="return hs.expand(this, { thumbnailId: 'thumb1', slideshowGroup: 1 })"></a> <div class="highslide-caption"> Caption for the second image in the first group. </div> <a href="http://skriptkpbstudio.ucoz.ru/demo_srt/gal_highslide/images/thumbstrip03.jpg" class="highslide" onclick="return hs.expand(this, { thumbnailId: 'thumb1', slideshowGroup: 1 })"></a> <div class="highslide-caption"> Caption for the third image in the first group. </div> </div> </div> <!-- Вторая колода --> <div class="highslide-gallery"> <a id="thumb2" href="http://skriptkpbstudio.ucoz.ru/demo_srt/gal_highslide/images/thumbstrip04.jpg" class="highslide" onclick="return hs.expand(this, { slideshowGroup: 2} )"> <img src="http://skriptkpbstudio.ucoz.ru/demo_srt/gal_highslide/images/thumbstrip04.thumb.png" alt="Highslide JS" title="Click to enlarge" /> </a>Click the thumbnail to open the second gallery. <div class="highslide-caption"> Caption for the first image in the second group. This caption can be styled using CSS. </div> <div class="hidden-container"> <a href="http://skriptkpbstudio.ucoz.ru/demo_srt/gal_highslide/images/thumbstrip05.jpg" class="highslide" onclick="return hs.expand(this, { thumbnailId: 'thumb2', slideshowGroup: 2 })"></a> <div class="highslide-caption"> Caption for the second image in the second group. </div> <a href="http://skriptkpbstudio.ucoz.ru/demo_srt/gal_highslide/images/thumbstrip06.jpg" class="highslide" onclick="return hs.expand(this, { thumbnailId: 'thumb2', slideshowGroup: 2 })"></a> <div class="highslide-caption"> Caption for the third image in the second group. </div> </div> </div>
Здесь, впринципе, вопросов быть не должно. Колличество картинок в колоде на Ваше усмотрение.
И Вы будите использовать скрипт прямо из моей библиотеки не загружая его к себе на страницу. Вы экономите место и время. Если Вы хотите иметь скрипт, чтобы изменять и другие его параметры, воспользуйтесь функцией [Скачать с сервера]. Если Вы не видите этой функции в []- следовательно Вы не зарегистрированы на сайте.Вам надо зарегистрироваться и войти как Пользователь.