- Форум владельцев интернет-магазинов
- → Публикации luzikov
Публикации luzikov
242 публикаций создано luzikov (учитываются публикации только с 30-Март 23)
#170324 Что За Чушь ... ?
Отправлено от luzikov в 03 Ноябрь 2014 - 17:58 в Товары
#148859 Что Добавить, Что Удалить?
Отправлено от luzikov в 21 Июль 2014 - 17:03 в Магазины
#149237 Хочу Сделать, Но Не Знаю Как
Отправлено от luzikov в 23 Июль 2014 - 20:11 в Вопросы общие для всех шаблонов
#149222 Хочу Сделать, Но Не Знаю Как
Отправлено от luzikov в 23 Июль 2014 - 19:27 в Вопросы общие для всех шаблонов
Как сделать чтобы кнопка "В корзину" не скакала как сумасшедшая в ленте "с этим товаром часто смотрят" (см скрин)
и еще вопрос, как сделать чтобы вкладка "отзывы о товаре" всегда была открыта на странице товара ?
#149700 Хочу Сделать, Но Не Знаю Как
Отправлено от luzikov в 26 Июль 2014 - 00:33 в Вопросы общие для всех шаблонов
#149215 Хочу Сделать, Но Не Знаю Как
Отправлено от luzikov в 23 Июль 2014 - 18:53 в Вопросы общие для всех шаблонов
#149614 Хочу Сделать, Но Не Знаю Как
Отправлено от luzikov в 25 Июль 2014 - 13:27 в Вопросы общие для всех шаблонов
#150234 Хочу Сделать, Но Не Знаю Как
Отправлено от luzikov в 29 Июль 2014 - 18:24 в Вопросы общие для всех шаблонов
#149257 Хочу Сделать, Но Не Знаю Как
Отправлено от luzikov в 23 Июль 2014 - 22:22 в Вопросы общие для всех шаблонов
MikDark (23 Июль 2014 - 20:47) писал:
{PAGE_CONTENT}
перед ним добавьте:
{% IF PAGE_NAME = Услуги %} <!-- Nyvo слайдер который отображается на главной --> <!-- Обёртка, указывающая стиль темы --> <div class="theme-default" style="padding: 1em; display: none;"> <!-- Непосредственный код слайдера --> <div id="slider"> <img src="http://storeland.ru/img/faq/questions/nyvo_slider/slider.jpg" alt="" /> <a href="/"><img src="http://storeland.ru//img/faq/questions/nyvo_slider/nemo.jpg" alt="" /></a> <img title="Пример картинки с заголовком" src="http://storeland.ru/img/faq/questions/nyvo_slider/toystory.jpg" alt="" /> <img src="http://storeland.ru/img/faq/questions/nyvo_slider/walle.jpg" alt="" /> <img src="http://storeland.ru/img/faq/questions/nyvo_slider/cars.jpg" alt="" /> </div> </div> <!-- Запуск слайдера --> <script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider().parent().show(); }); </script> {% ENDIF %}
Пути к изображениям можете прописать свои.
#149260 Хочу Сделать, Но Не Знаю Как
Отправлено от luzikov в 23 Июль 2014 - 22:40 в Вопросы общие для всех шаблонов
MikDark (23 Июль 2014 - 22:28) писал:
#149346 Хочу Сделать, Но Не Знаю Как
Отправлено от luzikov в 24 Июль 2014 - 12:14 в Вопросы общие для всех шаблонов
Сake (24 Июль 2014 - 00:18) писал:
Markup - это разметка, добавляется в шаблон "HTML" или "Страница". Аналогично как и при nivo slider.
CSS - это стили, добавляются в файл стилей main.css или style.css. Аналогично установке других слайдеров или nivo slider.
Общие стили
*{ margin:0; padding:0; } body { background:#212121; overflow:hidden; font-family:Arial, Helvetica, sans-serif; text-transform:uppercase; color:#fff; font-size:10px; }
добавлять в файл стилей не нужно, так как они повлияют на все отображение.
JAVASCRIPT - код необходимый для размещения в файле main.js. Выполняет работу слайдера.
Используйте пример приведенный на странице. В итоге должно получится - в файл main.js размещается код
$(window) .load(function () { sliderLeft = $('#thumbScroller .container') .position() .left; padding = $('#outer_container') .css('paddingRight') .replace('px', ''); sliderWidth = $(window) .width() - padding; $('#thumbScroller') .css('width', sliderWidth); var totalContent = 0; $('#thumbScroller .content') .each(function () { totalContent += $(this) .innerWidth(); $('#thumbScroller .container') .css('width', totalContent); }); $('#thumbScroller') .mousemove(function (e) { if ($('#thumbScroller .container') .width() > sliderWidth) { var mouseCoords = (e.pageX - this.offsetLeft); var mousePercentX = mouseCoords / sliderWidth; var destX = - (((totalContent - (sliderWidth)) - sliderWidth) * (mousePercentX)); var thePosA = mouseCoords - destX; var thePosB = destX - mouseCoords; var animSpeed = 600; //ease amount var easeType = 'easeOutCirc'; if (mouseCoords == destX) { $('#thumbScroller .container') .stop(); } else if (mouseCoords > destX) { //$('#thumbScroller .container').css('left',-thePosA); //without easing $('#thumbScroller .container') .stop() .animate({ left: - thePosA }, animSpeed, easeType); //with easing } else if (mouseCoords < destX) { //$('#thumbScroller .container').css('left',thePosB); //without easing $('#thumbScroller .container') .stop() .animate({ left: thePosB }, animSpeed, easeType); //with easing } } }); $('#thumbScroller .thumb') .each(function () { $(this) .fadeTo(fadeSpeed, 0.6); }); var fadeSpeed = 200; $('#thumbScroller .thumb') .hover(function () { //mouse over $(this) .fadeTo(fadeSpeed, 1); }, function () { //mouse out $(this) .fadeTo(fadeSpeed, 0.6); } ); }); $(window) .resize(function () { //$('#thumbScroller .container').css('left',sliderLeft); //without easing $('#thumbScroller .container') .stop() .animate({ left: sliderLeft }, 400, 'easeOutCirc'); //with easing $('#thumbScroller') .css('width', $(window) .width() - padding); sliderWidth = $(window) .width() - padding; }); $(function () { //current thumb's index being viewed var current = - 1; //cache some elements var $btn_thumbs = $('#fp_thumbtoggle'); var $loader = $('#fp_loading'); var $btn_next = $('#fp_next'); var $btn_prev = $('#fp_prev'); var $thumbScroller = $('#thumbScroller'); //total number of thumbs var nmb_thumbs = $thumbScroller.find('.content') .length; //preload thumbs var cnt_thumbs = 0; for (var i = 0; i < nmb_thumbs; ++i) { var $thumb = $thumbScroller.find('.content:nth-child(' + parseInt(i + 1) + ')'); $('<img/>') .load(function () { ++cnt_thumbs; if (cnt_thumbs == nmb_thumbs) //display the thumbs on the bottom of the page showThumbs(2000); }) .attr('src', $thumb.find('img') .attr('src')); } //make the document scrollable //when the the mouse is moved up/down //the user will be able to see the full image makeScrollable(); //clicking on a thumb... $thumbScroller.find('.content') .bind('click', function (e) { var $content = $(this); var $elem = $content.find('img'); //keep track of the current clicked thumb //it will be used for the navigation arrows current = $content.index() + 1; //get the positions of the clicked thumb var pos_left = $elem.offset() .left; var pos_top = $elem.offset() .top; //clone the thumb and place //the clone on the top of it var $clone = $elem.clone() .addClass('clone') .css({ 'position': 'fixed', 'left': pos_left + 'px', 'top': pos_top + 'px' }) .insertAfter($('BODY')); var windowW = $(window) .width(); var windowH = $(window) .height(); //animate the clone to the center of the page $clone.stop() .animate({ 'left': windowW / 2 + 'px', 'top': windowH / 2 + 'px', 'margin-left': - $clone.width() / 2 - 5 + 'px', 'margin-top': - $clone.height() / 2 - 5 + 'px' }, 500, function () { var $theClone = $(this); var ratio = $clone.width() / 120; var final_w = 400 * ratio; $loader.show(); //expand the clone when large image is loaded $('<img class="fp_preview"/>') .load(function () { var $newimg = $(this); var $currImage = $('#fp_gallery') .children('img:first'); $newimg.insertBefore($currImage); $loader.hide(); //expand clone $theClone.animate({ 'opacity': 0, 'top': windowH / 2 + 'px', 'left': windowW / 2 + 'px', 'margin-top': '-200px', 'margin-left': - final_w / 2 + 'px', 'width': final_w + 'px', 'height': '400px' }, 1000, function () { $(this) .remove(); }); //now we have two large images on the page //fadeOut the old one so that the new one gets shown $currImage.fadeOut(2000, function () { $(this) .remove(); }); //show the navigation arrows showNav(); }) .attr('src', $elem.attr('alt')); }); //hide the thumbs container hideThumbs(); e.preventDefault(); }); //clicking on the "show thumbs" //displays the thumbs container and hides //the navigation arrows $btn_thumbs.bind('click', function () { showThumbs(500); hideNav(); }); function hideThumbs() { $('#outer_container') .stop() .animate({ 'bottom': '-160px' }, 500); showThumbsBtn(); } function showThumbs(speed) { $('#outer_container') .stop() .animate({ 'bottom': '0px' }, speed); hideThumbsBtn(); } function hideThumbsBtn() { $btn_thumbs.stop() .animate({ 'bottom': '-50px' }, 500); } function showThumbsBtn() { $btn_thumbs.stop() .animate({ 'bottom': '0px' }, 500); } function hideNav() { $btn_next.stop() .animate({ 'right': '-50px' }, 500); $btn_prev.stop() .animate({ 'left': '-50px' }, 500); } function showNav() { $btn_next.stop() .animate({ 'right': '0px' }, 500); $btn_prev.stop() .animate({ 'left': '0px' }, 500); } //events for navigating through the set of images $btn_next.bind('click', showNext); $btn_prev.bind('click', showPrev); //the aim is to load the new image, //place it before the old one and fadeOut the old one //we use the current variable to keep track which //image comes next / before function showNext() { ++current; var $e_next = $thumbScroller.find('.content:nth-child(' + current + ')'); if ($e_next.length == 0) { current = 1; $e_next = $thumbScroller.find('.content:nth-child(' + current + ')'); } $loader.show(); $('<img class="fp_preview"/>') .load(function () { var $newimg = $(this); var $currImage = $('#fp_gallery') .children('img:first'); $newimg.insertBefore($currImage); $loader.hide(); $currImage.fadeOut(2000, function () { $(this) .remove(); }); }) .attr('src', $e_next.find('img') .attr('alt')); } function showPrev() { --current; var $e_next = $thumbScroller.find('.content:nth-child(' + current + ')'); if ($e_next.length == 0) { current = nmb_thumbs; $e_next = $thumbScroller.find('.content:nth-child(' + current + ')'); } $loader.show(); $('<img class="fp_preview"/>') .load(function () { var $newimg = $(this); var $currImage = $('#fp_gallery') .children('img:first'); $newimg.insertBefore($currImage); $loader.hide(); $currImage.fadeOut(2000, function () { $(this) .remove(); }); }) .attr('src', $e_next.find('img') .attr('alt')); } function makeScrollable() { $(document) .bind('mousemove', function (e) { var top = (e.pageY - $(document) .scrollTop() / 2); $(document) .scrollTop(top); }); } });
разметка получит вид
<div id="fp_gallery" class="fp_gallery"> <img src="{ASSETS_IMAGES_PATH}1.jpg" alt="" class="fp_preview" style="display:none;"/> <div class="fp_overlay"></div> <div id="fp_loading" class="fp_loading"></div> <div id="fp_next" class="fp_next"></div> <div id="fp_prev" class="fp_prev"></div> <div id="outer_container"> <div id="thumbScroller"> <div class="container"> <div class="content"> <div><a href="#"><img src="{ASSETS_IMAGES_PATH}t1.jpg" alt="{ASSETS_IMAGES_PATH}1.jpg" class="thumb" /></a></div> </div> <div class="content"> <div><a href="#"><img src="{ASSETS_IMAGES_PATH}t2.jpg" alt="{ASSETS_IMAGES_PATH}2.jpg" class="thumb" /></a></div> </div> <div class="content"> <div><a href="#"><img src="{ASSETS_IMAGES_PATH}t3.jpg" alt="{ASSETS_IMAGES_PATH}3.jpg" class="thumb" /></a></div> </div> <div class="content"> <div><a href="#"><img src="{ASSETS_IMAGES_PATH}t4.jpg" alt="{ASSETS_IMAGES_PATH}4.jpg" class="thumb" /></a></div> </div> <div class="content"> <div><a href="#"><img src="{ASSETS_IMAGES_PATH}t5.jpg" alt="{ASSETS_IMAGES_PATH}5.jpg" class="thumb" /></a></div> </div> </div> </div> </div> <div id="fp_thumbtoggle" class="fp_thumbtoggle">View Thumbs</div> </div>
изображения "{ASSETS_IMAGES_PATH}t5.jpg" это ранее изображения с адресом вида images/thumbs/5.jpg а изображения "{ASSETS_IMAGES_PATH}5.jpg" ато изображения с адресом "images/5.jpg".
Данный слайдер доволно сложен в установке, и нет вероятности что все заработает в первого раза.
1. Мне нужен слайдер только на странице Услуги и только на ней
2. Так же нужно справить ошибки, что бы страница ходуном не ходила.
3. Все ссылки и кнопки не работают на страницах где отображается слайдер, что делать?
Заранее спасибо!
Помогите, это все очень срочно
#149651 Хочу Сделать, Но Не Знаю Как
Отправлено от luzikov в 25 Июль 2014 - 17:03 в Вопросы общие для всех шаблонов
#149407 Хочу Сделать, Но Не Знаю Как
Отправлено от luzikov в 24 Июль 2014 - 15:40 в Вопросы общие для всех шаблонов
#149779 Хочу Сделать, Но Не Знаю Как
Отправлено от luzikov в 26 Июль 2014 - 12:00 в Вопросы общие для всех шаблонов
Сake (26 Июль 2014 - 02:19) писал:
//the navigation arrows $btn_thumbs.bind('click', function () { showThumbs(500); hideNav(); });
и замените его на
//the navigation arrows $btn_thumbs.bind('click', function () { showThumbs(500); $('.fp_preview').hide(); hideNav(); });
Полное закрытие будет происходить при клике по "View Thumbs". Чтобы данный текст отображался корректно - в файл стилей style.css добавьте код
.fp_thumbtoggle { color: #fff; }
#149997 Хочу Сделать, Но Не Знаю Как
Отправлено от luzikov в 28 Июль 2014 - 14:11 в Вопросы общие для всех шаблонов
#149922 Хочу Сделать, Но Не Знаю Как
Отправлено от luzikov в 27 Июль 2014 - 23:53 в Вопросы общие для всех шаблонов
#149506 Хочу Сделать, Но Не Знаю Как
Отправлено от luzikov в 24 Июль 2014 - 22:08 в Вопросы общие для всех шаблонов
#149507 Хочу Сделать, Но Не Знаю Как
Отправлено от luzikov в 24 Июль 2014 - 22:13 в Вопросы общие для всех шаблонов
#150151 Хочу Сделать, Но Не Знаю Как
Отправлено от luzikov в 29 Июль 2014 - 11:43 в Вопросы общие для всех шаблонов
Сake (29 Июль 2014 - 02:45) писал:
sliderLeft = $('#thumbScroller .container').position() .left;
и замените её на
if (!$('#thumbScroller .container').length) return; sliderLeft = $('#thumbScroller .container').position() .left;
Что вы подразумеваете под словом "обычным"? Пожалуйста, опишите ваш вопрос подробнее.
У вас на данный момент на главной странице не отображается блок "Хиты продаж". Пожалуйста, включите отображение данного блока. Для размещения кнопок социальных сетей - в шаблоне "HTML" найдите стоку
{% IF SETTINGS_STORE_ICQ %}<span class="footer_icq">{SETTINGS_STORE_ICQ}</span>{% ENDIF %}
и после неё добавьте код вашего виджета или кнопок.
2)Хиты продаж добавил, посмотрите
3)Мне нужны не виджеты, а просто значки соц сетей, нажав на которые мы сможете переходить по ссылке
#149523 Хочу Сделать, Но Не Знаю Как
Отправлено от luzikov в 24 Июль 2014 - 23:26 в Вопросы общие для всех шаблонов
#150253 Хочу Сделать, Но Не Знаю Как
Отправлено от luzikov в 29 Июль 2014 - 20:01 в Вопросы общие для всех шаблонов
#149608 Хочу Сделать, Но Не Знаю Как
Отправлено от luzikov в 25 Июль 2014 - 12:45 в Вопросы общие для всех шаблонов
И после того как открыли изображение не получается его закрыть..
По остальным все еще нужна помощь! Ребят помогите пожалуйста разобраться с этим слайдером, ни одно, так другое
- Форум владельцев интернет-магазинов
- → Публикации luzikov
- Privacy Policy