Проблема с слайдером
|
|
|
2013-10-09Дата: Среда, 09.10.2013, 11:47 | Сообщение # 1 |
Лейтенант
Группа: Проверенные
Статус: 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);
| | |
|
|
2013-10-09Дата: Среда, 09.10.2013, 20:24 | Сообщение # 2 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
snayper, почему не отображаются описания на картинке? Может потому что его нет?
можете мне подредактировать код Нет. Я сделаю лучше - дам вам ссылку на документацию к плагину - КПД выше.
http://zurb.com/playground/orbit-jquery-image-slider ..
| | |
|
|
2013-10-09Дата: Среда, 09.10.2013, 20:32 | Сообщение # 3 |
Лейтенант
Группа: Проверенные
Статус: Offline
|
Я сделаю лучше - дам вам ссылку на документацию к плагину - КПД выше. http://zurb.com/playground/orbit-jquery-image-slider
по вашей ссылке тоже ничего непонятно. как нет описания а куда ж эго нужно добавлять я думал в код alt
| | |
|
|
2013-10-09Дата: Среда, 09.10.2013, 20:39 | Сообщение # 4 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
snayper, по вашей ссылке тоже ничего непонятно - По моей ссылке - официальная документация от разработчиков. Достаточно понятно написано ..
как нет описания а куда ж эго нужно добавлять Ну как же нет: Цитата 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> ..
| | |
|
|
2013-10-09Дата: Среда, 09.10.2013, 20:50 | Сообщение # 5 |
Лейтенант
Группа: Проверенные
Статус: 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>
| | |
|
|
2013-10-09Дата: Среда, 09.10.2013, 21:27 | Сообщение # 6 |
Аццкий кодер
Группа: Администраторы
Статус: 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>
| | |
|
|
2013-10-09Дата: Среда, 09.10.2013, 21:32 | Сообщение # 7 |
Лейтенант
Группа: Проверенные
Статус: 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" 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 | | |
|
|
2013-10-09Дата: Среда, 09.10.2013, 21:40 | Сообщение # 8 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
snayper, а как для 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>
| | |
|
|
2014-03-02Дата: Воскресенье, 02.03.2014, 00:20 | Сообщение # 9 |
Лейтенант
Группа: Проверенные
Статус: Offline
|
здравствуйте. возник ещё один вопрос а как добавить в слайдер ещё 4ую картинку ?
| | |
|
|
2014-03-02Дата: Воскресенье, 02.03.2014, 00:34 | Сообщение # 10 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
snayper, здравствуйте. возник ещё один вопрос а как добавить в слайдер ещё 4ую картинку ? Полагаю как как и предыдущие три.. Нет?
| | |
|
|
2014-03-02Дата: Воскресенье, 02.03.2014, 09:14 | Сообщение # 11 |
Лейтенант
Группа: Проверенные
Статус: 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 | | |
|
|
2014-03-02Дата: Воскресенье, 02.03.2014, 10:49 | Сообщение # 12 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
snayper, прописую так появляется просто картинка под низом Даже боюсь сказать... Не верю.
http://likbezz.ru/_example/_rest/_2014/p1/orbit.html
| | |
|
|
2014-03-02Дата: Воскресенье, 02.03.2014, 14:00 | Сообщение # 13 |
Лейтенант
Группа: Проверенные
Статус: Offline
|
ещё вапрос незнаете как убрать это (промежуток) вот сайт http://kinorubka.3dn.ru/ и ещё большое спасибо вам за уроки не знаю что б и делал если б не вы. очень вам благодарен
Сообщение отредактировал snayper - Воскресенье, 02.03.2014, 14:01 | | |
|
|
2014-03-02Дата: Воскресенье, 02.03.2014, 14:21 | Сообщение # 14 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
snayper, незнаете как убрать это (промежуток)
| | |
|
|
2014-03-02Дата: Воскресенье, 02.03.2014, 14:54 | Сообщение # 15 |
Лейтенант
Группа: Проверенные
Статус: Offline
|
не подскажите как зафиксировать меню что б не было такого
| | |
|