Плавный вывод (показ) изображения

Тема в разделе "Shop-script", создана пользователем A_L_I_E_N, 27 май 2009.

Статус темы:
Закрыта.
Модераторы: kadurinho
  1. A_L_I_E_N

    A_L_I_E_N Постоялец

    Регистр.:
    1 сен 2008
    Сообщения:
    131
    Симпатии:
    59
    {..вроде ничего подобного не нашёл, так небольшие описания, и то - в ветке о ДЛЕ..}
    Итак... "Прикрутил" себе такую фишку, лучше посмотреть.
    Топаем например сюда (НЕ РЕКЛАМА!!) и жмакаем по картинке. Всё просто и приятно глазу..! ;)
    Нравится? Рассказываю что и как... Самое интерестное под хайдом! :p :ay:

    а) Качаем → Посмотреть вложение highslide.rar . Архив распаковать в корень вашего магазина.
    б) Открываем product_detailed.tpl.html, первая строка {* product detailed information view *}
    НИЖЕ вставляем:
    <script type="text/javascript" src="/highslide/highslide.js"></script>
    <link rel="stylesheet" type="text/css" href="/highslide/highslide.css" />
    <script type="text/javascript">
    // override Highslide settings here
    // instead of editing the highslide.js file
    hs.graphicsDir = '/highslide/graphics/';
    </script>

    Таким образом мы (вы) подключаем(-ете) сам скрипт (знающие и без пояснения поняли).
    в) Вот так было в оригинале (ссылка {отсюда} в самом низу хайда:(
    <a href="images/full-image.jpg" class="highslide"
    onclick="return hs.expand(this)">
    <img src="images/thumbnail.jpg" alt="Highslide JS"
    title="Click to enlarge" height="120" width="107" /></a>

    Ниже уже изменённый кусок кода (всё из того же product_detailed.tpl.html:(
    {if $product_info.picture}
    {if $product_info.big_picture}
    {if !$printable_version}<a href="/products_pictures/{$product_info.big_picture}" class="highslide" onclick="return hs.expand(this)">{/if}<img src="/products_pictures/{$product_info.picture}" alt="{$product_info.name}" title="Кликните для увеличения" width="150" /></a>
    {if !$printable_version}<br>
    <table><tr><td></td></tr></table>
    {/if}
    {else}
    <img src="products_pictures/{$product_info.picture}" border=0 alt="{$product_info.name}">
    {/if}
    {else}
    {if $product_info.thumbnail}
    {if $product_info.big_picture}
    {if !$printable_version}<a href="/products_pictures/{$product_info.big_picture}" class="highslide" onclick="return hs.expand(this)">{/if}<img src="/products_pictures/{$product_info.thumbnail}" alt="{$product_info.name}" title="Кликните для увеличения" width="150" /></a>{if !$printable_version}<br>
    <table><tr><td></td></tr></table>
    {/if}
    {else}
    <img border=0 src="products_pictures/{$product_info.thumbnail}" alt="{$product_info.name}">
    {/if}
    {/if}
    {/if}

    Может немного сумбурно, но в целом понятно!
    Всем успехов!
    Кому интересно: взято отсюда
    P.S. Не будет работать если стоит мод ресайзер изображений. Скрипту нужны 2 физических картинки: большая и маленькая.
     
    Ask4morE, Max_Monarch и ndmitry нравится это.
  2. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.140
    Симпатии:
    671
  3. A_L_I_E_N

    A_L_I_E_N Постоялец

    Регистр.:
    1 сен 2008
    Сообщения:
    131
    Симпатии:
    59
    Спасибо за комплимент, но поиском пользоваться умею..!
    Прогулявшись по ссылкам, обнаружил явные различия..
    А посему - будет ещё один вариант, достаточно простой в установке!
     
  4. A_L_I_E_N

    A_L_I_E_N Постоялец

    Регистр.:
    1 сен 2008
    Сообщения:
    131
    Симпатии:
    59
    В самом вопросе уже сокрыт ответ..! ;)
    По сути - заданный вопрос является риторическим! :smmne:
    И ответ прост: простота!
    Всего-то пару кликов мышкой...
    Но! Это уже пошёл флуд....
    Вопросы, желательно, по-существу..
     
  5. vmkvadim

    vmkvadim Постоялец

    Регистр.:
    6 июл 2008
    Сообщения:
    53
    Симпатии:
    4
    как добавить кнопку "закрыть" для всплывающего окна?
    спасибо
     
  6. A_L_I_E_N

    A_L_I_E_N Постоялец

    Регистр.:
    1 сен 2008
    Сообщения:
    131
    Симпатии:
    59
    Просто кликнуть по нему, жмакнуть пробел, либо ← →.
    Можно "поиграться" с настройками:
    <script type="text/javascript" src="/highslide/highslide.js"></script>
    <link rel="stylesheet" type="text/css" href="/highslide/highslide.css" />
    <script type="text/javascript">
    hs.graphicsDir = '/highslide/graphics/';
    hs.align = 'center';
    hs.transitions = ['expand', 'crossfade'];
    hs.outlineType = 'rounded-white';
    hs.wrapperClassName = 'controls-in-heading';
    hs.fadeInOut = true;
    </script>

    Чуток покрасившее будет..
     
  7. Max_Monarch

    Max_Monarch Постоялец

    Регистр.:
    21 ноя 2008
    Сообщения:
    60
    Симпатии:
    9
    По вышей ссылке, посмотрел пример работы, спасибо.
    Также заинтересовало "ОБЛАКО ТЕГОВ" что с правой стороны, где взять как прикрутить?
     
  8. Voshal

    Voshal Мизантроп

    Регистр.:
    30 мар 2009
    Сообщения:
    286
    Симпатии:
    108
    http://www.nulled.ws/showthread.php?t=119668
     
  9. Ask4morE

    Ask4morE Создатель

    Регистр.:
    18 янв 2009
    Сообщения:
    38
    Симпатии:
    1
    A_L_I_E_N, хочу уточнить, как добиться подобного эффекта у облака тегов, делал на локальном хосте, все вышло, но оно не облако, теги в облаке в плане текста вышли слишком большие, не могил бы вы поделиться своим файликом tag_cloud.php. И последнее указывали ли вы, что-либо в цсс?
    Буду очень благодарен за ваш ответ.
     
  10. A_L_I_E_N

    A_L_I_E_N Постоялец

    Регистр.:
    1 сен 2008
    Сообщения:
    131
    Симпатии:
    59
    Всё просто! Так
    Нет.
     
    Ask4morE нравится это.
Статус темы:
Закрыта.