3D cлайдер для сайта? Видеоурок

Рубрика: Скрипты на сайт;
Метки:
3D cлайдер для сайта? Видеоурок

Привет дорогие читатели master-css Как у Вас настроение? Думаю отличное! Сегодня я хочу с Вами поделится одной вещицей!

И знаете что? Она Вам точно понравится. Эта вещица, как Вы поняли из названия статьи - 3D слайдер для сайта!

Вот мне интересно, кто из Вас разбирается в JavaScript? Я больше чем уверен, что многие не слишком в нем шарят, а некоторые, может ответят как я:

- "Эт че такое???"

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

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

Но мы же с Вами понимаем, что можем все сделать намного круче, поэтому изучаем все и учимся

Тренинг по вёрстке сайта на HTML5 и CSS3

Совсем недавно я блуждал по просторам интернета и черт меня дернул зайти на сайт Cu3ox. Но когда зашел, Вы бы видели, как я обрадовался! dance У меня глаза чуть ли не разбежались, т.к. там можно скачать абсолютно бесплатный слайдер Cu3ox!grin

Как работать с этим сервисом, смотрите ниже, буквально 8-и минутный видео-урок. Надеюсь Вам понравится! smile

Еще очень много скриптов есть тут

Интересно, а какие Вы используете слайдеры? wink

Комментариев: 33 RSS

Тренинг по вёрстке сайта на HTML5 и CSS3
Оставьте комментарий!

Вы можете войти под своим логином или зарегистрироваться на сайте.

(обязательно)

Комментариев: 33
  •  Серёга | 17 ноября 2012 в 11:58:25

    Говорим спасибо Кириллу за предоставленный материал smile

  •  Татьяна | 17 ноября 2012 в 13:33:28

    Да спасибо не получится, пока. Выручай, Серёга. Очень захотелось вставить слайдер в сайтбар. Копирую код, вставляю в ушку, и на сайте только заголовок и маленькая иконка. При попытке вставить просто на главную страницу, появляется маленькая иконка.

    http://8stepen.ru/

    Вот код, как рассказано в видео, в том же порядке:

    var cu3oxId = ("cu3ox" + Math.random()).replace(".","");

    [removed]('');

    if (swfobject.getFlashPlayerVersion().major)

    swfobject.createSWF(

    {data:"engine/cu3ox.swf", width:"100%", height:"100%" },

    {FlashVars:"images=data/images1&cfgsuffix=1",menu:true, allowFullScreen:false, allowScriptAccess:'sameDomain', wmode:"transparent", bgcolor:'#FFFFFF',

    devicefont:false, scale:'noscale', loop:true, play:true, quality:'high'}, cu3oxId);

    Slideshow Using Flash by cu3ox.com v1.8

    Буду благодарна, если поможете

  •  Татьяна | 17 ноября 2012 в 13:39:45

    Как то неправильно сюда вставился текст. Вставляю как обычный текст:

    var cu3oxId = ("cu3ox" + Math.random()).replace(".","");

    [removed]('');

    if (swfobject.getFlashPlayerVersion().major)

    swfobject.createSWF(

    {data:"engine/cu3ox.swf", width:"100%", height:"100%" },

    {FlashVars:"images=data/images1&cfgsuffix=1",menu:true, allowFullScreen:false, allowScriptAccess:'sameDomain', wmode:"transparent", bgcolor:'#FFFFFF',

    devicefont:false, scale:'noscale', loop:true, play:true, quality:'high'}, cu3oxId);

    Slideshow Using Flash by cu3ox.com v1.8

  •  Серёга | 17 ноября 2012 в 13:40:49

    Возможно через ушку криво встает.

    Попробуй непосредственно в сами файлы шаблона вставить.

  •  Татьяна | 17 ноября 2012 в 13:41:05
    <!-- Start cu3ox.com BODY section id=cu3ox1 -->
    <div id="cu3ox1">
     [removed]
      var cu3oxId = ("cu3ox" + Math.random()).replace(".","");
      [removed]('<div id ="' + cu3oxId + '">img src="data/images1/____.jpg"/></div>');
      if (swfobject.getFlashPlayerVersion().major)
       swfobject.createSWF(
         {data:"engine/cu3ox.swf", width:"100%", height:"100%" },
         {FlashVars:"images=data/images1&cfgsuffix=1",menu:true, allowFullScreen:false, allowScriptAccess:'sameDomain', wmode:"transparent", bgcolor:'#FFFFFF', 
          devicefont:false, scale:'noscale', loop:true, play:true, quality:'high'}, cu3oxId);
     [removed]
     <a href="http://cu3ox.com">Slideshow Using Flash by cu3ox.com v1.8</a><noscript>
      <!--[if !IE]> -->
      <object type="application/x-shockwave-flash" data="engine/cu3ox.swf" width="100%" height="100%"  align="middle">
      <!-- <![endif]-->
      <!--[if IE]>
      <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0"
       width="100%" height="100%"  align="middle">
       <param name="movie" value="engine/cu3ox.swf" />
      <!-->
       <param name="FlashVars" value="images=data/images1&cfgsuffix=1" />
       <param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="false" />
       <param name="quality" value="high"/><param name="scale" value="noscale"/>
       <param name="wmode" value="transparent" /> 
       <param name="bgcolor" value="#ffffff" /> 
       <img src="data/images1/____.jpg"/>
      </object>
      <!-- <![endif]-->  
     </noscript>
    </div>
    <!-- End cu3ox.com BODY section -->
    <!-- Start cu3ox.com HEAD section -->
    [removed][removed]
    <!-- End cu3ox.com HEAD section -->
  •  Серёга | 17 ноября 2012 в 13:41:38

    Таня, у тебя в подвале меню повторяется - убери его.

  •  Татьяна | 17 ноября 2012 в 13:44:13

    Я и вставила в запись на главной,тоже не вставилось. Но хочется-то через ушку. Или хотя-бы в сайтбар. Может что-то ещё нужно прописать? Ну типа HTML в начале и конце добавить. Я вот ещё думала, что может ширина сайтбара не позволяет? Но в запись на главной тоже же не встало.

  •  Серёга | 17 ноября 2012 в 13:44:15

    Ты в хедер подключила код?

  •  Татьяна | 17 ноября 2012 в 13:45:12

    Спасибо огромное, за оперативность. Ты золото!

  •  Татьяна | 17 ноября 2012 в 13:48:19
    Ты в хедер подключила код?

    ЧЕГО???? Это как? Я думала, ты знаешь, Серёга, что мы все создаём сайт впервые и под твоим чутким руководством. Я и слова то такого не знаю.

  •  Серёга | 17 ноября 2012 в 13:55:09

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

  •  Татьяна | 17 ноября 2012 в 14:18:15

    я и добавила в ту же ушку в самом конце. Было же сказано, что в тот же файл.

  •  Серёга | 17 ноября 2012 в 14:24:38

    У тебя по этому пути файл есть?

    Именно он указан:

    http://8stepen.ru/engine/swfobject.js
  •  Татьяна | 17 ноября 2012 в 14:56:29

    Там вообще ничего не было. Спасибо. Уже любуюсь слайдером в сайтбаре.grin

  •  Аноним | 17 ноября 2012 в 15:38:36

    Уже опять не любуюсь. Картинка появилась, а слайдер не крутится.

  •  Аноним | 17 ноября 2012 в 16:01:01

    вернула слайдер, только не на всех страницах.

  •  Николай | 17 ноября 2012 в 21:16:43

    Сайт Cu3ox интересен и слайдбар интересен, а урок дерьмо. Окажи помощь этому самому Кириллу по созданию видеоуроков.

  •  Евгений | 17 ноября 2012 в 21:45:26

    За информацию спасибо огромно, но тема его внедрения на сайт для новичков не раскрыта

  •  Вячеслав | 17 ноября 2012 в 23:00:41

    Да, слайдер супер! Всё установил как положено, код - в body, скрипт - в хедер, на месте слайдера появилось белое поле. Серёга, расскажи поподробнее, пожалуйстаааа!

  •  Татьяна | 18 ноября 2012 в 02:06:19

    Я напишу, как получилось у меня. Сначала создала папку на рабочем столе, в которую закинула уже отредактированные фотографии нужного размера (одинокового!, иначе порежет,обрежет как хочет).На фото оставила белое поле в низу, т.к. всплывающее название закрывало всю картинку. Затем создала слайдер, как в уроке, и сохранила в ту же папку. В этой же папке появились 2 файла. Их в полном составе закинула на сайт (Спасибо Серёге за подсказку). Дальше открыла НТМL ссылку текстовым редактором, и скопировала в новую ушку содержимое (но не полностью, а так как в видео). Причём, первую часть из видео нужно ставить в конце, а вторую в начале). Иначе не работал слайдер.

    И...о чудо! Всё заработало. Правда не на всех страницах сайта. Я ставила ушку в сайтбар, но работает!!! Может кому будет полезно.

    Посмотреть можно здесь: 8stepen.ru

    А учитель тихий с кашей во рту! Серёга круче! У меня дети по квартире бегали, с ноута урок на всю громкость не было слышно. А если слышно, то непонятно.

  •  Татьяна | 18 ноября 2012 в 02:08:43

    ЗЫ: Всё равно спасибо Кириллу за предоставленный материал!

  •  Серёга | 18 ноября 2012 в 08:03:44

    Хм... Друзья, это первое видео Кирилла, так что косяки будут по любому.

    Вспомните хотя бы мое первое интервью grin Ох, и надавали вы мне тогда в тык boks

    Везде требуется опыт.

    Который обычно набивается шишками chuckle Думаю еще парочка уроков и у Кирилла все будет получаться.

    Такс, обещаю потом записать урок, как данного зверя прикрутить к MaxSite CMS.

    Возможно сам Кирилл и запишет.

  •  Дима | 18 ноября 2012 в 15:24:56

    спасибо большое за урок

  •  Кирилл | 19 ноября 2012 в 10:25:25

    red faceПрошу прощения, если я где-то что-то не досказал.red face Это мой первый опыт записи урока для блога. red face Исправлюсь!smile Самое, что я хотел показать - это то, что можно легко сделать себе слайдер для сайта. smile

  •  Pocherk | 21 ноября 2012 в 16:53:43

    Слайдер, конечно красивый, но то что он сделал на морально устаревшей технологии Flash - это минус... Уж лучше найти что-то подходящее на jQuery.

  •  Keti | 21 ноября 2012 в 20:31:06

    а по-моему, бесплат версия недоступна для скачивания....

  •  Генчик | 23 марта 2013 в 10:41:21
    Я вставил слайдер но он почемуто не крутится на "Windows Innternet Explorer" тоисть картинки в слайдере автоматически не меняются во всех браузерах работает кроме WIE.....
  •  Елена | 4 мая 2013 в 23:37:22

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

    - - 1024 768 5 1.2 0.1 easeInOutBack 0 20 0x111111 0x55ff7f 0xcccccc 0 100 3 3 down 16 994 60 698 upDown cu3ox.com http://cu3ox.com 0 true 1 engine/Kalimba.mp3 - - down 5 - Chrysanthemum - - down 5 - Desert - - down 5 - Hydrangeas - - down 5 - Jellyfish - - down 5 - Koala - - down 5 - Lighthouse - - down 5 - Penguins - - down 5 - Tulips

  •  Серега | 29 июля 2013 в 09:44:31

    В будущем Елена брось дурацкий конструктор от reg.ru и переходи на MAXsite CMS он круче.

  •  player | 19 сентября 2013 в 20:00:03

    как сделать без поворотов, просто перелистной слайд ?

  •  Вадим | 22 ноября 2014 в 04:54:22

    А несколько слайдеров вставить можно?

  •  Серёга | 22 ноября 2014 в 06:41:04

    А я ни разу вообще его не ставил. Я не особо люблю слайдеры smile

  •  Сергей | 10 января 2015 в 22:18:06

    http://demo.vinaora.com/vinaora-cu3er-3d-slideshow.html

    Сергей,простите что влез!

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