Старый слайдер необходимо удалить.
Инструкция по установке уже прописана, по ней скачиваем архив по данной ссылке:
http://bayguzin.ru/a...14/08/basic.zip
В редактор шаблонов загружаем следующие файлы:
- camera.css
- jquery.mobile.customized.min.js
- jquery.easing.1.3.js
- camera.min.js
- blank.gif
- camera_skins.png
- camera-loader.gif
далее в шаблон HTML до </head> вставляем:
<link rel='stylesheet' id='camera-css' href='{ASSETS_STYLES_PATH}camera.css' type='text/css' media='all'>
<script type='text/javascript' src='{ASSETS_JS_PATH}jquery.mobile.customized.min.js'></script>
<script type='text/javascript' src='{ASSETS_JS_PATH}jquery.easing.1.3.js'></script>
<script type='text/javascript' src='{ASSETS_JS_PATH}camera.min.js'></script>
В шаблоне HTML за место старой структуры слайдера:
<div id="slideshow" class="wrap">
<div id="slider">
<!-- Slides Container -->
<div u="slides" class="slides_container">
<div>
<img u="image" src="{ASSETS_IMAGES_PATH}slide1.png?design=azure" />
</div>
<div>
<img u="image" src="{ASSETS_IMAGES_PATH}slide2.png?design=azure" />
</div>
<div>
<img u="image" src="{ASSETS_IMAGES_PATH}slide3.png?design=azure" />
</div>
<div>
<img u="image" src="{ASSETS_IMAGES_PATH}slide4.png?design=azure" />
</div>
<div>
<img u="image" src="{ASSETS_IMAGES_PATH}slide5.png?design=azure" />
</div>
</div>
</div>
</div>
вставляем:
<div class="fluid_container">
<p>Pagination circles with the height relative to the width</p>
<div class="camera_wrap camera_azure_skin" id="camera_wrap_1">
<div data-thumb="../images/slides/thumbs/bridge.jpg" data-src="../images/slides/bridge.jpg">
<div class="camera_caption fadeFromBottom">
Camera is a responsive/adaptive slideshow. <em>Try to resize the browser window</em>
</div>
</div>
<div data-thumb="../images/slides/thumbs/leaf.jpg" data-src="../images/slides/leaf.jpg">
<div class="camera_caption fadeFromBottom">
It uses a light version of jQuery mobile, <em>navigate the slides by swiping with your fingers</em>
</div>
</div>
<div data-thumb="../images/slides/thumbs/road.jpg" data-src="../images/slides/road.jpg">
<div class="camera_caption fadeFromBottom">
<em>It's completely free</em> (even if a donation is appreciated)
</div>
</div>
<div data-thumb="../images/slides/thumbs/sea.jpg" data-src="../images/slides/sea.jpg">
<div class="camera_caption fadeFromBottom">
Camera slideshow provides many options <em>to customize your project</em> as more as possible
</div>
</div>
<div data-thumb="../images/slides/thumbs/shelter.jpg" data-src="../images/slides/shelter.jpg">
<div class="camera_caption fadeFromBottom">
It supports captions, HTML elements and videos and <em>it's validated in HTML5</em>
</div>
</div>
<div data-thumb="../images/slides/thumbs/tree.jpg" data-src="../images/slides/tree.jpg">
<div class="camera_caption fadeFromBottom">
Different color skins and layouts available, <em>fullscreen ready too</em>
</div>
</div>
</div><!-- #camera_wrap_1 -->
</div><!-- .fluid_container -->
<script>
jQuery(function(){
jQuery('#camera_wrap_1').camera({
thumbnails: true
});
});
</script>
в коде выше необходимо заменить адреса картинок
../images/slides/thumbs/leaf.jpg
на свои
и в файле camera.css необходимо все пути стиля background
../images/
заменить на ссылки картинок, загруженных у вас в редакторе шаблонов
1
Cupuyc (27 Май 2015 - 08:49) писал:
