jQuery Fullscreen Image Gallery


jQuery Fullscreen Image Gallery

506
10 из 10
Проголосовало: 4






И так что бы установить "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 2113
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Ох. Вижу, что обсуждение очень старое. Но!
На других CMS так же будет все это реализовано. На нормальных CMS.
Такое решение может подойти лишь для landing сайтов. Но и то, не думаю, что там кто то заморачивается в написании какого либо контроллера генерирования шаблона и используют прямо в лоб чистый HTML, поэтому и будут для каждой страницы свои блоки делать.

Поэтому лучше тут все же дописать решение именно для ucoz без загрузки этих лишних блоков на странице. Ведь используя условные операторы этот код даже не будет прогружаться на странице. (Лол. Это ж доли секунд загрузки...) И что? Но давайте делать оптимальнее
Моё авторство:)
  • 1488 написал:
  • 1488 написал:
  • Смысл исходный код? он возвращает после обновление страницы на то положение которое было... или как?
  • 1488 написал:
  • как поставить галки как скрине?
    а то невозможно поставить...
  • Handyman написал:
  • Не появляется код безопасности для обычных пользователей
    Последние темы
    Опрос
    432
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 5
    Гостей: 5
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: