tim21701

[How-To] Эффект перелистывания страниц. (Отгибающийся уголок)

Рекомендуемые сообщения

tim21701    497

Наверное, многие видели такую рекламу; в углу страницы - загнутый уголок, подводишь к нему курсор - и он отгибается, открывая пространство с информацией...
Сделаем тоже самое в нашем магазине.

Пример

ИзображениеИзображение
Зарание, прошу прощения у администрации сайта за использования в качастве примера Символики/Логотипа...

1). Открываем файл catalog/view/theme/ВАША ТЕМА/template/common/header.tpl и перед закрывающимся тегом </head> вставляем код:
 

<script type="text/javascript">$(document).ready(function(){$("#pageflip").hover(function() {$("#pageflip img , .msg_block").stop().animate({width: '307px',height: '319px'}, 500);} , function() {$("#pageflip img").stop().animate({width: '50px',height: '52px'}, 220);$(".msg_block").stop().animate({width: '50px',height: '50px'}, 200);});});</script>

2). Далее (в этом же файле), после тега <body> вставляем этот код:


<div id="pageflip"><a href="http://myopencart.ru/download.php"><img src="catalog/view/theme/ВАША_ТЕМА/image/page_flip.png" alt="" /><span class="msg_block">Скачать русский OpenCart</span></a></div>

3). Затем, открываем файл со стилями нашей темы catalog/view/theme/ВАША ТЕМА/stylesheet/stylesheet.css и в самом конце добавляем три блока:


#pageflip {position: absolute;top: 0px;right: 0px;}#pageflip img {width: 50px; height: 52px;z-index: 99;position: absolute;top: 0px;right: 0px;-ms-interpolation-mode: bicubic;}#pageflip .msg_block {width: 50px; height: 50px;position: absolute;z-index: 50;top: 0px;right: 0px;background: url('../image/download.png') no-repeat right top;text-indent: -9999px;}

4). Теперь нам надо скопировать в папку catalog/view/theme/ВАША ТЕМА/image два png файла: (ссылка ниже) download.png и page_flip.png.

Всё. Изображение

P.S.
Убедительная просьба отписаться у кого браузеры Mozilla, Safari, Netscape, Google Chrome и прочие, на проверку совместимости.

Работает в IE6.0 и Opera 11.01.

Архив: image.zip

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
gdi31    5

P.S.

Убедительная просьба отписаться у кого браузеры Mozilla, Safari, Netscape, Google Chrome и прочие, на проверку совместимости.

Работает в IE6.0 и Opera 11.01.

В Google Chrome 7.0.517.44, IE8.0, Firefox/3.6.15 - всё отлично!

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
akanext    0

firefox 4.0 все работает корректно! СПС

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
fantasm    55

с меня +...отлично все работает...)) только напишите лучше что надо изменит default на ваша_тема в

<div id="pageflip">
  <a href="https://myopencart.com/download.php">
    <img src="catalog/view/theme/default/image/page_flip.png" alt="" />
   <span class="msg_block">Download Russian OpenCart</span>
  </a>
</div>
чтоб не возникло вопросов...;)

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
AlexFisher    194

Шикарно!

Буквально на днях изучал эту примочку, а тут целый мануаль по установке. Риспект.

(правда, передумал ставить :), но ничего, для других проектов сгодится )

У меня во всех браузерах нормально кажет. А у меня их много))) Сафари только нет. а так: Хром, Файрфокс, Гринбраузер, Опера, Ишак - все четко.

С уважением.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
DmitriSyr    0

Уголок на флешь.. лучше смотрится

:blink: Смотреть демо

Установка такого объявления в страничку очень проста и займет несколько секунд. Все, что Вам необходимо сделать в файле catalog/view/theme/default/template/common/header.tpl - после тега <body> вставить следующий код:

<script src="peel.js" type="text/javascript"></script>

Важно: файлы из архива flesh_ugolok.rar необходимо класть в корень сайта. Если файл скрипта переместите в другую папку, не забывайте про правильный путь.

Вот и все манипуляции со страничкой, где будет находиться уголок.

Теперь нам необходимо немного модифицировать файл peel.js.

Поменяйте ссылку так... найти следующую строчку:

jaaspeel.ad_url = escape('http://www.170r.ru');

Вместо "170r.ru" необходимо ввести Ваш УРЛ (страницу на которую должен перейти пользователь после нажатия на объявление).

Кроме этого в файле peel.js находятся пути к картинкам. Если Вы будете их перемещать в другие папки, не забудьте поменять и пути к ним.

flesh_ugolok.zip

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Googlah    6

а как сделать вот такое не подскажешь?

http://www.elho.com/intro/frameset.php

очень интересно как сделанно

понятное дело конечно что на Яве но может кто-то где то видел готовый скрипт такого чуда?уж очень заинтересовало

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Googlah    6
DmitriSyr, не работает ссылка на демо твое

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
tim21701    497

Уголок на флешь.. лучше смотрится

Спорный вопрос.

К тому же, всем известно, что флеш добавляет лишнюю нагрузку, да и, может элементарно быть не у всех установлен... А этот пример, использует только файл со стилями и png.

У меня, например, на iPad - Ваш пример не работает.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
gdi31    5

Уже много раз слышал, что музыка на сайте это …..Изображение

Но мой вопрос заключается не в том хорошо это или плохо, а втом, как это реализовать.

На главной, чтоб пело – было.

На всех и чтоб на каждой новой странице с начала – проходили.

Но вот так как по ссылке в посте № 7 – это для меня ещё экзотика.

Кто ни будь, постиг эту мантру?

Можно ли вот это:

<!-- Плеер -->

<div id="radio">

<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_maxi.swf" width="52" height="20">

<param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_maxi.swf" />

<param name="bgcolor" value="#ffffff" />

<param name="FlashVars" value="mp3=http%3A//www.umka-babyshop.ru/audio/Lullaby.mp3&width=52&loop=1&autoplay=1&showvolume=1&showslider=0&buttonwidth=25&volumewidth=25&bgcolor1=f6f6f6&bgcolor2=f6f6f6&buttoncolor=000000&buttonovercolor=000000&volume=60" />

</object></div>

<!--/Плеер конец -->

заставить петь так, как там?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
DmitriSyr    0

Спорный вопрос.

К тому же, всем известно, что флеш добавляет лишнюю нагрузку, да и, может элементарно быть не у всех установлен... А этот пример, использует только файл со стилями и png.

У меня, например, на iPad - Ваш пример не работает.

Ну не знаю .. я не спец.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
tim21701    497

демо здесь http://lider-spets.ru

Данный пример вообще практически не чем не отличается от того - что здесь описан. ))) Единственное, что более-менее интересно, так это колышащийся уголок, "типо на ветру". И всё! )))) Зеркальное отображение можно и тут настроить, фотошоп никто не отменял. Так что, о плюсах того или этого способа - заинтересовать клиента, ничего сказать не могу. Каждый, вибирает для себя то - что ему больше нравится. Дело вкуса.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
tim21701    497

а как сделать вот такое не подскажешь?

http://www.elho.com/intro/frameset.php

очень интересно как сделанно

понятное дело конечно что на Яве но может кто-то где то видел готовый скрипт такого чуда?уж очень заинтересовало

Это не Ява, это Adobe Flash )) Такие вещи (обычно) делаются "под заказ"... ;)

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
madbadjack    1

Прошу прощения, странный глюк - флип работает на всех страницах, кроме главной. Т.е. уголок виден, кликабелен, но не раскрывается. На всех остальных страницах - полнофункционален. Прям теряюсь в догадках, что бы это значило...

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Googlah    6

gdi31, музыка ан сайте ет дерьмо если честно)

но некоторым нравиться)

tim21701, мне казалось ет Ява)

ну ладно я не сморел исходного кода)

Флеш ет хорошо конечно)

но мб кто-то видел реализацию на Яве такую?

либо за сколько кто сделает такое же?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
gdi31    5

gdi31, музыка ан сайте ет дерьмо если честно)

...стем что дерьмо это то понятно!

А вот как сделать это, так и осталось в тайне :)?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
AlexFisher    194

Господа. Если насчет флесха идет речь, то отакая шевелящаяся какая_угодно_хрень делается за пару минут. А ваще - музыка на сайте таки-да - дермо)

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Googlah    6
AlexFisher,можешь ткнуть носом пожалуйста где почитать?)

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
AlexFisher    194
Googlah я читал на демиарте. Только если быстро хочется - скорее всего хрен, что выйдет. Репетировать долго и нудно нада буит ;)

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Googlah    6

да как раз хотел взяться за изучение графики)

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
AlexFisher    194

а чё ее изучать? МогЁшь - рисуешь. Не могЁшь - нанимаешь таких-же орлов, как сам, только умеющий. Тут-жеж дело такое.. хЫст потрибэн 8)

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
tim21701    497

1301685510[/url]' post='15426']...tim21701, мне казалось ет Ява)

ну ладно я не сморел исходного кода...

Зачем лезть в исходный код, ткните правой кнопкой мыши на сайте и поймёте...

1301685510[/url]' post='15426']...Флеш ет хорошо конечно)...

Флеш - это очень, оочень плохо :D

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
madbadjack    1

Господа, простите, что влезаю в вашу философскую беседу, но не соблаговолит ли кто-нибудь (возможно топик-стартер) ответить на мой вопрос? https://opencartforum.com/topic/2178-%d1%8d%d1%84%d1%84%d0%b5%d0%ba%d1%82-%d0%bf%d0%b5%d1%80%d0%b5%d0%bb%d0%b8%d1%81%d1%82%d1%8b%d0%b2%d0%b0%d0%bd%d0%b8%d1%8f-%d1%81%d1%82%d1%80%d0%b0%d0%bd%d0%b8%d1%86-%d0%be%d1%82%d0%b3%d0%b8%d0%b1%d0%b0%d1%8e%d1%89%d0%b8%d0%b9%d1%81%d1%8f-%d1%83/page__view__findpost__p__15296

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
gdi31    5

Наверное, многие видели такую рекламу; в углу страницы - загнутый уголок, подводишь к нему курсор - и он отгибается, открывая пространство с информацией...

А такой уголок есть в загашнике?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти


  • Похожий контент

    • От tim21701
      Часто задают этот вопрос, что бы не скидывать всем ссылки - вывожу её в отдельную тему.

      =========================================================================
      -----------------НЕ ЗАБЫВАЕМ ПРО РЕЗЕРВНОЕ КОПИРОВАНИЕ ФАЙЛОВ!-----------------
      =========================================================================

      Итак, открываем файл: catalog/view/theme/ВАША_ТЕМА/stylesheet/stylesheet.css и находим строки:
      #menu { background: #585858; border-bottom: 1px solid #000000; height: 37px; margin-bottom: 15px; -webkit-border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; -khtml-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; -webkit-box-shadow: 0px 2px 2px #DDDDDD; -moz-box-shadow: 0px 2px 2px #DDDDDD; box-shadow: 0px 2px 2px #DDDDDD; padding: 0px 5px; } Добавляем туда строку (в любое место):
      text-align:center; Чуть ниже, (в этом же файле) находим:
      #menu ul { list-style: none; margin: 0; padding: 0; } Меняем на эти строки:
      #menu ul { list-style: none; margin:auto; padding: 0; display:inline-block; margin-bottom:-4px; text-align:left; } До:

      После:

      Расширяем возможности горизонтального меню...
       
    • От tim21701
      Если кому пригодится, то вот способ - как разместить на главной странице любой модуль.
      (для примера я взял три модуля; "Рекомендуем", "Хиты продаж" и "Слайд-шоу".)

      Вот результат:




      Итак, открываем файл catalog/controller/common/home.php и находим строку:
       
      $this->children[] = 'common/header'; Добаваляем после неё то - что хотим видеть на главной:
       
      $this->children[] = 'module/featured';$this->children[] = 'module/bestseller';$this->children[] = 'module/sidebarslideshow'; Далее, открываем catalog/view/theme/default/template/common/home.tpl и находим:
       
      <?php foreach ($modules as $module) { ?><?php echo ${$module['code']}; ?><?php } ?> И ниже добавляем своё:
       
      <?php echo $featured; ?><?php echo $bestseller'; ?><?php echo $sidebarslideshow'; ?> Затем, открываем catalog/view/theme/default/stylesheet/stylesheet.css и вместо блока (он в самом низу):
       
      #content .middle .box {float: left;margin: 0 6px 10px 6px;min-height: 0px;}#content .middle .box .middle {width: 158px;min-height: 0px;} Ставим свой:
       
      #content .box {float: left;margin: 0 6px 10px 6px;min-height: 0px;}#content .box .middle {width: 158px;min-height: 0px;} Таким способом, можно продублировать любой модуль на главной странице.
       
    • От tim21701
      Итак, если Вы не установили изображение для Категории товаров, берём случайное (из товара) и выводим его...

      Пример:



      Для этого, открываем /catalog/controller/product/category.php и находим строки:
       
      if ($category_info['image']) {$image = $category_info['image'];} else {$image = '';} После них, вставляем:

      if ($category_info['image']) {$image = $category_info['image'];} else {$image = '';// Use random image from products in the category$rndImgQry = "SELECT p.image AS image FROM product AS p JOIN product_to_category AS c ON p.product_id = c.product_id ". "WHERE c.category_id = " . $category_info['category_id'] . " AND p.image NOT LIKE 'no_image.jpg'";$rndImgRslt = mysql_query($rndImgQry) or die (mysql_error());if (mysql_num_rows($rndImgRslt) > 0){$imgRows = array();while($imgRow = mysql_fetch_array($rndImgRslt)){$imgRows[] = $imgRow['image'];}$image = $imgRows[array_rand($imgRows)];}} Ниже, находим блок:

      if ($result['image']) {$image = $result['image'];} else {$image = 'no_image.jpg';} После него вставляем:

      if ($result['image']) {$image = $result['image'];} else {$image = 'no_image.jpg';// Use random image from products in the category$rndImgQry = "SELECT p.image AS image FROM product AS p JOIN product_to_category AS c ON p.product_id = c.product_id ". "WHERE c.category_id = " . $result['category_id'] . " AND p.image NOT LIKE 'no_image.jpg'";$rndImgRslt = mysql_query($rndImgQry) or die (mysql_error());if (mysql_num_rows($rndImgRslt) > 0){$imgRows = array();while($imgRow = mysql_fetch_array($rndImgRslt)){$imgRows[] = $imgRow['image'];}$image = $imgRows[array_rand($imgRows)];}} Всё.
       
    • От tim21701
      Если Вы хотите, что бы на странице товара, при нажатии на вкладки "Описание", "Фото", "Отзывы", "Рекомендуем" они открывались "плавно" (эффект fade),
      откройте файл catalog/view/javascript/jquery/tab.js и найдите строку:
       
      $($(this).attr('tab')).css('display', 'block'); Добавьте ПЕРЕД ней эту:
       
      $($(this).attr('tab')).fadeIn(); Сохраните и посмотрите что получилось.
       
    • От tim21701
      Для любителей отображения меню списком "дерево" в стиле Windows XP, предлагаю такой вариант:



      Используемые значки:

      В модуле нет заменяемых файлов, только новые.
      Установка: Копируем папки из архива и включаем меню в админке.

      Внимание.
      Данный мод не заменяет основное меню Категорий, у Вас появится ещё одно меню с Категориями!
      (Которое можно использовать как дополнительное... Если захотите отставить только его - отключите "Основное").

      Tree Category.zip
  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу