Главная » Раздел uCoz » Скрипты и модификации для Ucoz


jQuery Fullscreen Image Gallery

913
10 из 10
Проголосовало: 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><br /> с <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, <br />Все очень просто в Установке и Использованию в Ваших целях. Данная иде была взята с 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>Просто очень красивый горд, мечта любого человека, но только в жизни все не так просто как на фото. <br />И да текста может быть сколько угодно и на каком угодно языке здесь!</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, это его n-й материал
Источник: http://uface.at.ua
Ваше мнение о материале Загрузка
  • Оставить первым комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 25
Скрипты и модификации для Ucoz 2126
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 433
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Гость, авторизуйся и общайся в чате...
Последние комментарии
  • dalamkontak написал:
    • Попробуйте социальную сеть Dalam Kontak !
    Сайт сети: Dkon.app
  • mrnoobsky написал:
    • Это моя работа, которая велась давольно таки давно smile Времени было мало, поэтому я скачал полностью все, что было и сделал архив happy
  • Snoopak написал:
    • 111 мегабайт? wtf? Что в архив напихали?
  • mrnoobsky написал:
    • Левое меню это BLG. Возможны какие-то баги, но в целом все должно работать корректно!
  • geleson2222 написал:
    • ?
    Последние темы
    Опрос
    541
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    		 0
    наших
    		 0
    чужих
    Онлайн всего: 3
    Гостей: 3
    Пользователей: 0
    0
    Сегодня были
    Друзья сайта:
    Связаться с администратором для дружбы! В Вовчик
    Nk-CS.Ru - Лучшие шаблоны для uCoz n na3uTuB4uk94
    Web-мастер системы uCoz R Roman_Domnin
    Связаться с администратором для дружбы! В Вовчик
    Связаться с администратором для дружбы! В Вовчик
    Топ пользователей: