Замена виарт слайдера на jCarousel

[MilkeyWay]

И снова всем ку!
Решил заменить виарт.слайдер,виартовский вроде свою задачу выполняет,но он менее функционален,а в некоторых моментах даже неудобен...по-этому мой выбор пал на jCarousel() Т.к виарт позволяет настроить страницу,как душе угодно-грех этим не воспользоваться,в моем случае-индивидуальные настройки для категорий,приступим:

1.Добавляем блок "Слайдер" в категорию(в моем случае-индивидуальная настройка для определённой категории)настройки слайдера: Горизонт.лево,по умолчанию.Скачиваем скрипт,по вышеуказанной ссылке,создаем папку jcarousel в корне сайта,извлекаем файлы в эту папку

2.Т.к новый скрипт работает только со списками(ul,ol)переделаем его на div,открываем файл jquery.carousel.js(или мини,в зависимости от того какой юзать будете)например,в notepad++ и через поиск находим все ul/li,и заменяем их на div,честно говоря,есть небольшие сомнения в этих изменениях...но все работает так же,как и со списками

3.Если в дальнейшем вы планируете использовать виарт.слайдер,то вам нужно создать файл(templates/user/xxx.html),поместить содержимое(см.ниже) в этот файл и указать его в качестве шаблона в блоке "Слайдер",в моем случае(не буду использовать в дальнейшем виартовский) открываем файл block_sliders.html,удаляем все из него и вставляем это содержимое:

<script type="text/javascript" src="/jcarousel/lib/jquery.jcarousel.js"></script>
<link rel="stylesheet" href="/jcarousel/skins/tango/skin.css" type="text/css"/>
<script type="text/javascript">
function mycarousel_initCallback(carousel)
{

    // Disable autoscrolling if the user clicks the prev or next button.
    carousel.buttonNext.hover(function() {
        carousel.stopAuto();
		carousel.buttonPrev.css('display', 'block');
		carousel.buttonNext.css('display', 'block');
    });

    carousel.buttonPrev.hover(function() {
        carousel.stopAuto();
		carousel.buttonPrev.css('display', 'block');
		carousel.buttonNext.css('display', 'block');
    });

    // Pause autoscrolling if the user moves with the cursor over the clip.
    carousel.clip.hover(function() {
        carousel.stopAuto();
		carousel.buttonPrev.css('display', 'block');
		carousel.buttonNext.css('display', 'block');
    }, function() {
		carousel.buttonPrev.css('display', 'none');
		carousel.buttonNext.css('display', 'none');
        carousel.startAuto();
    });
};
jQuery(document).ready(function() {
   jQuery('#mycarousel').jcarousel({
	scroll: 1,
     auto: 5,
	 wrap: "circular",
	 initCallback: mycarousel_initCallback
   });
});
</script>
<div class="block-sliders {block_class}">
<form name="block" action=""><input type="hidden" name="pb_id" value="{pb_id}" /><input type="hidden" name="slider_type" value="{slider_type}" /></form>


				<!-- begin data -->
				<div class="Data" id="{data_id}" style="{data_style}">
<!-- begin rows -->
				<div id="mycarousel" class="jcarousel-skin-tango"><!-- BEGIN cols -->
					<div><!-- begin slider_image -->
						<a href="{slider_link}"><img border="0" src="{src}" alt="" /></a><!-- end slider_image -->
						<div class="slide_description">
						<div class="slide_name">{item_name}</div><div class="slide_price">{price}<span class="rub">руб</span></div>
						<div class="slide_short_desc">{slider_html}</div>
						</div>
					</div><!-- END cols -->
				</div><!-- end rows -->
				</div>
				<!-- end data -->




</div>

3.Открываем файл block_sliders.php,если не будете использовать виарт.слайдер,то удаляем строку №8

set_script_tag("js/slider.js");

по какой-то неизвестной причине,в блоке ранее не было вывода названия,по-этому надо добавить в этот файл несколько строк,так же мы добавим вывод цены,не буду расписывать что именно в какую строку нужно добавить,т.к они могут быть разные у всех,по-этому проанализируйте изменения сами,просто найдите кусок и замените его,в моем случае,это начиная со строки 72 по 118

$sql  = " SELECT s.item_id, s.item_name, s.slider_image, s.slider_link, s.slider_html, s.item_order, sp.price ";
    $sql .= " FROM (" . $table_prefix . "sliders_items s";
    $sql .= " LEFT JOIN " . $table_prefix . "items sp ON s.item_name=sp.item_name) ";
    $sql .= " WHERE slider_id=" . $db->tosql($block_id, INTEGER);
    $sql .= " AND show_for_user=1 ";
    $sql .= " ORDER BY item_order ";
    
    $db->query($sql);
    while ($db->next_record()) {
        $row++;
        $item_name = $db->f("item_name");
        $slider_html = $db->f("slider_html");
        $slider_image = $db->f("slider_image");
        $slider_link = $db->f("slider_link");
        $price = $db->f("price");
        if (!strlen($slider_link)) { 
            $slider_link = "#";
        }

        if ($slider_type != 5) {
            $t->set_var("data_id", "data_".$pb_id);
        } else if ($slider_type == 5) {
            $t->set_var("data_id", "data_".$pb_id."_".$row);
            if ($row == 1) {
                $t->set_var("data_style", "display: block; ");
            } else {
                $t->set_var("data_style", "display: none; ");
            }
        }

        if ($slider_image) {
            if (preg_match("/^http\:\/\//", $slider_image)) {
                $image_size = "";
            } else {
                $image_size = @GetImageSize($slider_image);
            }
            $t->set_var("src", htmlspecialchars($slider_image));
            if(is_array($image_size)) {
                $t->set_var("width", "width=\"" . $image_size[0] . "\"");
                $t->set_var("height", "height=\"" . $image_size[1] . "\"");
            } else {
                $t->set_var("width", "");
                $t->set_var("height", "");
            }
            $t->set_var("item_name", $item_name);
            $t->set_var("price", round($price)); 

Важно:Чтобы в дальнейшем все правильно работало,когда будете добавлять в слайдер товары,нужно указывать Название товара,которое у вас реально есть в базе,т.е Название в слайдере == Название товара существующего в базе,в противном случае слайдер будет торчить и скорее всего не только слайдер,если хотите избежать этой заморочки,придется выводить без цены,тогда используйте этот кусок:

    $sql  = " SELECT item_id, item_name, slider_image, slider_link, slider_html, item_order ";
    $sql .= " FROM " . $table_prefix . "sliders_items ";
    $sql .= " WHERE slider_id=" . $db->tosql($block_id, INTEGER);
    $sql .= " AND show_for_user=1 ";
    $sql .= " ORDER BY item_order ";
    
    $db->query($sql);
    while ($db->next_record()) {
        $row++;
        $item_name = $db->f("item_name");
        $slider_html = $db->f("slider_html");
        $slider_image = $db->f("slider_image");
        $slider_link = $db->f("slider_link");
        if (!strlen($slider_link)) { 
            $slider_link = "#";
        }

        if ($slider_type != 5) {
            $t->set_var("data_id", "data_".$pb_id);
        } else if ($slider_type == 5) {
            $t->set_var("data_id", "data_".$pb_id."_".$row);
            if ($row == 1) {
                $t->set_var("data_style", "display: block; ");
            } else {
                $t->set_var("data_style", "display: none; ");
            }
        }

        if ($slider_image) {
            if (preg_match("/^http\:\/\//", $slider_image)) {
                $image_size = "";
            } else {
                $image_size = @GetImageSize($slider_image);
            }
            $t->set_var("src", htmlspecialchars($slider_image));
            if(is_array($image_size)) {
                $t->set_var("width", "width=\"" . $image_size[0] . "\"");
                $t->set_var("height", "height=\"" . $image_size[1] . "\"");
            } else {
                $t->set_var("width", "");
                $t->set_var("height", "");
            }
            $t->set_var("item_name", $item_name); 

4.Остается настроить внешний вид,для этого вам надо изменить skin.css,который находится в /jcarousel/skins/tango/

Что получилось:

Скрытый текст (вы должны войти под своим логином или зарегистрироваться и иметь 10 сообщение(ий)):

У вас нет прав чтобы видеть скрытый текст, содержащийся здесь.

Скрытый текст (вы должны войти под своим логином или зарегистрироваться и иметь 250 сообщение(ий)):

У вас нет прав чтобы видеть скрытый текст, содержащийся здесь.

зы если ничего не забыл должно все заводится

[oldmanager]

Буду первый, кому интересно узнать

[newshop]

Всегда полезно. Присоединяюсь.

[Georg]

Третий как всегда

[moromer]

Как думаете...
Фотографии отзывов на Jcarousel есть смысл делать?

[oldmanager]

Т.е. сначала делать скрины отзывов, а потом вручную вставлять их в карусель? Если отзывов немного, то думаю, что не навредит. Но если их количство измеряется десятками, то слишком долго. Да и для SEO лучше текст - поисковики с картинок не читают

[moromer]

Т.е. сначала делать скрины отзывов, а потом вручную вставлять их в карусель? Если отзывов немного, то думаю, что не навредит. Но если их количство измеряется десятками, то слишком долго. Да и для SEO лучше текст - поисковики с картинок не читают

Решил сделать отзывы в виде статей в соответствующей категории сайта. Отстенографировал сам текст отзыва, а для убедительности приложил скан. Так с т.з. SEO приятнее будет, да и портфолио пополнится реализованными проектами.
Хотя признаюсь, сначала была мысль именно фотографии отзывов пустить по кругу как в Карусель. Потом отказался от этой мысли - отнимет много времени, а пользы от нее, кроме красоты - никакой. Вот если новый шаблон проектировать - тогда да, есть смысл.

[Aglok]

Я так понял это на версию 3.6.

[oldmanager]

Я так понял это на версию 3.6.

Насколько я знаю, ТС использует Viart Shop v.4.08 RE

[Aglok]

Страно, сделал всё как описано! Товары вытянулись вертикально, и все товары просто замерли и выходят за рамки слайдера!

[MilkeyWay]

Страно, сделал всё как описано! Товары вытянулись вертикально, и все товары просто замерли и выходят за рамки слайдера!

хм,у меня до сих пор все работает,мб дело в css,есть где глянуть?

[Aglok]

Вот два товара вывожу в сладер! Показывает только один, второй внизу неподвижно стоит!

[MilkeyWay]

Aglok,странно,я насчитал 6 товаров в слайдере,по картинке сложно судить,больше склоняюсь к неправильным настройкам слайдера и css


сюда вписывать настройки:

jQuery(document).ready(function() {
   jQuery('#mycarousel').jcarousel({
	scroll: 1,
     auto: 5,
	 wrap: "circular",
	 initCallback: mycarousel_initCallback
   });
});

зы ща заметил,что если вывод без цены,нужно удалить из хтмл:

<div class="slide_price">{price}<span class="rub">руб</span></div>

[Aglok]

Там не 6 товаров, а а один он почему-то дублируется! А второй товар вообще из слайда вышел внизу статично!

[Aglok]

Решил опять вернуться к салайдеру! Почему то у меня прокручивается только один элемент хотя, в настройках прописал 3!