Эффект CrossSlide

В этом видеоуроке мы с Вами будем учиться создавать эффект CrossSlide для показа серии изображений на Вашем сайте.

Этот эффект существует в трех вариантах и все они представлены в демо

Вариант 1. Изображение перемещается внутри блока.

Вариант 2. Показывается полный вариант изображения, которое постепенно сменяется следующим.

Вариант 3. Появляется эффект приближения и отдаления.

Длительность: 9 мин.

Размер: 23,2 Мб.

Авторизоваться и Скачать

5 последних добавленных файлов в рубрике"Видеоуроки"

  • Как заставить человека просмотреть видео на сайте до конца?

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

  • Эффект дразнящего уголка для вашего сайта

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

  • Как добавить комментарии Вконтакте к своему сайту

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

  • Эффективная гостевая книга для joomla-сайта

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

  • Открываем счет в системе PayPal

    Последние несколько лет все свои покупки на аукционе ebay и многих интернет-магазинах я оплачиваю с помощью системы PayPal. Это удобно, безопасно и быстро. О том, как открыть счет в этой системе, я расскажу в двух видеоуроках, которые записал специально для вас.

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 2 Марта 2010 16:22
    Сумрак
    Интересно... Мне понравилось)) Большое спасибо!
  • 2 Марта 2010 20:31
    Игорь
    Лучше сделайте урок чтоб применить эту красоту в Joomla естественно создав новый модуль.
  • 6 Марта 2010 08:07
    Татьяна
    у меня все получилось, только данный эффект поддерживается только в браузере Опера, а в других - нет. что делать?
  • 6 Марта 2010 11:04
    AtonS
    Проверял эффект во всех IE начиная с 6 версии, проверял в Mozilla 3.5.8 и проверял в Опера с 9 версии - везде работает!
  • 6 Марта 2010 23:44
    MrFrost
    Кроссбраузерность в порядке! У меня другая проблема! Скрипт работает на компьютере в тестовике, но почему то не работает на сайте! В чем проблема???
  • 8 Марта 2010 23:35
    matkin
    Для Wordpress не сложно будет реализовать?
  • 14 Марта 2010 12:18
    evgen_ko
    Всем привет. Попытался интегрировать в шаблон Wordpress , не заработало почему-то :(
  • 18 Марта 2010 20:14
    Михаил
    Супер )
  • 25 Марта 2010 12:21
    kos
    супер давно это хотел сделать но не знал как реализовать!!!!!!
  • 31 Марта 2010 19:44
    Vans
    Очень классный эффект спасибо!! а подскажите можно ли как нибудь прикреплять к этим фото ссылки..что бы допустим при смене одной фото на другую можно было нажать и перейти на другую страницу..и так для каждого рисунка????
  • 5 Мая 2010 17:58
    janna
    У меня почему то ничего не получилось Сrossslide и немогу найти ошибку помогите пожалуйста
  • 6 Мая 2010 18:12
    janna
    Спасибо большое за етот урокюХотела спросить а если хочу больше четырех фото поставить как это сделать
  • 9 Мая 2010 00:42
    Leonking
    Та же проблема что и у Татьяны (эффект поддерживается только в браузере Опера) помогите. Спасибо.
  • 9 Мая 2010 00:53
    Leonking
    Я нашел свою ошибку. Дело вот в чем: я корда копировал скрипт то скопировал и стиль в index.html, вдобавок в таблицу стилей, удалил, с индексной страницы и все заработало.
  • 16 Июня 2010 23:03
    syrin
    В мозиле глючит. если гулять по сайту, а потом вернутся на страницу с скриптом, то картинки вылазят за границы рамки(((
  • 26 Июня 2010 22:26
    kr
    Все хорошо выглядит. толькоо вот у меня работает только с картинками, которые в качестве образца приложены. Когда меняю их на свои перестает работать. Может кто-нить знает в чем дело? В стилях и путях я все нормально прописываю.
  • 27 Июня 2010 15:25
    krozh
    Причем только в первом варианте
  • 5 Июля 2010 16:36
    Александр
    очень интересный плагин! а как сделать в варианте с закругленными углами? или например с битовой маской?
  • 22 Июля 2010 16:01
    Dzholi
    Плагин замечательный.Единственный вопрос: можно ли добиться случайного выбора стартового изображения при перезагрузке страницы.Интересует вариант 2.
  • 3 Августа 2010 22:41
    Victor
    У меня вначале код тоже не работал. Но даю важный совет. Открой
  • 3 Августа 2010 22:43
    Victor
    У меня вначале код тоже не работал. Но даю важный совет. Откройте страницу по ссылке demo и откройте ее исходный текст и все блоки кода, отвечающего за этот слайдшоу, можете вставлять на свой сайт. В исходниках ломаный код. Не забудьте менять ширину и высоту рисунков и пути к исходным файлам.
  • 11 Августа 2010 15:15
    Дмитрий
    Почему не работает кнопка "В корзину" при добавлении этого эффекта на Joomla?
    • 12 Марта 2013 11:14
      mansur1476
      Дмитрий как решил ты эту проблему ? Просто если я подключаю jquery непосредственно в head индексного документа у меня тоже часть плагинов не работает в том числе и кнопка добавления в корзину напиши мне
  • 2 Сентября 2010 17:42
    chuikoalex
    Не понимаю от чего зависит: у меня на сайте все ок... запускаю на другом компе 50 на 50, может сработать а может сдвигать картинки за края рамки (эффект 3)... от браузера не зависит (происходит в любом). Может что-то с кешированием картинок? Кто исправил это?
  • 18 Сентября 2010 22:47
    Alexandr_P
    Не получилось почему-то запустить первый вариант. Второй и третий работает а первый нет. Странно...
  • 19 Сентября 2010 00:49
    Alexandr_P
    Сорри, сам протупил. При первом варианте необходимо высоту указывать меньше, чем картинка. В уроке об этом говорится. Надо внимательно читать.
  • 13 Октября 2010 00:31
    Arthur
    Прикольно
  • 13 Октября 2010 00:33
    Arthur
    Прикольное видео
  • 25 Октября 2010 14:09
    Светлана
    В имени картинки только цифры?.. Буквы - у меня не работает!..
  • 27 Февраля 2011 00:13
    jahoope1
    почему в demo несколько слайдшоу на одной странице работает нормально, а у меня работает только 1 одно.Если обновляю страницу то начинает работать другое, а два остальных не работаю
  • 27 Февраля 2011 00:19
    jahoope1
    И еще (если много раз подряд обновить станицу) иногда картинка внутри рамки двигается не правельно както обрезанно
  • 13 Июня 2011 22:04
    koles
    <script type="text/javascript"> $(function() {
    $('#test2').crossSlide({ sleep: 2, fade: 1
    }, [
    { src: 'img/cross1/cross1.jpg'},	{ src: 'img/cross1/cross2.jpg'},	{ src: 'img/cross1/cross2.jpg'},	{ src: 'img/cross1/cross3.jpg'}
    ]); });
    </script>
    <style type="text/css">#test2 { border:0; width: 250px; height: 157px;}</style>
    <div id="test2">загружаю...</div>
    
    на что мне firebug отвечает: $("#test2").crossSlide is not a function [Прерывать на этой ошибке] { src: 'img/cross1/cross3.jpg'}
  • 4 Октября 2012 01:57
    tlustenko
    на локалхосте работает (причём если в названии картинок есть буквы - тоже работает). на сайте ни в какую не хочет работать. jquery noConflict не помогает.
  • 12 Марта 2013 11:18
    mansur1476
    Друзья подскажите как избавиться от конфликта библиотек jquery ? Просто если я подключаю jquery в head индексного документа то у меня перестает работать все остальное в том числе и кнопка добавления товара в корзину
^ Наверх ^