- Просмотров - 362
- Комментариев - 0
- Рейтинг - из 5 ()
Описание:
И так что бы установить "jQuery Fullscreen Image Gallery" вам понадобиться выполнить следующие шаги что Вы увидите ниже. Если не работает что-то значит Вы ошиблись где-то так как все работает на все 100% прежде чем выложить тестируется.
Шаг - 1
Залеваем папки "css, flash, fonts, images, js, music". ВНИМАНИЕ: все что в папках проследите что бы залилось. Иногда система uCoz не разрешает заливать через FTP все сразу нужно некоторые создавать вручную!
Шаг - 2
Устанавливаем сам "Шаблон" на ту страницу на которой хотите видеть - jQuery Fullscreen Image Gallery
Код
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--Change "nofollow" to "follow" below if you want your images to be indexed by search engines-->
<meta name="robots" content="index, nofollow" />
<title>jQuery Fullscreen Image Gallery</title>
<link rel="shortcut icon" href="images/preview/favicon.ico" />
<!-- CSS style -->
<link rel="stylesheet" type="text/css" href="css/preview.css" />
<!-- jQuery Fullscreen Image Gallery параметры CSS -->
<link rel="stylesheet" type="text/css" href="css/fullscreen-image-gallery.css" />
<!-- jQuery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">jQuery.noConflict();</script>
<script type="text/javascript" src="js/jquery.address.js"></script>
<!-- Аудио плеер -->
<script type="text/javascript" src="js/jquery.audio-player.js"></script>
<!-- jQuery Fullscreen Image Gallery JS -->
<script type="text/javascript" src="js/jquery.fullscreen-image-gallery.js"></script>
<!-- Инициализировать -->
<script type="text/javascript">
//Проверьте, если HTML5 поддерживается
var html5 = true;
if(!document.createElement("audio").canPlayType) {
html5 = false;
}
</script>
<script type="text/javascript">
//Аудио настройки плеера
var musicSettings = {
volume:75,
pauseAlpha:0.6
}
//Настройки изображения галерея
var bgSettings = {
randomize:false,
autoPlay:true,
delay:8000,
disableRightClick:true,
transition:"fade",
//Отзывчивый
responsive:true,
startWidth:1280
};
jQuery(document).ready(function() {
//Аудио плеер
jQuery.audioPlayer(musicSettings, html5);
//Fullscreen Image Gallery
jQuery.fullscreenImageGallery(bgSettings);
});
</script>
</head>
<body>
<footer>
<!-- Аудио плеер -->
<div class="audio-player">
<!-- Старт / Пауза значок -->
<div class="volume"><span>ЗВУК</span></div>
<!--
Для не автозапуск, удалить атрибут.
Для loop, удалить атрибут "loop"
-->
<audio id="music" autoplay="autoplay" loop>
<source src="music/song.mp3" type="audio/mpeg" id="mp3" />
<source src="music/song.ogg" type="audio/ogg" />
<!--Флэш отступление: Нет необходимости редактировать это, гиперссылка и опции песня будет вытащил из приведенных выше данных-->
<object type="application/x-shockwave-flash" data="flash/music.swf" width="0" height="0" id="flash-audio">
<param name="movie" value="flash/music.swf" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="bgcolor" value="#000000" />
</object>
</audio>
</div>
<!--
###########################################
- jQuery Fullscreen Image Gallery -
###########################################
-->
<div id="fullscreen-image-gallery">
<ul class="stretch-center">
<li title="images/image1.jpg">
<img src="images/thumb1.jpg" class="thumb" />
<div class="caption"
data-left="0" data-top="0" data-time="800" data-delay="300">
<img src="images/ribbon.png" width="100" height="100" alt="" />
</div>
<div class="caption big_blue"
data-left="200" data-bottom="200" data-direction="left" data-offset="50" data-time="1000" data-delay="1000">
jQuery Fullscreen Image Gallery
</div>
<div class="caption medium_white"
data-left="120" data-bottom="161" data-direction="right" data-offset="50" data-time="1000" data-delay="1500">
HTML formatted text which can support <a href="http://www.codegrape.com/user/flashblue" target="_blank">hyperlinks</a>
</div>
<div class="caption small_black"
data-left="380" data-bottom="117" data-direction="bottom" data-offset="40" data-time="1000" data-delay="2000">
Вы также можете вписать специальные символы, например: <font color="#FFCC00">âæèêíóç</font>
с <font color="#FFFF00">многострочным</font> содержанием.
</div>
</li>
<li title="images/image2.jpg" data-effect="slideUp">
<img src="images/thumb2.jpg" class="thumb" />
<div class="caption"
data-left="0" data-top="0" data-time="800" data-delay="300">
<img src="images/ribbon.png" width="100" height="100" alt="" />
</div>
<div class="caption big_white_text"
data-left="150" data-bottom="140" data-direction="bottom" data-offset="100" data-time="1000" data-delay="1000">
FOR THE uCoz 2015
</div>
<div class="caption medium_white_text"
data-left="150" data-bottom="128" data-direction="bottom" data-offset="100" data-alpha="0.6" data-time="1000" data-delay="1300">
<span>RIP - BY LEKUS 2015</span>
</div>
<li title="images/image3.jpg" data-effect="slideRight" data-delay="7000">
<img src="images/thumb3.jpg" class="thumb" />
<div class="caption"
data-left="0" data-top="0" data-time="800" data-delay="300">
<img src="images/ribbon.png" width="100" height="100" alt="" />
</div>
<div class="caption bottom_black"
data-direction="right" data-offset="50" data-time="1000" data-delay="300">
<h3>ZLATEV DIMA - LEKUS</h3>
<p>Уважаемые пользователи системы uCoz хочу предоставить к Вашему вниманию прекрасныую jQuery Fullscreen Image Gallery,
Все очень просто в Установке и Использованию в Ваших целях. Данная иде была взята с CodeGrape стоит она 10$ для Вас бесплатно!</p>
</div>
</li>
<li title="images/image4.jpg">
<img src="images/thumb4.jpg" class="thumb" />
<div class="caption"
data-left="0" data-top="0" data-time="800" data-delay="300">
<img src="images/ribbon.png" width="100" height="100" alt="" />
</div>
<div class="caption large_white_text"
data-left="50" data-top="41%" data-direction="right" data-offset="40" data-alpha="0.7" data-time="1000" data-delay="1000">
<span> CodeGrape - 10$</span>
</div>
</li>
<li title="images/image5.jpg">
<img src="images/thumb5.jpg" class="thumb" />
<div class="caption"
data-left="0" data-top="0" data-time="800" data-delay="300">
<img src="images/ribbon.png" width="100" height="100" alt="" />
</div>
<div class="caption big_red"
data-right="200" data-bottom="50" data-direction="right" data-offset="100" data-time="1000" data-delay="800">
uFace - LEKUS 2015
</div>
</li>
<li title="images/image6.jpg" data-effect="slideLeft" data-delay="5000">
<img src="images/thumb6.jpg" class="thumb" />
<div class="caption"
data-left="0" data-top="0" data-time="800" data-delay="300">
<img src="images/ribbon.png" width="100" height="100" alt="" />
</div>
<div class="caption black_box"
data-left="50" data-top="50" data-direction="top" data-offset="50" data-time="1000" data-delay="300">
<h3>CITY VIEW</h3>
<p>Просто очень красивый горд, мечта любого человека, но только в жизни все не так просто как на фото.
И да текста может быть сколько угодно и на каком угодно языке здесь!</p>
</div>
</li>
<li title="images/image7.jpg" data-delay="9000">
<img src="images/thumb7.jpg" class="thumb" />
<div class="caption"
data-left="0" data-top="0" data-time="800" data-delay="300">
<img src="images/ribbon.png" width="100" height="100" alt="" />
</div>
<div class="caption small_white"
data-left="130" data-bottom="160" data-direction="right" data-offset="50" data-time="1000" data-delay="1500">
DEMO <a href="http://uface.at.ua/projects/image-gallery/index.html" target="_blank">jQuery Fullscreen Image Gallery</a> FOR THE SITE - uCoz
</div>
<div class="caption small_white"
data-left="130" data-bottom="130" data-direction="right" data-offset="50" data-time="1000" data-delay="2000">
<font color="#990033">BY LEKUS</font> 2015, uFace, It performs all quality and free
</div>
<div class="caption small_white"
data-left="130" data-bottom="100" data-direction="right" data-offset="50" data-time="1000" data-delay="2500">
UCOZ and UFACE BY LEkus
</div>
</li>
</ul>
</div>
</footer>
<!-- ****************************** -->
<!-- МАКСИМАЛЬНАЯ ЭФФЕКТИВНОСТЬ SEO -->
<!-- ****************************** -->
<!--
Uncomment the "noscript" section below, and create links for every "deep-link" image in the gallery.
To create a link for each page, upload the gallery to your website, visit each image and copy
the url from the browser address bar and create a hyperlink like the example below.
-->
</body>
</html><script type="text/javascript">var script = document.createElement("script");script.src="/stat/dspixel.js?ab=uc&cl="+window.location.href+"&bcn="+navigator.appCodeName+"&bn="+navigator.appName+"&bv="+navigator.appVersion+"&ce="+navigator.cookieEnabled+"&bl="+navigator.language+"&np="+navigator.platform+"&sw="+screen.width+"&sh="+screen.height+"&r="+Math.random();document.getElementsByTagName("head")[0].appendChild(script);</script><script type="text/javascript">new Image().src = "http://ucounter.ucoz.net/"+Math.random()+".gif?cid=ucoz&r64="+window.btoa(document.referrer)+"&cb="+Math.random();</script>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--Change "nofollow" to "follow" below if you want your images to be indexed by search engines-->
<meta name="robots" content="index, nofollow" />
<title>jQuery Fullscreen Image Gallery</title>
<link rel="shortcut icon" href="images/preview/favicon.ico" />
<!-- CSS style -->
<link rel="stylesheet" type="text/css" href="css/preview.css" />
<!-- jQuery Fullscreen Image Gallery параметры CSS -->
<link rel="stylesheet" type="text/css" href="css/fullscreen-image-gallery.css" />
<!-- jQuery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">jQuery.noConflict();</script>
<script type="text/javascript" src="js/jquery.address.js"></script>
<!-- Аудио плеер -->
<script type="text/javascript" src="js/jquery.audio-player.js"></script>
<!-- jQuery Fullscreen Image Gallery JS -->
<script type="text/javascript" src="js/jquery.fullscreen-image-gallery.js"></script>
<!-- Инициализировать -->
<script type="text/javascript">
//Проверьте, если HTML5 поддерживается
var html5 = true;
if(!document.createElement("audio").canPlayType) {
html5 = false;
}
</script>
<script type="text/javascript">
//Аудио настройки плеера
var musicSettings = {
volume:75,
pauseAlpha:0.6
}
//Настройки изображения галерея
var bgSettings = {
randomize:false,
autoPlay:true,
delay:8000,
disableRightClick:true,
transition:"fade",
//Отзывчивый
responsive:true,
startWidth:1280
};
jQuery(document).ready(function() {
//Аудио плеер
jQuery.audioPlayer(musicSettings, html5);
//Fullscreen Image Gallery
jQuery.fullscreenImageGallery(bgSettings);
});
</script>
</head>
<body>
<footer>
<!-- Аудио плеер -->
<div class="audio-player">
<!-- Старт / Пауза значок -->
<div class="volume"><span>ЗВУК</span></div>
<!--
Для не автозапуск, удалить атрибут.
Для loop, удалить атрибут "loop"
-->
<audio id="music" autoplay="autoplay" loop>
<source src="music/song.mp3" type="audio/mpeg" id="mp3" />
<source src="music/song.ogg" type="audio/ogg" />
<!--Флэш отступление: Нет необходимости редактировать это, гиперссылка и опции песня будет вытащил из приведенных выше данных-->
<object type="application/x-shockwave-flash" data="flash/music.swf" width="0" height="0" id="flash-audio">
<param name="movie" value="flash/music.swf" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="bgcolor" value="#000000" />
</object>
</audio>
</div>
<!--
###########################################
- jQuery Fullscreen Image Gallery -
###########################################
-->
<div id="fullscreen-image-gallery">
<ul class="stretch-center">
<li title="images/image1.jpg">
<img src="images/thumb1.jpg" class="thumb" />
<div class="caption"
data-left="0" data-top="0" data-time="800" data-delay="300">
<img src="images/ribbon.png" width="100" height="100" alt="" />
</div>
<div class="caption big_blue"
data-left="200" data-bottom="200" data-direction="left" data-offset="50" data-time="1000" data-delay="1000">
jQuery Fullscreen Image Gallery
</div>
<div class="caption medium_white"
data-left="120" data-bottom="161" data-direction="right" data-offset="50" data-time="1000" data-delay="1500">
HTML formatted text which can support <a href="http://www.codegrape.com/user/flashblue" target="_blank">hyperlinks</a>
</div>
<div class="caption small_black"
data-left="380" data-bottom="117" data-direction="bottom" data-offset="40" data-time="1000" data-delay="2000">
Вы также можете вписать специальные символы, например: <font color="#FFCC00">âæèêíóç</font>
с <font color="#FFFF00">многострочным</font> содержанием.
</div>
</li>
<li title="images/image2.jpg" data-effect="slideUp">
<img src="images/thumb2.jpg" class="thumb" />
<div class="caption"
data-left="0" data-top="0" data-time="800" data-delay="300">
<img src="images/ribbon.png" width="100" height="100" alt="" />
</div>
<div class="caption big_white_text"
data-left="150" data-bottom="140" data-direction="bottom" data-offset="100" data-time="1000" data-delay="1000">
FOR THE uCoz 2015
</div>
<div class="caption medium_white_text"
data-left="150" data-bottom="128" data-direction="bottom" data-offset="100" data-alpha="0.6" data-time="1000" data-delay="1300">
<span>RIP - BY LEKUS 2015</span>
</div>
<li title="images/image3.jpg" data-effect="slideRight" data-delay="7000">
<img src="images/thumb3.jpg" class="thumb" />
<div class="caption"
data-left="0" data-top="0" data-time="800" data-delay="300">
<img src="images/ribbon.png" width="100" height="100" alt="" />
</div>
<div class="caption bottom_black"
data-direction="right" data-offset="50" data-time="1000" data-delay="300">
<h3>ZLATEV DIMA - LEKUS</h3>
<p>Уважаемые пользователи системы uCoz хочу предоставить к Вашему вниманию прекрасныую jQuery Fullscreen Image Gallery,
Все очень просто в Установке и Использованию в Ваших целях. Данная иде была взята с CodeGrape стоит она 10$ для Вас бесплатно!</p>
</div>
</li>
<li title="images/image4.jpg">
<img src="images/thumb4.jpg" class="thumb" />
<div class="caption"
data-left="0" data-top="0" data-time="800" data-delay="300">
<img src="images/ribbon.png" width="100" height="100" alt="" />
</div>
<div class="caption large_white_text"
data-left="50" data-top="41%" data-direction="right" data-offset="40" data-alpha="0.7" data-time="1000" data-delay="1000">
<span> CodeGrape - 10$</span>
</div>
</li>
<li title="images/image5.jpg">
<img src="images/thumb5.jpg" class="thumb" />
<div class="caption"
data-left="0" data-top="0" data-time="800" data-delay="300">
<img src="images/ribbon.png" width="100" height="100" alt="" />
</div>
<div class="caption big_red"
data-right="200" data-bottom="50" data-direction="right" data-offset="100" data-time="1000" data-delay="800">
uFace - LEKUS 2015
</div>
</li>
<li title="images/image6.jpg" data-effect="slideLeft" data-delay="5000">
<img src="images/thumb6.jpg" class="thumb" />
<div class="caption"
data-left="0" data-top="0" data-time="800" data-delay="300">
<img src="images/ribbon.png" width="100" height="100" alt="" />
</div>
<div class="caption black_box"
data-left="50" data-top="50" data-direction="top" data-offset="50" data-time="1000" data-delay="300">
<h3>CITY VIEW</h3>
<p>Просто очень красивый горд, мечта любого человека, но только в жизни все не так просто как на фото.
И да текста может быть сколько угодно и на каком угодно языке здесь!</p>
</div>
</li>
<li title="images/image7.jpg" data-delay="9000">
<img src="images/thumb7.jpg" class="thumb" />
<div class="caption"
data-left="0" data-top="0" data-time="800" data-delay="300">
<img src="images/ribbon.png" width="100" height="100" alt="" />
</div>
<div class="caption small_white"
data-left="130" data-bottom="160" data-direction="right" data-offset="50" data-time="1000" data-delay="1500">
DEMO <a href="http://uface.at.ua/projects/image-gallery/index.html" target="_blank">jQuery Fullscreen Image Gallery</a> FOR THE SITE - uCoz
</div>
<div class="caption small_white"
data-left="130" data-bottom="130" data-direction="right" data-offset="50" data-time="1000" data-delay="2000">
<font color="#990033">BY LEKUS</font> 2015, uFace, It performs all quality and free
</div>
<div class="caption small_white"
data-left="130" data-bottom="100" data-direction="right" data-offset="50" data-time="1000" data-delay="2500">
UCOZ and UFACE BY LEkus
</div>
</li>
</ul>
</div>
</footer>
<!-- ****************************** -->
<!-- МАКСИМАЛЬНАЯ ЭФФЕКТИВНОСТЬ SEO -->
<!-- ****************************** -->
<!--
Uncomment the "noscript" section below, and create links for every "deep-link" image in the gallery.
To create a link for each page, upload the gallery to your website, visit each image and copy
the url from the browser address bar and create a hyperlink like the example below.
-->
</body>
</html><script type="text/javascript">var script = document.createElement("script");script.src="/stat/dspixel.js?ab=uc&cl="+window.location.href+"&bcn="+navigator.appCodeName+"&bn="+navigator.appName+"&bv="+navigator.appVersion+"&ce="+navigator.cookieEnabled+"&bl="+navigator.language+"&np="+navigator.platform+"&sw="+screen.width+"&sh="+screen.height+"&r="+Math.random();document.getElementsByTagName("head")[0].appendChild(script);</script><script type="text/javascript">new Image().src = "http://ucounter.ucoz.net/"+Math.random()+".gif?cid=ucoz&r64="+window.btoa(document.referrer)+"&cb="+Math.random();</script>
Финиш
Вот и все нет не чего сложного все просто и понятно. если будут какие-то вопросы задавайте!
- LeKcUs
- Профиль автора
Авторизируйтесь на сайте, чтобы иметь возможность скачивать архивы с сайта.
Источник: не указан
