[Ликбез]

Форма входа
Логин:
Пароль:

Меню сайта


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

Проблема с слайдером
[1] snayper [09.10.2013, 11:47]
почему не отображаются описания на картинке?
вот сайт 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);
[2] likbezz [09.10.2013, 20:24]
snayper,
Цитата (snayper, Ср, 09.10.2013, 11:47:07)
почему не отображаются описания на картинке?

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

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

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

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


по вашей ссылке тоже ничего непонятно.
как нет описания а куда ж эго нужно добавлять я думал в код alt
[4] likbezz [09.10.2013, 20:39]
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>

..
[5] snayper [09.10.2013, 20:50]
ну вот я так добавил код но всеравно нет ничего
Код
<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>
[6] likbezz [09.10.2013, 21:27]
Код
<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>
[7] snayper [09.10.2013, 21:32]
Цитата 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
[8] likbezz [09.10.2013, 21:40]
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>
[9] snayper [02.03.2014, 00:20]
здравствуйте. возник ещё один вопрос а как добавить в слайдер ещё 4ую картинку ?
[10] likbezz [02.03.2014, 00:34]
snayper,
Цитата snayper, Вс, 02.03.2014, 00:20:01
здравствуйте. возник ещё один вопрос а как добавить в слайдер ещё 4ую картинку ?

Полагаю как как и предыдущие три.. Нет?
[11] snayper [02.03.2014, 09:14]
Код
<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
[12] likbezz [02.03.2014, 10:49]
snayper,
Цитата snayper, Вс, 02.03.2014, 09:14:54
прописую так появляется просто картинка под низом

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

http://likbezz.ru/_example/_rest/_2014/p1/orbit.html
[13] snayper [02.03.2014, 14:00]
ещё вапрос незнаете как убрать это (промежуток)

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


Сообщение отредактировал snayper - Воскресенье, 02.03.2014, 14:01
[14] likbezz [02.03.2014, 14:21]
snayper,
Цитата snayper, Вс, 02.03.2014, 14:00:57
незнаете как убрать это (промежуток)

Прикрепления: 3852882.png (88.6 Kb)
[15] snayper [02.03.2014, 14:54]
не подскажите как зафиксировать меню что б не было такого


Полная версия сайта