Фильтр по:
  

  • Страница 1 из 2
  • 1
  • 2
  • »
Модератор форума: Admin, Cибиря4ка, Komoff, Diana  
Скрипты и коды для юкоз - Форум аццкого кодера » Раздел для начинающих » Если вы пришли за помощью, то Вам сюда... » Проблема с слайдером
Проблема с слайдером
Дата: Среда, 09.10.2013, 11:47 |
Лейтенант
Группа: Проверенные
Сообщений: 76
Награды: 0
Репутация: 0
Статус: Offline


почему не отображаются описания на картинке?
вот сайт http://comfort.3dn.ru/
можете мне подредактировать код чтоб на картинке отображалось описание
Код
<td valign="top" height="100%" style="padding-bottom:20px;">
<table border="0" cellpadding="4" cellspacing="1" width="100%">
<tr><td>
<table border="0" cellpadding="2" cellspacing="1" width="100%">
<tr>

<img alt="" src="http://comfort.3dn.ru/images/bezimeni-4.png">
<div align="center"> <div id="featured">
<img src="http://comfort.3dn.ru/img/3555507_wallpaper-.jpg" />
<a href="http://comfort.3dn.ru/load/mebel/italjanskie_kukhni_vy_poljubite_gotovit_chast_1/2-1-0-3" target="_blank"><img src="http://comfort.3dn.ru/img/3555507_wallpaper-.jpg" alt="Описание" rel="ezioCaption" /></a>
<img src="http://comfort.3dn.ru/img/3555507_wallpaper-.jpg" alt="Описание №1" />
<img src="http://comfort.3dn.ru/img/3555507_wallpaper-.jpg" alt="Описание№2" rel="marcusCaption" />
<img src="http://comfort.3dn.ru/img/3555507_wallpaper-.jpg" alt="Описание№3" rel="marcusCaption" />
</div></div>


этот код с js

Код
/*
  * jQuery Orbit Plugin 1.1  
  * www.ZURB.com/playground
  * Copyright 2010, ZURB
  * Free to use under the MIT license.
  * http://www.opensource.org/licenses/mit-license.php
*/

(function(e){e.fn.orbit=function(a){a=e.extend({animation:"fade",animationSpeed:800,advanceSpeed:4E3,startClockOnMouseOut:true,startClockOnM ouseOutAfter:3E3,directionalNav:true,captions:true,captionAnimationSpeed:800,timer:false,bullets:false},a);return this.each(function(){function m(c){function g(){f.eq(h).css({"z-index":1});s=false}var h=b,k=c;if(h==k)return false;if(!s){s=true;if(c=="next"){b++;if(b==n)b=0}else if(c=="prev"){b--;if(b<0)b=n-1}else{b=c;if(h<b)k="next";else if(h>b)k="prev"}a.bullets&&
x();if(a.animation=="fade"){f.eq(h).css({"z-index":2});f.eq(b).css({opacity:0,"z-index":3}).animate({opacity:1},a.animationSpeed,g);a.captions&&o()}if(a.animation=="horizontal-slide"){f.eq(h).css({"z-index":2});k=="next"&&f.eq(b).css({left:t,"z-index":3}).animate({left:0},a.animationSpeed,g);k=="prev"&&f.eq(b).css({left:-t,"z-index":3}).animate({left:0},a.animationSpeed,g);a.captions&&o()}if(a.animation=="vertical-slide"){f.eq(h).css({"z-index":2});k=="prev"&&f.eq(b).css({top:u,"z-index":3}).animate({top:0},
a.animationSpeed,g);k=="next"&&f.eq(b).css({top:-u,"z-index":3}).animate({top:0},a.animationSpeed,g);a.captions&&o()}}}var b=0,n=0,t,u,s,d=e(this).addClass("orbit"),f=d.find("img, a img");f.each(function(){var c=e(this),g=c.width();c=c.height();d.width(g);t=d.width();d.height(c);u=d.height();n++});f.eq(b).css({"z-index":3});if(a.timer){d.append('<div class="timer"><span class="mask"><span class="rotator"></span></span><span class="pause"></span></div>');var j=e("div.timer"),p;if(j.length!=0){var C=
a.advanceSpeed/180,v=e("div.timer span.rotator"),y=e("div.timer span.mask"),z=e("div.timer span.pause"),l=0,A,w=function(){p=true;z.removeClass("active");A=setInterval(function(){var c="rotate("+l+"deg)";l+=2;v.css({"-webkit-transform":c,"-moz-transform":c,"-o-transform":c});if(l>180){v.addClass("move");y.addClass("move")}if(l>360){v.removeClass("move");y.removeClass("move");l=0;m("next")}},C)},q=function(){p=false;clearInterval(A);z.addClass("active")};w();j.click(function(){p?q():w()});if(a.startClockOnMouseOut){var B;
d.mouseleave(function(){B=setTimeout(function(){p||w()},a.startClockOnMouseOutAfter)});d.mouseenter(function(){clearTimeout(B)})}}}if(a.captions){d.append('<div class="caption"><span class="orbit-caption"></span></div>');var r=d.children("div.caption").children("span").addClass("orbit-caption").show(),o=function(){var c=f.eq(b).attr("rel"),g=e("#"+c).html(),h=r.height()+20;r.attr("id","#"+c).html(g);g?r.parent().stop().animate({bottom:0},a.captionAnimationSpeed):r.parent().stop().animate({bottom:-h},
a.captionAnimationSpeed)};o()}if(a.directionalNav){d.append('<div class="slider-nav"><span class="right">Right</span><span class="left">Left</span></div>');j=d.children("div.slider-nav").children("span.left");var D=d.children("div.slider-nav").children("span.right");j.click(function(){a.timer&&q();m("prev")});D.click(function(){a.timer&&q();m("next")})}if(a.bullets){d.append('<ul class="orbit-bullets"></ul>');var E=e("ul.orbit-bullets");for(i=0;i<n;i++){j=e("<li>"+i+"</li>");e("ul.orbit-bullets").append(j);
j.data("index",i);j.click(function(){a.timer&&q();m(e(this).data("index"))})}var x=function(){E.children("li").removeClass("active").eq(b).addClass("active")};x()}})}})(jQuery);


 
Дата: Среда, 09.10.2013, 20:24 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


snayper,
Цитата (snayper, Ср, 09.10.2013, 11:47:07)
почему не отображаются описания на картинке?

Может потому что его нет?

Цитата (snayper, Ср, 09.10.2013, 11:47:07)
можете мне подредактировать код

Нет.
Я сделаю лучше - дам вам ссылку на документацию к плагину - КПД выше.

http://zurb.com/playground/orbit-jquery-image-slider
..


 
Дата: Среда, 09.10.2013, 20:32 |
Лейтенант
Группа: Проверенные
Сообщений: 76
Награды: 0
Репутация: 0
Статус: Offline


Цитата likbezz, Ср, 09.10.2013, 19:24:45
Я сделаю лучше - дам вам ссылку на документацию к плагину - КПД выше.
http://zurb.com/playground/orbit-jquery-image-slider


по вашей ссылке тоже ничего непонятно.
как нет описания а куда ж эго нужно добавлять я думал в код alt


 
Дата: Среда, 09.10.2013, 20:39 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


snayper,
Цитата snayper, Ср, 09.10.2013, 20:32:25
по вашей ссылке тоже ничего непонятно

- По моей ссылке - официальная документация от разработчиков.
Достаточно понятно написано ..

Цитата snayper, Ср, 09.10.2013, 20:32:25
как нет описания а куда ж эго нужно добавлять

Ну как же нет:
Цитата Info
Full HTML Captions

Orbit now has full HTML captions so you can add styles, links, lists, or whatever your coding heart desires.

1. Add a span with the class "orbit-caption" and an ID of your very own choosing after the slider div. Put whatever HTML you'd like to appear in the caption inside. They're block level, so anything goes.
2. Add the span ID you chose to the "data-caption" attribute on the corresponding image tag.


И дается даже код примера:
Код
<div id="featured">  
      <img src="overflow.jpg" alt="Overflow: Hidden No More" />
      <img src="captions.jpg"  alt="HTML Captions" data-caption="#htmlCaption" />
      <img src="features.jpg" alt="and more features" />
</div>
<!-- Captions for Orbit -->
<span class="orbit-caption" id="htmlCaption">I'm A Badass Caption</span>

..


 
Дата: Среда, 09.10.2013, 20:50 |
Лейтенант
Группа: Проверенные
Сообщений: 76
Награды: 0
Репутация: 0
Статус: Offline


ну вот я так добавил код но всеравно нет ничего
Код
<div id="featured">

       <img src="http://comfort.3dn.ru/img/3555507_wallpaper-.jpg" alt="Overflow: Hidden No More" />
       <img src="http://comfort.3dn.ru/img/3555507_wallpaper-.jpg"  alt="HTML Captions" data-caption="#htmlCaption" />
       <img src="http://comfort.3dn.ru/img/3555507_wallpaper-.jpg" alt="and more features" /> </div>  
<!-- Captions for Orbit -->
<span class="orbit-caption" id="htmlCaption">I'm A Badass Caption</span>


 
Дата: Среда, 09.10.2013, 21:27 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Код
<div id="featured">
        <img src="http://comfort.3dn.ru/img/3555507_wallpaper-.jpg" alt="Overflow: Hidden No More" />
        <img src="http://comfort.3dn.ru/img/3555507_wallpaper-.jpg"  alt="HTML Captions" rel="htmlCaption" />
        <img src="http://comfort.3dn.ru/img/3555507_wallpaper-.jpg" alt="and more features" /> </div>   
<!-- Captions for Orbit -->
<span class="orbit-caption" id="htmlCaption">I'm A Badass Caption</span>


 
Дата: Среда, 09.10.2013, 21:32 |
Лейтенант
Группа: Проверенные
Сообщений: 76
Награды: 0
Репутация: 0
Статус: Offline


Цитата likbezz, Ср, 09.10.2013, 20:27:15
<div id="featured">
<img src="http://comfort.3dn.ru/img/3555507_wallpaper-.jpg" alt="Overflow: Hidden No More" />
<img src="http://comfort.3dn.ru/img/3555507_wallpaper-.jpg" alt="HTML Captions" rel="htmlCaption" />
<img src="http://comfort.3dn.ru/img/3555507_wallpaper-.jpg" alt="and more features" /> </div>
<!-- Captions for Orbit -->
<span class="orbit-caption" id="htmlCaption">I'm A Badass Caption</span>


а всё понял
большое спасибо вам за помощь


Сообщение отредактировал snayper - Среда, 09.10.2013, 21:41
 
Дата: Среда, 09.10.2013, 21:40 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


snayper,
Цитата snayper, Ср, 09.10.2013, 21:32:01
а как для 1го и 3го изображения сделать описание?

..нувот, блин..
Код
<div id="featured">
    <img src="http://comfort.3dn.ru/img/3555507_wallpaper-.jpg" alt="Overflow: Hidden No More" rel="htmlCaption1" />
    <img src="http://comfort.3dn.ru/img/3555507_wallpaper-.jpg" alt="HTML Captions" rel="htmlCaption2" />
    <img src="http://comfort.3dn.ru/img/3555507_wallpaper-.jpg" alt="and more features" rel="htmlCaption3" />
</div>
<span class="orbit-caption" id="htmlCaption1">I'm A Badass Caption1</span>
<span class="orbit-caption" id="htmlCaption2">I'm A Badass Caption2</span>
<span class="orbit-caption" id="htmlCaption3">I'm A Badass Caption3</span>


 
Дата: Воскресенье, 02.03.2014, 00:20 |
Лейтенант
Группа: Проверенные
Сообщений: 76
Награды: 0
Репутация: 0
Статус: Offline


здравствуйте. возник ещё один вопрос а как добавить в слайдер ещё 4ую картинку ?

 
Дата: Воскресенье, 02.03.2014, 00:34 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


snayper,
Цитата snayper, Вс, 02.03.2014, 00:20:01
здравствуйте. возник ещё один вопрос а как добавить в слайдер ещё 4ую картинку ?

Полагаю как как и предыдущие три.. Нет?


 
Дата: Воскресенье, 02.03.2014, 09:14 |
Лейтенант
Группа: Проверенные
Сообщений: 76
Награды: 0
Репутация: 0
Статус: Offline


Код
<div id="featured">
      <img src="http://comfort.3dn.ru/img/3555507_wallpaper-.jpg" alt="Overflow: Hidden No More" rel="htmlCaption1" />
      <img src="http://comfort.3dn.ru/img/3555507_wallpaper-.jpg" alt="HTML Captions" rel="htmlCaption2" />
      <img src="http://comfort.3dn.ru/img/3555507_wallpaper-.jpg" alt="and more features" rel="htmlCaption3" />
<img src="http://comfort.3dn.ru/img/3555507_wallpaper1-.jpg" alt="and more features" rel="htmlCaption4" />
</div>
<span class="orbit-caption" id="htmlCaption1">I'm A Badass Caption1</span>
<span class="orbit-caption" id="htmlCaption2">I'm A Badass Caption2</span>
<span class="orbit-caption" id="htmlCaption3">I'm A Badass Caption3</span>
<span class="orbit-caption" id="htmlCaption4">I'm A Badass Caption4</span>


прописую так появляется просто картинка под низом


Сообщение отредактировал snayper - Воскресенье, 02.03.2014, 09:36
 
Дата: Воскресенье, 02.03.2014, 10:49 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


snayper,
Цитата snayper, Вс, 02.03.2014, 09:14:54
прописую так появляется просто картинка под низом

Даже боюсь сказать...
Не верю.

http://likbezz.ru/_example/_rest/_2014/p1/orbit.html


 
Дата: Воскресенье, 02.03.2014, 14:00 |
Лейтенант
Группа: Проверенные
Сообщений: 76
Награды: 0
Репутация: 0
Статус: Offline


ещё вапрос незнаете как убрать это (промежуток)

вот сайт http://kinorubka.3dn.ru/
и ещё большое спасибо вам за уроки не знаю что б и делал если б не вы. очень вам благодарен


Сообщение отредактировал snayper - Воскресенье, 02.03.2014, 14:01
 
Дата: Воскресенье, 02.03.2014, 14:21 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


snayper,
Цитата snayper, Вс, 02.03.2014, 14:00:57
незнаете как убрать это (промежуток)


Прикрепления: 3852882.png (88.6 Kb)

 
Дата: Воскресенье, 02.03.2014, 14:54 |
Лейтенант
Группа: Проверенные
Сообщений: 76
Награды: 0
Репутация: 0
Статус: Offline


не подскажите как зафиксировать меню что б не было такого


 
Скрипты и коды для юкоз - Форум аццкого кодера » Раздел для начинающих » Если вы пришли за помощью, то Вам сюда... » Проблема с слайдером
  • Страница 1 из 2
  • 1
  • 2
  • »
Поиск:


Мобильная версия