Here I come, there I am.

Aug

26

Лек и гъвкъв слайдер на изображения jCarousel Lite

at 09:59 by nofearinc
Category: Coding

 

Миналата седмица имах изискване за семпла галерия от 10-12 картинки, които да бъдат подредени на 1 ред в хоризонтален панел и автоматично да се сменят (симулирано движение вляво и 'избутване' на всяка от снимките). Претърсих различни възможни плъгини и в крайна сметка избрах jCarousel Lite:

Не беше трудно да интегрирам галерията с изискванията - 4 изображения на лентата, автоматично скролиране през определен период (с възможност и за бутони от плъгина), констистентен интерфейс с дизайна на сайта, интеграция с Lightbox (за jQuery).

Работещо демо има в сайта на хотел в Рибарица - Evergreen Palace. След като свалим и добавим скрипта в head частта (при мен имаше значение последователността на jCarouselLIte и jQuery lightbox-а!), добавяме снимките в необходимия HTML (примерен семпъл):

<div id="gallery" class="jCarouselLite" style="width: 700px; visibility: hidden;">
	<ul style="margin: 0pt; padding: 0pt; position: relative; list-style-type: none; z-index: 1; ">
		<li class="jCarLi"><a href="images/1.jpg"><img src="images/tmb/1-tmb.JPG" /></a></li>
		<li class="jCarLi"><a href="images/2.jpg"><img src="images/tmb/2-tmb.JPG"  /></a></li>
		<li class="jCarLi"><a href="images/3.jpg"><img src="images/tmb/3-tmb.JPG"  /></a></li>
		<li class="jCarLi"><a href="images/4.jpg"><img src="images/tmb/4-tmb.JPG" /></a></li>
		<li class="jCarLi"><a href="images/5.jpg"><img src="images/tmb/5-tmb.JPG"  /></a></li>
		<li class="jCarLi"><a href="images/6.jpg"><img src="images/tmb/6-tmb.JPG"  /></a></li>
		<li class="jCarLi"><a href="images/7.jpg"><img src="images/tmb/7-tmb.JPG"  /></a></li>
		<li class="jCarLi"><a href="images/8.jpg"><img src="images/tmb/8-tmb.JPG" /></a></li>
		<li class="jCarLi"><a href="images/9.jpg"><img src="images/tmb/9-tmb.JPG"  /></a></li>
		<li class="jCarLi"><a href="images/10.jpg"><img src="images/tmb/10-tmb.JPG"  /></a></li>
		<li class="jCarLi"><a href="images/11.jpg"><img src="images/tmb/11-tmb.JPG"  /></a></li>
	</ul>
</div>

В head частта добавяме и необходимия скрипт за зареждане на jCarouselLite:

<script type="text/javascript">
		$(window).load(function() {
			$("#gallery").css("visibility","visible");
			$(".jCarouselLite").jCarouselLite({
				auto: 800,
				speed: 3000,
				visible: 4
			});
		});
</script>

Остава единствено уеднаквяване на изображенията вътре в HTML-а, например:

.jCarouselLite {
	overflow: hidden;
	visibility: visible;
	position: absolute;
	z-index: 2;
	left: 0px;
}
 
.jCarLi {
	overflow: hidden;
	float: left;
	height: 140px;
	width: 197px;
}
 
.thumbsMini img {
	width: 120px;
	height: 80px;
}
 
.thumbsMed img {
	width: 150px;
	height: 100px;
}
 

Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • MySpace
  • Slashdot
  • Technorati
  • TwitThis
del.icio.us Digg DZone Facebook Google Google Reader Magnolia reddit SlashDot Technorati ReadMe.ru Dobavi.com Dao.bg Lubimi.com Ping.bg Pipe.bg Svejo.net Web-bg.com

Безподобния пост.

Related posts brought to you by Yet Another Related Posts Plugin.

Comments

12 Responses to “Лек и гъвкъв слайдер на изображения jCarousel Lite”

  1. Ицката on August 26th, 2009 10:45

    Лек, лек - колко да е лек :)

    Такава функционалност дето си вкарал във въпросния сайт с помощта на тоя плъгин, същото нещо съм го написал за новия портал който печем във нашата фирма, полвайки само jquery фреймуърка, и то с 20-ина реда код, не повече :) Живи и здрави да пуснем някога портала :) и ще пратя линк.

    Незнам, аз нещо не съм фен на jCarousel. В смисъл, ако търсиш някаква простичка анимация, като твоята, малко писане на код ти върши същата работа, а пестиш от килобайти, и не само.

    В един наш портал - http://affutd.com/ - колегите ползваха jCarousel за ротацията на брандовете (карето Our Brands, най-долу, вляво). Леле, щех да припадна като видях колко маса килобайти са изсипали за една проста анимация :) Направих същата фунцкионалност точно с 20 реда код, без каросела. Ефекта е същия :)

  2. Acnapyx on August 26th, 2009 11:19

    Една бележка - като човек, който редовно използва IE6, да кажа, че вече за 50-ти път попадам на сайтове с jCarousel, които ми докарват жабоскрипта до infinite loop, лекуващ се само с затваряне на браузъра. Може да е и до особеностите на реализацията в конкретните сайтове, но малко ме съмнява.

  3. admin on August 26th, 2009 15:54

    @Ице, ами 2К е джиджафката, колко да е - нали е Lite версията, все пак не е пълният jCarousel, който е далеч по дебел :) Реално пак са 50-тина реда код и то с 'разширения' вариант. Според мен е добро решение и не си заслужава да се пише custom, като работи добре.

    @Паро, този вариант в сайта по-горе гърми ли ти? Аз имам IE6 и при мен работи перфектно.

  4. tL_ on August 26th, 2009 17:37

    в jquery.tools си има всичко, дето ти требе за такваз галерия. аз ползвам ... хм...чакай да го намеря в кода ...а, ето (ще се намаже, ако можеш оправи го, или го затрий :) ):

    // execute your scripts when DOM is ready. this is a good habit
    $(document).ready(function() {

    // initialize scrollable
    $("div.scrollable").scrollable({
    size: 3,
    items: '#thumbs',
    hoverClass: 'hover'
    });

    });

    < ?php
    break;
    .....

    после имаш просто:

    и ти си човека :)

    е, да, всеки имидж требе да си има rel атрибут, ама поне ти спестява един плъгин :)

  5. tL_ on August 26th, 2009 17:38

    мда....омаза се повече, отколкото очаквах :) проклет WordPress, маха не само таговете, ами и всичко в тях.... :( anyway, ако ти е интересно, драсни, ще ти пратя кода :P

  6. tL_ on August 26th, 2009 17:40

    Асп, в името на всичко свято, ЗАЩО ползваш ИЕ6, защоооооо :(

  7. Ицката on August 26th, 2009 20:19

    Човека не го ползва, а тества. Има разлика.

    Все още доста лузъри (user = looser :-) ) ползват ИЕ 6. Според осреднени данни от визити по мои сайтове, ИЕ 6 полват 15% от посетителите - не са за пренебрегване.

    Марио, гледах го при мене е 14 килобайта тоз плъгин. Но беше в raw формат :-) ако обфускиран е 2 килобайта, екстра :-)

  8. admin on August 26th, 2009 22:11

    Ице, минифайд е ~2300 символа, което си е към 2 килобайта. Fair enough :) Макар че решението на tL_ да ми изглежда абсолютно същото, но с tools. Нямам много опит с jQuery и не съм сигурен кое е в пакета и кое - не, така че не зная и дали не ползвам някоя орязана версия (без включени тези tools). Честно казано, мислех да го разцъкам по-сериозно за този проект, но се оказа, че имам около ден и половина за 80% от проекта и те тека.

    П.С. Ако не се лъжа, Паро си ползваше IE6 по принцип, а не само за тестване...

  9. Ицката on August 26th, 2009 22:20

    Аха, Асп = Аспарух. Сега зацепих. Аз си мислех че тъЛъ говореше на тебе Марио :-) Whatever..

  10. admin on August 26th, 2009 22:33

    Аз бих го разкарал с удоволствие, но трябва да се тества, няма как. Яд ме е само, че допринасям за статистиката на IE6 и преча да падне под 1%, когато вече официално ще спре да се поддържа.

  11. Acnapyx on August 29th, 2009 2:33

    Ако започна да обяснявам защо ползвам IE6, сигурен съм, че шъ ми съ смейти. :) Както и да е, причините поред:

    1. Ползвам надстройка (Maxthon), която разчита на ядрото на IE. Настроена, натъпкана с екстри и оптимизирана, доколкото е възможно по моя вкус, включително и с mouse gestures. Това отговаря на въпроса защо IE, макар че има и още. И не ми обяснявайте, че мога да накарам FF да прави същото - пробвал съм достатъчно, резултатът не ме удовлетворява.

    2: Защо точно IE6: защото съм на лаптоп и IE7 ми заковава throttling-а на 800 MHz, под които отказва да слиза, докато с IE6 си кара на 360 MHz. Разликата в живота на батерията да я обяснявам ли, или се сещате и сами? Дреме ми как ще показва съдържанието и дали поддържа стандартите, ако ми трябва самото съдържание; когато тествам сайтове и дизайни, тогава се терзая и с други браузъри. Не съм толкова тревопасен, просто предпочитам да не се усложнявам.

    И да, за тези, които обичат да се пенявят на тази тема и да водят браузърни войни - да, имам и Opera, която не ми понася за редовна употреба -плюс Firefox (2.x, за съжаление), на който ми е администрацията на сайта, с която се налага да работя. Така че алтернативите ми не са кой знае колко... :) Разделил съм си работата между двата - и така ми е удобно.

    Проблемът с jCarousel не е само с IE, но все тая...

  12. Ангел on July 29th, 2010 10:02

    Здравей,

    В този пост http://peshev.net/blog/lek-i-gavkav-slayder-na-izobrajeniya-jcarousel-lite/ последния коментар е някакъв спам или поне аз като видя циалис и всичко свързано с тази дума го приемам за спам. Нищо чудно да имаш и други подобни коментари и затова ти пиша ако имаш желание да си ги изчистиш.

    Успех

    p.s. Пробвах да ти пиша от контактната форма но нещо ми зацикляше и не успяваше да изпрати въобщението.

Leave a Reply