highslide в шоп скрипт.

Тема в разделе "Shop-script", создана пользователем Albus_D, 7 дек 2010.

Статус темы:
Закрыта.
  1. Albus_D

    Albus_D Постоялец

    Регистр.:
    20 июл 2010
    Сообщения:
    84
    Симпатии:
    4
    Кто-нибудь прикручивал полноценно highslide к шоп скрипту в продакт детейлд ?
    я сейчас прикрутил так что у меня мидл картинка(которая по умолчанию) увеличиывается с хайслайдом , а остальные - которые маленькие - чтобы их хайслайдом вывести нужно сначала нажать по ним - они станут миддл - снова нажать и тогда уже увеличится с помощью хайслайда.
    а нужно сделать так как в вебасисте - чтобы были стрелочки и можно было стрелочками перемещаться по фоткам товара.
    Если кто решал подобную задачу не на хайслайде , а на чем то другом - можно на другом - поделитесь плз.

    в product_detailed маленькие картинки выводятся так:
    PHP:
    {if $all_product_pictures}

                <
    p>{$smarty.const.ADMIN_PHOTOS}:<br><table cellpadding="3" class="voting">
                {
    section name=i loop=$all_product_pictures}
                    {if 
    $smarty.section.i.index == 0}<tr>{/if}
                    <
    td><a href="index.php?productID={$product_info.productID}&picture_id={$all_product_pictures_id[i]}"><img src="products_pictures/{$all_product_pictures[i]}border="0" alt=""></a></td>
                    {if (
    $smarty.section.i.index+1) % == 0}</tr>{/if}
                {/
    section}
                </
    table>

                {/if}
    собственно здесь и нужно переписать так чтобы каждая маленькая картинка ссылалась не на a
    PHP:
    href="index.php?productID={$product_info.productID}&picture_id={$all_product_pictures_id[i]}">
    а на большую картинку с подключенным к ним хайслайдом... вот чота не соображу как сделать чтобы вела ссылка на большую картинку...
     
  2. A_L_I_E_N

    A_L_I_E_N Постоялец

    Регистр.:
    1 сен 2008
    Сообщения:
    131
    Симпатии:
    59
    В head.tpl.html вставляем (исправляем) такой код:
    PHP:
    <link rel="stylesheet" type="text/css" href="/highslide/highslide.css" />
    <
    script type="text/javascript" src="/highslide/highslide-full.js"></script>
    <script type="text/javascript">{literal}
    hs.addSlideshow({
        // slideshowGroup: 'group1',
        interval: 4000,
        repeat: true,
        useControls: true,
        fixedControls: true,
        overlayOptions: {
            opacity: .6,
            position: 'bottom center',
            hideOnMouseOut: true
        }
    });
    hs.graphicsDir = 'http://ВАШ_САЙТ/highslide/graphics/';
    hs.align = 'center';
    hs.transitions = ['expand', 'crossfade'];
    hs.outlineType = 'rounded-white';
    hs.wrapperClassName = 'dark';
    hs.dimmingOpacity = 0.50;
    hs.fadeInOut = true;{/literal}
    </script>
    В product_detailed.tpl.html вставляем (исправляем) такой код:
    PHP:
    {if $all_product_pictures}
    {
    section name=i loop=$all_product_pictures}
    <
    a href="/products_pictures/{$big_product_pictures[i]}class="highslide" onclick="return hs.expand(this)"><img border=0 src="img.php?file=products_pictures/{$all_product_pictures[i]}alt="{$product_info.name}"></a>
    {/
    section}<br>{/if}
    В product_detailed.php вставляем (исправляем) такой код:
    PHP:
                    if ( isset($_GET["picture_id"]) )
                    {
                        
    $pictures db_query("select photoID, filename, thumbnail, enlarged from ".
                            
    PRODUCT_PICTURES." where photoID!=".(int)$_GET["picture_id"].
                            
    " AND productID=".(string)$productID );
                    }
                    else if ( !
    is_null($a["default_picture"]) )
                    {
                        
    $pictures db_query("select photoID, filename, thumbnail, enlarged from ".
                            
    PRODUCT_PICTURES." where photoID!=".$a["default_picture"].
                            
    " AND productID=".(string)$productID );
                    }
                    else
                    {
                        
    $pictures db_query("select photoID, filename, thumbnail, enlarged from ".
                            
    PRODUCT_PICTURES." where productID=".(string)$productID );
                    }
                    
    $all_product_pictures = array();
                    
    $big_product_pictures = array();
                    
    $all_product_pictures_id = array();
                    while( 
    $picture=db_fetch_row($pictures) )
                    {
                        if ( 
    $picture[2] != "" )
                        {
                            if ( 
    file_exists("./products_pictures/".$picture[2]) )
                            {
                                
    $big_product_pictures[]=$picture[3];
                                
    $all_product_pictures[]=$picture[2];
                                
    $all_product_pictures_id[] = $picture[0];
                            }
                        }
                        else if ( 
    $picture[1] != "" )
                        {
                            if ( 
    file_exists("./products_pictures/".$picture[1]) )
                            {
                                
    $picture[2]='';
                                
    $big_product_pictures[]=$picture[3];
                                
    $all_product_pictures[]=$picture[1];
                                
    $all_product_pictures_id[] = $picture[0];
                            }
                        }
                    }
    Вложения 1) Посмотреть вложение img.rar и 2) Посмотреть вложение highslide.rar закидываем в корень.
    Вложение 1) , 4я строчка:
    -----------------------------------------------------------------
    resizeimg((string)$filename,50,45);
    -----------------------------------------------------------------
    Числа: ширина и высота соответственно.


    Если я ничего не забыл и всё правильно сделали, то должно получиться примерно вот так:
    img1.png img2.png
    Можно листать клавишами "лево" "право", а можно кликая по навигационной панели.

    Живые примеры, как обычно, по ссылке в моём профиле...
     
    Albus_D нравится это.
  3. Panterka07

    Panterka07 Постоялец

    Регистр.:
    20 мар 2009
    Сообщения:
    125
    Симпатии:
    7
    A_L_I_E_N, несколько уточняющих вопросов:
    1)Файл img.rar нужен только для ресайза, т.е если он не нужен, можно его не использовать?
    2)Имеет место быть глюк с кодировкой в скрипте (углядела на ваших живых примерах), нужно добавить UTF-8 или ошибаюсь?
    Код:
    <script type="text/javascript" src="/highslide/highslide-full.js"  [B][COLOR="Red"]charset="utf-8"[/COLOR][/B]></script>
    P.S. сделала всё по вашим рекомендациям, но конечный результ - не работоспособный получился...
    Если 1 фото - вообще никаких изменений, как открывалось в отдельном окне, так и открывается.
    Если имеются доп. фото - то зависает на надписи "Загрузка" и всё. (увеличенное фото 100% имеется..)
    В чем может быть косяк? У вас на сайте все так симпатично отображается...(ну, только кроме Language strings :) )
     
  4. Albus_D

    Albus_D Постоялец

    Регистр.:
    20 июл 2010
    Сообщения:
    84
    Симпатии:
    4
    Пантерка ,

    свой вариант выкладываю:
    качаем highslide , кидаем в корень в папку highslide.

    в head.tpl добавляем:

    PHP:
    <script type="text/javascript"
        
    src="highslide/highslide-full.js"></script>
    {literal}
    <script type="text/javascript">

        hs.allowSizeReduction = false;
        // always use this with flash, else the movie will be stopped on close:
        hs.preserveContent = false;
        // разместите здесь настройки Highslide 
        // вместо редактирования файла highslide.js
        hs.graphicsDir = 'highslide/graphics/';

        if (hs.addSlideshow) hs.addSlideshow({ 
                interval: 5000,                       // интервал смен в милисеках 
                repeat: false,                        // повторять/не повторять 
                useControls: true,                    // использовать ли кнопки навигации? 
                overlayOptions: { 
                        opacity: .6,                  // прозрачность панели навигации 
                        position: 'top center',     // позиция панели навигации 
                        hideOnMouseOut: false          // панель спрячется, если убрать курсор мыши со слайда          
            } 
        }); 
    </script>
    {/literal}

    затем в файле шаблона product_detailed (у меня не осталось шаблона с ихсодным кодом поэтому пишу только НА ЧТО заменить. там легко понять - это все в начале файла и структура не нарушена, просто дописан вывод хайслайда:

    Место где выводится миддл картинка заменить на :

    PHP:
    {if $product_info.picture
    {if 
    $product_info.big_picture
    {if !
    $printable_version}<a id="thumb2" href="products_pictures/{$product_info.big_picture}class="highslide" onClick="return hs.expand
      (this,{literal} {wrapperClassName : 'highslide-white', spaceForCaption: 30,
      outlineType: 'rounded-white', dimmingOpacity: 0.75, captionId: 'caption3'}{/literal})" 
    title="{$product_info.name}"
    {/if} 
    <
    img src="products_pictures/{$product_info.picture}alt="{$product_info.name}title="{$product_info.name} \ {$smarty.const.ENLARGE_PICTURE}"  /> 
    {if !
    $printable_version
    <
    br><font class=average>{$smarty.const.ENLARGE_PICTURE}</font></a>
    место где выводятся маленькие картинки заменяем на :

    PHP:
    {if $all_product_pictures}
                <
    p>{$smarty.const.ADMIN_PHOTOS}:<br><table cellpadding="3">
                {
    section name=i loop=$all_product_pictures}
                    {if 
    $smarty.section.i.index == 0}<tr>{/if}
                    <
    td><a id="thumb2" class="highslide" onClick="return hs.expand(this,{literal} {wrapperClassName : 'highslide-white', spaceForCaption: 30,
      outlineType: 'rounded-white', dimmingOpacity: 0.75, captionId: 'caption3'}{/literal})" 
    href="products_pictures/{$all_product_pictures_big[i]}"><img src="products_pictures/{$all_product_pictures[i]}border=0></a></td>
                    {if (
    $smarty.section.i.index+1) % == 0}</tr>{/if}
                {/
    section}
                </
    table>
                {/if}


    И последнее меняем в includes/ файл product_detailed.php

    Ищем:
    PHP:
    while( $picture=db_fetch_row($pictures) )
                    {
                        if ( 
    $picture[2] != "" )
                        {
                            if ( 
    file_exists("./products_pictures/".$picture[2]) )
                            {
                                
    $all_product_pictures[]=$picture[2];
                                
    $all_product_pictures_id[] = $picture[0];
                            }
                        }
                        else if ( 
    $picture[1] != "" )
                        {
                            if ( 
    file_exists("./products_pictures/".$picture[1]) )
                            {
                                
    $all_product_pictures[]=$picture[1];
                                
    $all_product_pictures_id[] = $picture[0];
                            }
                        }
                    }
    Заменяем на :

    PHP:
    while( $picture=db_fetch_row($pictures) )
                    {
                        if ( 
    $picture[2] != "" )
                        {
                            if ( 
    file_exists("./products_pictures/".$picture[2]) )
                            {
                                
    $all_product_pictures[]=$picture[2];
                                
    $all_product_pictures_big[]=$picture[3];
                                
    $all_product_pictures_id[] = $picture[0];
                            }
                        }
                        else if ( 
    $picture[1] != "" )
                        {
                            if ( 
    file_exists("./products_pictures/".$picture[1]) )
                            {
                                
    $all_product_pictures[]=$picture[1];
                                
    $all_product_pictures_big[]=$picture[3];
                                
    $all_product_pictures_id[] = $picture[0];
                            }
                        }
                    }
    Всё. если нужно могу выслать файл самого хайслайда с русским конфигом , и файл стилей в котором задана навигация в которой есть только вправо влево и закрыть (в типичной сборке там много лишнего - вроде слайдшоу и истинный размер и т.п. )
     
    Panterka07 нравится это.
  5. Panterka07

    Panterka07 Постоялец

    Регистр.:
    20 мар 2009
    Сообщения:
    125
    Симпатии:
    7
    Albus_D, спб, попробую и ваш вариант. я уже правда с "танцами и бубном" прикрутила себе работоспособную конструкцию...но, там действительно много лишнего...киньте, плз, обрезанный вариант навигации, поизучаю.

    P.S. а у вас трабл с кодировкой не наблюдается? у меня если не добавить в строку инициализации скрипта charset="utf-8" - при наведении курсора кракозябры...(при условии русского конфига)
     
  6. Albus_D

    Albus_D Постоялец

    Регистр.:
    20 июл 2010
    Сообщения:
    84
    Симпатии:
    4
    Чтобы в меню было только перемещение вправо, влево и закрыть - замени файл свой цсс на мой. ещё в моём цсс - убрана серая рамочка для изображений.
    ну и незабудь сделать резервную копию своей таблицы стили - малоли расхожения в версиях или ещё чо )
     

    Вложения:

    • highslide.rar
      Размер файла:
      3,7 КБ
      Просмотров:
      14
    Panterka07 нравится это.
  7. Panterka07

    Panterka07 Постоялец

    Регистр.:
    20 мар 2009
    Сообщения:
    125
    Симпатии:
    7
    Да, с этим понятно....я уже изменила навигацию, но убрала тока слайд-шоу, а резайз нужен - оставила...А у тебя плавно происходит смена фото? У меня почему-то наблюдается некое "подергивание" что-ли....и в Опере и в IE оно более явное, нежели в Лисе...пробовала transitionDuration менять, но нет, не то..
    Может конечно уже глаз примелькался и мерещится...
     
Статус темы:
Закрыта.