ГлавнаяСкрипты java и phpФотогалерея на xml

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

Простое слайдшоу на 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

Рейтинг: 3.6/5     Оценили: 5

Похожие публикации

Комментарии к статье 0