» » Фотогалерея простая на xml для сайта

Фотогалерея простая на xml для сайта

0 957

Простое слайдшоу на xml

В этом примере, я хочу Вам показать работу простой фотогалереи для сайта на xml, в которм показ слайдов осуществляется так же в автоматическом и ручном режиме с регулируемым временем показа, но без всякой анимации.

Данная фотогалерея состоит из одного java скрипта и xml файла, где в последнем и прописаны все наши картинки, которые по количеству можно добавлять без всяких ограничений. Сразу хочу отметить: показ фотогалереи совсем не возможен в очень старых версиях браузера.

Пример работы - простой фотогалереи на xml

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

Код для html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Простое слайдшоу</title>
<style type="text/css">
h1{font-size:24px;font-weight:bold;color:rgb(50,50,250);}
#contenitore{position:relative; margin:10px auto; width:500px; height:400px; overflow:hidden; border:1px solid; z-index:1;}
#contenitore:hover > #avanti div, #contenitore:hover >  #indietro div{display:block;} 
#box{position:absolute;left:50px;top:0;width:400px;height:400px;z-index:2;}
#box img{width:400px;position:absolute;top:0;z-index:1;}
#avanti{position:absolute;top:0; right:0;width:50px;height:100%;text-align:center; background:white;z-index:3;}
#avanti div{margin:auto;position:absolute;top:0;bottom:0;right:0;left:0;width:0;height:0; border-top:50px solid transparent;border-bottom:50px solid transparent;border-left:50px solid #000;display:none;}
#indietro{position:absolute;top:0;left:0;width:50px;height:100%;text-align:center; background:white; z-index:3;}
#indietro div{
margin:auto;position:absolute;top:0;bottom:0;right:0;left:0;width:0;height:0; border-top:50px solid transparent;border-bottom:50px solid transparent;border-right:50px solid#000;display:none;}
</style>
<script type="text/javascript" src="slide.js"></script>
</head>
<body>
<h1>Простой слайшоу</h1>
<div id="contenitore">
	<div id="box"></div>
	<div id="avanti"><div></div></div> 
	<div id="indietro"><div></div></div> 
</div>
<script type="text/javascript">
var slider = new SlideImage('img_Slide.xml','box','avanti','indietro');
slider.slideAutomatico();
slider.fermaAutomatico();
slider.riprendiAutomatico();
</script>
</body>
</html>

Здесь Вы можете подправить под себя высоту и ширину в основном блоке и в блоке непосредственно для слайдов.

В файле img_Slide.xml Вы указываете свои картинки для показа, их размеры и названия.

А чтобы изменить время показа каждого слайда в фотогалерее, Вам необходимо сделать нужные изменения в файле slide.js, который находится так же в архиве.
ВНИМАТЕЛЬНО! - их там 3 блока с кодом по 3 строки.

Изменения время показа слайдов в slide.js
if(newPosizione >= lMax){
    box.style.left = '50px';
    box.style.transition = '500ms ease';        // Здесь меняем время
  }else{
    box.style.left = newPosizione+'px';
    box.style.transition = '500ms ease';        // Здесь меняем время
    box.style.webkitTransition = '500ms ease';  // Здесь меняем время
  }
},false);
// И в посследующих блоках то же самое

Данный скрипт простой фотогалереи для сайта абсолютно не сложный, и я уверен, что у Вас с ним не будет проблем. А если всё-таки что-то будет не понятно, спрашивайте - я постараюсь помочь.

Скачать простую фотогалерею для сайта на xml

Ссылка на файл: prostoe_slide_shou.zip 47

Похожие новости