Главная » Файлы » Прочие скрипты » jQuery

Замечательный слайдер ENVISIONED SLIDER для uCoz
24.06.14, 09:02:25

Скачать файл




И так, что же такое Envisioned Slider?

Envisioned Slider - это чудесный слайдер, созданный как каталог изображений. В данный слайдер можно вставить как изображения, так и видео фильмы. Также Envisioned Slider позволяет просмотреть изображение в своем натуральном виде, всего лишь в один клик.

Для начала просмотрим ДЕМО

Установка:

Перед
Код
<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen" />  
  <link media="screen" type="text/css" href="/js/jquery.fancybox-1.3.4.css" rel="stylesheet" />  
  <link media="screen" type="text/css" href="/js/page_templates.css" rel="stylesheet" /><link rel='stylesheet' id='et-shortcodes-css-css' href='/js/et_shortcodes_frontend.js' type='text/css' media='all' />  
  <link rel='stylesheet' id='wp-pagenavi-css' href='/js/shortcodes.css' type='text/css' media='all' />


Туда куда нужно вставить сам слайдер:
Код
<div id="featured">  
<div class="container">  
<div class="slide active">  
<img src="http://elegantthemes.com/preview/DeepFocus/wp-content/uploads/2010/09/2-500x335.jpg" alt='Make A Wish' width='500' height='335' /> <div class="description"><h2>Make A Wish</h2></div>  

<div class="additional">  
<a class="prevslide" href="#">Previous</a>  

<a class="nextslide" href="#">Next</a>  
<a class="featured-zoom fancybox" href="http://elegantthemes.com/preview/DeepFocus/wp-content/uploads/2010/09/2.jpg" rel="featured" title="Make A Wish">Zoom In</a>  
<a class="featured-more" href="http://www.elegantthemes.com/preview/Envisioned/2010/09/15/make-a-wish/">Read More</a>  
</div> <!-- end .additional -->  
</div> <!-- end .slide -->  
<div class="slide">  

<img src="http://elegantthemes.com/preview/DeepFocus/wp-content/uploads/2010/09/3-500x335.jpg" alt='The Morning Dew' width='500' height='335' /> <div class="description"><h2>The Morning Dew</h2></div>  

<div class="additional">  
<a class="prevslide" href="#">Previous</a>  
<a class="nextslide" href="#">Next</a>  
<a class="featured-zoom fancybox" href="http://elegantthemes.com/preview/DeepFocus/wp-content/uploads/2010/09/3.jpg" rel="featured" title="The Morning Dew">Zoom In</a>  
<a class="featured-more" href="http://www.elegantthemes.com/preview/Envisioned/2010/09/15/the-morning-dew/">Read More</a>  

</div> <!-- end .additional -->  
</div> <!-- end .slide -->  
<div class="slide">  
<img src="http://www.elegantthemes.com/preview/DeepFocus/wp-content/uploads/2010/09/feat-2-500x335.png" alt='Purple Haze' width='500' height='335' /> <div class="description"><h2>Purple Haze</h2></div>  

<div class="additional">  
<a class="prevslide" href="#">Previous</a>  

<a class="nextslide" href="#">Next</a>  
<a class="featured-zoom et_video_lightbox" href="http://www.youtube.com/watch?v=kkGeOWYOFoA" title="Purple Haze">Zoom In</a>  
<a class="featured-more" href="http://www.elegantthemes.com/preview/Envisioned/2010/09/15/purple-haze/">Read More</a>  
</div> <!-- end .additional -->  
</div> <!-- end .slide -->  
<div class="slide">  

<img src="http://www.elegantthemes.com/preview/DeepFocus/wp-content/uploads/2010/09/feat-1-500x335.png" alt='Bridge To Nowhere' width='500' height='335' /> <div class="description"><h2>Bridge To Nowhere</h2></div>  

<div class="additional">  
<a class="prevslide" href="#">Previous</a>  
<a class="nextslide" href="#">Next</a>  
<a class="featured-zoom fancybox" href="http://elegantthemes.com/preview/DeepFocus/wp-content/uploads/2010/09/5.jpg" rel="featured" title="Bridge To Nowhere">Zoom In</a>  
<a class="featured-more" href="http://www.elegantthemes.com/preview/Envisioned/2010/09/15/bridge-to-nowhere/">Read More</a>  

</div> <!-- end .additional -->  
</div> <!-- end .slide -->  
<div class="slide">  
<img src="http://elegantthemes.com/preview/DeepFocus/wp-content/uploads/2010/09/6-500x335.jpg" alt='The Lonely Ladybug' width='500' height='335' /> <div class="description"><h2>The Lonely Ladybug</h2></div>  

<div class="additional">  
<a class="prevslide" href="#">Previous</a>  

<a class="nextslide" href="#">Next</a>  
<a class="featured-zoom fancybox" href="http://elegantthemes.com/preview/DeepFocus/wp-content/uploads/2010/09/6.jpg" rel="featured" title="The Lonely Ladybug">Zoom In</a>  
<a class="featured-more" href="http://www.elegantthemes.com/preview/Envisioned/2010/09/15/the-lonely-ladybug/">Read More</a>  
</div> <!-- end .additional -->  
</div> <!-- end .slide -->  
<div class="slide">  

<img src="http://elegantthemes.com/preview/DeepFocus/wp-content/uploads/2010/09/7-500x335.jpg" alt='Monkeys Take a Bath' width='500' height='335' /> <div class="description"><h2>Monkeys Take a Bath</h2></div>  

<div class="additional">  
<a class="prevslide" href="#">Previous</a>  
<a class="nextslide" href="#">Next</a>  
<a class="featured-zoom et_video_lightbox" href="http://www.youtube.com/watch?v=KXdUNp_9oHs" title="Monkeys Take a Bath">Zoom In</a>  
<a class="featured-more" href="http://www.elegantthemes.com/preview/Envisioned/2010/09/15/moneys-take-a-bath/">Read More</a>  

</div> <!-- end .additional -->  
</div> <!-- end .slide -->  
<div class="slide">  
<img src="http://elegantthemes.com/preview/DeepFocus/wp-content/uploads/2010/09/8-500x335.jpg" alt='Birds of Beauty' width='500' height='335' /> <div class="description"><h2>Birds of Beauty</h2></div>  

<div class="additional">  
<a class="prevslide" href="#">Previous</a>  

<a class="nextslide" href="#">Next</a>  
<a class="featured-zoom fancybox" href="http://elegantthemes.com/preview/DeepFocus/wp-content/uploads/2010/09/8.jpg" rel="featured" title="Birds of Beauty">Zoom In</a>  
<a class="featured-more" href="http://www.elegantthemes.com/preview/Envisioned/2010/09/15/birds-of-beauty/">Read More</a>  
</div> <!-- end .additional -->  
</div> <!-- end .slide -->  
<div class="slide">  

<img src="http://www.elegantthemes.com/preview/DeepFocus/wp-content/uploads/2010/09/feat-3-500x335.png" alt='Summer Wheat' width='500' height='335' /> <div class="description"><h2>Summer Wheat</h2></div>  

<div class="additional">  
<a class="prevslide" href="#">Previous</a>  
<a class="nextslide" href="#">Next</a>  
<a class="featured-zoom fancybox" href="http://www.elegantthemes.com/preview/Envisioned//preview/DeepFocus/wp-content/uploads/2010/09/1.jpg" rel="featured" title="Summer Wheat">Zoom In</a>  
<a class="featured-more" href="http://www.elegantthemes.com/preview/Envisioned/2010/09/15/summer-wheat/">Read More</a>  

</div> <!-- end .additional -->  
</div> <!-- end .slide -->  
<div class="slide">  
<img src="http://elegantthemes.com/preview/DeepFocus/wp-content/uploads/2010/09/shutterstock_5055934-500x335.jpg" alt='Calm Before The Storm' width='500' height='335' /> <div class="description"><h2>Calm Before The Storm</h2></div>  

<div class="additional">  
<a class="prevslide" href="#">Previous</a>  

<a class="nextslide" href="#">Next</a>  
<a class="featured-zoom et_video_lightbox" href="http://www.youtube.com/watch?v=KXdUNp_9oHs" title="Calm Before The Storm">Zoom In</a>  
<a class="featured-more" href="http://www.elegantthemes.com/preview/Envisioned/2010/09/15/calm-before-the-storm/">Read More</a>  
</div> <!-- end .additional -->  
</div> <!-- end .slide -->  
<div class="slide">  

<img src="http://elegantthemes.com/preview/DeepFocus/wp-content/uploads/2010/09/shutterstock_20951311-500x335.jpg" alt='Bamboo Shoots' width='500' height='335' /> <div class="description"><h2>Bamboo Shoots</h2></div>  

<div class="additional">  
<a class="prevslide" href="#">Previous</a>  
<a class="nextslide" href="#">Next</a>  
<a class="featured-zoom fancybox" href="http://elegantthemes.com/preview/DeepFocus/wp-content/uploads/2010/09/shutterstock_20951311.jpg" rel="featured" title="Bamboo Shoots">Zoom In</a>  
<a class="featured-more" href="http://www.elegantthemes.com/preview/Envisioned/2010/09/15/bamboo-shoots/">Read More</a>  

</div> <!-- end .additional -->  
</div> <!-- end .slide -->  
<div class="slide">  
<img src="http://elegantthemes.com/preview/DeepFocus/wp-content/uploads/2010/09/shutterstock_31519705-500x335.jpg" alt='Bridge Over The River' width='500' height='335' /> <div class="description"><h2>Bridge Over The River</h2></div>  

<div class="additional">  
<a class="prevslide" href="#">Previous</a>  

<a class="nextslide" href="#">Next</a>  
<a class="featured-zoom fancybox" href="http://elegantthemes.com/preview/DeepFocus/wp-content/uploads/2010/09/shutterstock_31519705.jpg" rel="featured" title="Bridge Over The River">Zoom In</a>  
<a class="featured-more" href="http://www.elegantthemes.com/preview/Envisioned/2010/09/15/bridge-over-the-river/">Read More</a>  
</div> <!-- end .additional -->  
</div> <!-- end .slide -->  
</div> <!-- end .container -->  

<div id="slider-left-overlay"></div>  
<div id="slider-right-overlay"></div>  
  </div> <!-- end #featured -->
</div> <!-- end #bottom-light -->  
</div> <!-- end #top-content -->  
</div> <!-- end #top-wrapper -->  
</div> <!-- end #top -->


Ну, и на конец:

перед
Код
<a href="http://mvcreative.ru">MVCreative.ru</a> by <a href="http://4itodrom.ru">Fear1911</a> $POWERED_BY$  
  <script type='text/javascript' src='/js/l10n.js'></script>  
  <script type='text/javascript' src='/js/jquery123.js'></script>  
  <script type='text/javascript' src='/js/et_shortcodes_frontend.js'></script>  
  <script type="text/javascript">  
document.documentElement.className = 'js';  
  </script>  

  <script src="http://www.elegantthemes.com/preview/Envisioned/wp-content/themes/Envisioned/js/cufon-yui.js" type="text/javascript"></script>  
  <script src="http://www.elegantthemes.com/preview/Envisioned/wp-content/themes/Envisioned/js/Colaborate-Thin_400.font.js" type="text/javascript"></script>  
  <script type="text/javascript" src="http://www.elegantthemes.com/preview/Envisioned/wp-content/themes/Envisioned/js/jquery.easing.1.3.js"></script>
  <script type="text/javascript" src="http://www.elegantthemes.com/preview/Envisioned/wp-content/themes/Envisioned/js/superfish.js"></script>  

  <script type="text/javascript" src="http://www.elegantthemes.com/preview/Envisioned/wp-content/themes/Envisioned/js/custom.js"></script> <script type='text/javascript' src='http://www.elegantthemes.com/preview/Envisioned/wp-content/themes/Envisioned/epanel/page_templates/js/fancybox/jquery.easing-1.3.pack.js?ver=1.3.4'></script>  
  <script type='text/javascript' src='http://www.elegantthemes.com/preview/Envisioned/wp-content/themes/Envisioned/epanel/page_templates/js/fancybox/jquery.fancybox-1.3.4.pack.js?ver=1.3.4'></script>  
  <script type='text/javascript' src='http://www.elegantthemes.com/preview/Envisioned/wp-content/themes/Envisioned/epanel/page_templates/js/et-ptemplates-frontend.js?ver=1.1'></script>  

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");  
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));  
  </script>
  <script type="text/javascript">
var pageTracker = _gat._getTracker("UA-5205247-2");  
pageTracker._trackPageview();  
  </script>


P.S. картинки изменяйте на свои.

Категория: jQuery | Добавил: Apocalypse | Теги: замечательный, ucoz, Slider, для, ENVISIONED, слайдер
Просмотров: 288 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: