ps-simpla Опубликовано 16 марта, 2013 Жалоба Поделиться Опубликовано 16 марта, 2013 Подскажите как вывести товар как тут http://demo.smartaddons.com/#sj-vm-extra-sliderи так и сяк пытаюсь не получается. Цитата Ссылка на сообщение Поделиться на другие сайты
ps-simpla Опубликовано 16 марта, 2013 Автор Жалоба Поделиться Опубликовано 16 марта, 2013 За основу взял - слайдер http://ruseller.com/lessons/les1050/final.htmlhttp://s3.hostingkartinok.com/uploads/images/2013/03/9e45437362f1e07c58f53201841c4954.pnghttp://s3.hostingkartinok.com/uploads/images/2013/03/899b004a13ed6fd103fc6d6ccba23173.pngindex.tpl перед head ><style type="text/css"> /** * Slideshow style rules. */ #slideshow { margin:0 auto; } #slideshow #slidesContainer { margin:0 auto; overflow:auto; /* allow scrollbar */ position:relative; } #slideshow #slidesContainer .slide { margin:0 auto; } /** * Slideshow controls style rules. */ #slideshow span.control { display:block; width:39px; height:39px; text-indent:-9999px; border:0; } span#rightControl { background:url(design/{$settings->theme|escape}/image/next.png) right 0 no-repeat; cursor: pointer; position: absolute; right: -20px; top: 548px; } span#leftControl { background:url(design/{$settings->theme|escape}/image/prev.png) right bottom no-repeat; cursor: pointer; position: absolute; left: -50px; top: 548px; } span#leftControl:hover, span#rightControl:hover { background-position:0 0; cursor: pointer; } </style> <script type="text/javascript"> $(document).ready(function(){ var currentPosition = 0; var slideWidth = 932; var slides = $('.slide'); var numberOfSlides = slides.length; // Remove scrollbar in JS $('#slidesContainer').css('overflow', 'hidden'); // Wrap all .slides with #slideInner div slides .wrapAll('<div id="slideInner"></div>') // Float left to display horizontally, readjust .slides width .css({ 'float' : 'left', 'width' : slideWidth }); // Set #slideInner width equal to total width of all slides $('#slideInner').css('width', slideWidth * numberOfSlides); // Insert controls in the DOM $('#slideshow') .prepend('<span class="control" id="leftControl">Назад</span><span class="control" id="rightControl">Вперед</span>'); // Hide left arrow control on first load manageControls(currentPosition); // Create event listeners for .controls clicks $('.control') .bind('click', function(){ // Determine new position currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1; // Hide / show controls manageControls(currentPosition); // Move slideInner using margin-left $('#slideInner').animate({ 'marginLeft' : slideWidth*(-currentPosition) }); }); // manageControls: Hides and Shows controls depending on currentPosition function manageControls(position){ // Hide left arrow if position is first slide if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() } // Hide right arrow if position is last slide if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() } } }); </script>products.tpl{foreach $products as $product} {if $product@first}{/if} {if $product->image} {$product->image->filename|resize:145:145} {/if} {$product->name|escape} {$product->annotation|truncate:300} {if $product->variants|count > 0} {foreach $product->variants as $v} {/foreach} {if $v->compare_price > 0}{$v->compare_price|convert} {$currency->sign|escape}{/if}{$v->price|convert} {$currency->sign|escape} {else} {/if} {if $product@iteration%8 == 0}{if $product@last}{else}{/if}{/if} {/foreach} {else}Товары не найдены{/if} {include file='pagination.tpl'} Цитата Ссылка на сообщение Поделиться на другие сайты
RodgerFox Опубликовано 16 марта, 2013 Жалоба Поделиться Опубликовано 16 марта, 2013 Вот и молодец Цитата Ссылка на сообщение Поделиться на другие сайты
daramal Опубликовано 8 апреля, 2013 Жалоба Поделиться Опубликовано 8 апреля, 2013 а у меня чет не получилось (( Цитата Ссылка на сообщение Поделиться на другие сайты
Psimpla Опубликовано 8 апреля, 2013 Жалоба Поделиться Опубликовано 8 апреля, 2013 что именно? помогу Цитата Ссылка на сообщение Поделиться на другие сайты
nitrol Опубликовано 8 апреля, 2013 Жалоба Поделиться Опубликовано 8 апреля, 2013 я тоже пока разобраться не могу =( Цитата Ссылка на сообщение Поделиться на другие сайты
nitrol Опубликовано 8 апреля, 2013 Жалоба Поделиться Опубликовано 8 апреля, 2013 в продуктс тпл поменял рекомендуемые на {* Рекомендуемые товары *}{get_featured_products var=featured_products}{if $featured_products}<!-- Список товаров--><h1>Рекомендуемые товары</h1><ul class="tiny_products"><div class="product-grid"><div id="slideshow"><div id="slidesContainer"> {foreach $featured_products as $product} <!-- Товар--> <li class="product"> <!-- Фото товара --> {if $product->image} <div class="image"> <a href="products/{$product->url}"><img src="{$product->image->filename|resize:200:200}" alt="{$product->name|escape}"/></a> </div> {/if} <!-- Фото товара (The End) --> <!-- Название товара --> <h3><a data-product="{$product->id}" href="products/{$product->url}">{$product->name|escape}</a></h3> <!-- Название товара (The End) --> {if $product->variants|count > 0} <!-- Выбор варианта товара --> <form class="variants" action="/cart"> <table> {foreach $product->variants as $v} <tr class="variant"> <td> <input id="featured_{$v->id}" name="variant" value="{$v->id}" type="radio" class="variant_radiobutton" {if $v@first}checked{/if} {if $product->variants|count<2}style="display:none;"{/if}/> </td> <td> {if $v->name}<label class="variant_name" for="featured_{$v->id}">{$v->name}</label>{/if} </td> <td> {if $v->compare_price > 0}<span class="compare_price">{$v->compare_price|convert}</span>{/if} <span class="price">{$v->price|convert} <span class="currency">{$currency->sign|escape}</span></span> </td> </tr> {/foreach} </table> <input type="submit" class="button" value="в корзину" data-result-text="добавлено"/> </form> <!-- Выбор варианта товара (The End) --> {else} Нет в наличии {/if} </li> {if $product@iteration%8 == 0}</ul></div>{if $product@last}{else}<div class="slide"><ul class="overview">{/if}{/if} <!-- Товар (The End)--> {/foreach} </div></div></div>{else}Товары не найдены{/if} {include file='pagination.tpl'} </div> </ul>так - не валится сайт, но и не слайдятся слайды. скрипт засунул "под одно крыло" форич в хед к аякс корзинечто не так? и да, цсс залил Цитата Ссылка на сообщение Поделиться на другие сайты
Psimpla Опубликовано 8 апреля, 2013 Жалоба Поделиться Опубликовано 8 апреля, 2013 Попробуйте заменить{* JQuery *} <script src="js/jquery/jquery.js" type="text/javascript"></script>наhttp://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js Цитата Ссылка на сообщение Поделиться на другие сайты
daramal Опубликовано 8 апреля, 2013 Жалоба Поделиться Опубликовано 8 апреля, 2013 я вот сделал на основе: http://kevinbatdorf.github.com/codasliderполучилось. Цитата Ссылка на сообщение Поделиться на другие сайты
nitrol Опубликовано 8 апреля, 2013 Жалоба Поделиться Опубликовано 8 апреля, 2013 можешь поделиться? Цитата Ссылка на сообщение Поделиться на другие сайты
daramal Опубликовано 8 апреля, 2013 Жалоба Поделиться Опубликовано 8 апреля, 2013 В моем случай, я сделал для блока "Рекомендуемые" на главной странице.качаешь архив от сюда: http://kevinbatdorf.github.com/codasliderзаливаешь файлы к себе в шаблон и соединяешь в index.tpl.и там где код Рекомендуемые вставляешь вот это:<div id="recomend"> <h2>Популярные</h2> {* Рекомендуемые товары *} {get_featured_products var=featured_products limit=12} {if $featured_products} <div class="coda-slider" id="slider-id"> <div> <p> <!-- Список товаров--> <ul class="tiny_products1"> {foreach name="fproducts" from=$featured_products item=product} <!-- Товар--> <li class="product"> <!-- Фото товара --> {if $product->image} <div class="image"> {if $product->featured}<div class="hit-main"></div>{/if} <div><a href="products/{$product->url}"><img src="{$product->image->filename|resize:100:100}" alt="{$product->name|escape}"/></a></div> </div> {/if} <!-- Фото товара (The End) --> <!-- Название товара --> <h3><a data-product="{$product->id}" href="products/{$product->url}">{$product->name|escape}</a></h3> <!-- Название товара (The End) --> {if $product->variants|count > 0} <!-- Выбор варианта товара --> <form class="variants" action="/cart"> <table> {foreach $product->variants as $v} <tr class="variant"> <td> <input id="featured_{$v->id}" name="variant" value="{$v->id}" type="radio" class="variant_radiobutton" {if $v@first}checked{/if} {if $product->variants|count<2}style="display:none;"{/if}/> </td> <td> {if $v->name}<label class="variant_name" for="featured_{$v->id}">{$v->name}</label>{/if} </td> <td> {if $v->compare_price > 0}<span class="compare_price">{$v->compare_price|convert}</span>{/if} <span class="price">{$v->price|convert} <span class="currency">{$currency->sign|escape}</span></span> </td> </tr> {/foreach} </table> <div id="addcart"> <div class="colich"><input type=button value="" class="add1" onClick="javascript:this.form.amount.value= this.form.amount.value<=1 ? 1 :parseInt(this.form.amount.value)-1 ;"><input class="add3" type="text" style="width:20px" name="amount" value="1"><input type=button value="" class="add2" onClick="javascript:this.form.amount.value= this.form.amount.value>=100 ? 100 :parseInt(this.form.amount.value)+1 ;"></div><input type="submit" class="addcart" value=" " data-result-text=" "/> </div> </form> <!-- Выбор варианта товара (The End) --> {else} Нет в наличии {/if} </li> <!-- Товар (The End)--> {if $smarty.foreach.fproducts.iteration%3 == 0} </div> {if $smarty.foreach.fproducts.iteration != $featured_products|@count} <div> {/if} {/if} {/foreach} </ul> </p></div>{/if}<div class="all-other"><a href="hits">Посмотреть все...</a></div> </div>Далее, по своему вкусу правишь файл CSS Цитата Ссылка на сообщение Поделиться на другие сайты
nitrol Опубликовано 8 апреля, 2013 Жалоба Поделиться Опубликовано 8 апреля, 2013 http://liquidslider.kevinbatdorf.com/tutorials/responsive-parallax-slider/быть может у кого-то и так получится реализовать? = ) Цитата Ссылка на сообщение Поделиться на другие сайты
nitrol Опубликовано 8 апреля, 2013 Жалоба Поделиться Опубликовано 8 апреля, 2013 спасибо!) Цитата Ссылка на сообщение Поделиться на другие сайты
akosteev Опубликовано 18 апреля, 2013 Жалоба Поделиться Опубликовано 18 апреля, 2013 Не получается, в индекс добавил скрипты, в майн заменил рекомендуемые. Все скривилось Цитата Ссылка на сообщение Поделиться на другие сайты
daramal Опубликовано 18 апреля, 2013 Жалоба Поделиться Опубликовано 18 апреля, 2013 в индекс добавили этот скрипт? <script> $(function(){ /* Here is the slider using default settings */ $('#slider-id').codaSlider(); /* If you want to adjust the settings, you set an option as follows: $('#slider-id').codaSlider({ autoSlide:true, autoHeight:false }); */ }); </script> Цитата Ссылка на сообщение Поделиться на другие сайты
akosteev Опубликовано 18 апреля, 2013 Жалоба Поделиться Опубликовано 18 апреля, 2013 Добавил, все равно не выводит. Цитата Ссылка на сообщение Поделиться на другие сайты
daramal Опубликовано 18 апреля, 2013 Жалоба Поделиться Опубликовано 18 апреля, 2013 а Вы как хотите, что бы отображалось? Цитата Ссылка на сообщение Поделиться на другие сайты
akosteev Опубликовано 18 апреля, 2013 Жалоба Поделиться Опубликовано 18 апреля, 2013 Хочу чтоб товары листались слайдером. Цитата Ссылка на сообщение Поделиться на другие сайты
daramal Опубликовано 18 апреля, 2013 Жалоба Поделиться Опубликовано 18 апреля, 2013 Если Вы хотите, чтобы вот так отображались товары на главной, то я сделал и для "Рекомендуемые", "Новинок" и "Скидки" в этом стиле.Вот, тут все готовое и инструкция внутри: Slider.rar Цитата Ссылка на сообщение Поделиться на другие сайты
akosteev Опубликовано 18 апреля, 2013 Жалоба Поделиться Опубликовано 18 апреля, 2013 Благодарю. Цитата Ссылка на сообщение Поделиться на другие сайты
akosteev Опубликовано 18 апреля, 2013 Жалоба Поделиться Опубликовано 18 апреля, 2013 Сделал все по инструкции, не работает Цитата Ссылка на сообщение Поделиться на другие сайты
daramal Опубликовано 18 апреля, 2013 Жалоба Поделиться Опубликовано 18 апреля, 2013 Сорри, забыл в инструкции добавить .. В <head> добавьте еще вот эти строки: <link rel="stylesheet" type="text/css" media="screen" href="design/{$settings->theme|escape}/css/coda-slider.css"> <link rel="stylesheet" type="text/css" media="screen" href="design/{$settings->theme|escape}/css/coda-slider2.css"> <link rel="stylesheet" type="text/css" media="screen" href="design/{$settings->theme|escape}/css/coda-slider3.css"> Цитата Ссылка на сообщение Поделиться на другие сайты
ilyasimahin Опубликовано 24 июня, 2013 Жалоба Поделиться Опубликовано 24 июня, 2013 Добрый день, кто-нибудь может подсказать как вывести в coda slider 4 изображения.Изображения у меня выводятся так: <div class="production"> <div class="production-block"> <a href="http://сайт/catalog/suhoj-korm_2"><img src="design/{$settings->theme|escape}/images/banners/production/catfood.jpg" title="" alt="Сухие корма для кошек"/></a> </div> <div class="production-block"> <a href="http://сайт/catalog/kletki-dlya-gryzunov"><img src="design/{$settings->theme|escape}/images/banners/production/klgr.jpg" title="" alt="Клетки для грызунов"/></a> </div> <div class="production-block"> <a href="http://сайт/catalog/igrovye-kompleksy-kogtetochki"><img src="design/{$settings->theme|escape}/images/banners/production/igrk.jpg" title="" alt="Игровые комплексы"/></a> </div> <div class="production-block"> <a href="http://сайт/catalog/perenoski"><img src="design/{$settings->theme|escape}/images/banners/production/perenoski.jpg" title="" alt="Переноски"/></a> </div> </div> Залил все файлы coda slider на сервер, обернул код, который выше в <div class="coda-slider" id="slider-id"> </div>Слайдер работает, но выводит по одному изображению, то есть те 4 что у меня есть прокручивает по очереди. А нужно чтобы они крутились по 4 сразу (естественно я добавлю в файл еще изображения) Буду благодарен за любую помощь... Цитата Ссылка на сообщение Поделиться на другие сайты
daramal Опубликовано 24 июня, 2013 Жалоба Поделиться Опубликовано 24 июня, 2013 если Вы скачали то что было до этого, т.е. вот это - Sliderи сделали все по инструкции, что внутри архива, и добавили в index.tpl шаблона в head <link rel="stylesheet" type="text/css" media="screen" href="design/{$settings->theme|escape}/css/coda-slider.css"> <link rel="stylesheet" type="text/css" media="screen" href="design/{$settings->theme|escape}/css/coda-slider2.css"> <link rel="stylesheet" type="text/css" media="screen" href="design/{$settings->theme|escape}/css/coda-slider3.css"> то должно работать. обратите внимание в коде, где будет отображаться слайдер товаров перед {/foreach}, есть момент: <!-- Товар (The End)--> {if $smarty.foreach.fproducts.iteration%3 == 0} </div> {if $smarty.foreach.fproducts.iteration != $featured_products|@count} <div> {/if} {/if} цифра 3 и показывает количество отображаемых товаров. Остальное дело рук CSS, хотя и css-файлы присутствуют. Цитата Ссылка на сообщение Поделиться на другие сайты
ilyasimahin Опубликовано 24 июня, 2013 Жалоба Поделиться Опубликовано 24 июня, 2013 Да, я скачал ваш архив, все работает.Большое спасибо за ответ! Но дело в том что я не для товаров делаю, а для изображений-баннеров. Их у меня 4 помещается по ширине страницы (код выше) и подключены в main.tpl с помощью include, так вот надо чтобы сразу по 4 штуки прокручивались они... Цитата Ссылка на сообщение Поделиться на другие сайты
Рекомендуемые сообщения
Присоединяйтесь к обсуждению
Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.