jQuerytools Scrollable és Fancybox Galéria

A jquerytools.org egy a legfontosabb építő elemként tünteti fel magát a modern weboldalak működéséhez. Ennek a gyűjteménynek van egy úgynevezett scrollable eszköze, amely divek görgetését hivatott elvégezni, horizontális vertikális irányban, illetve a jquerytools további eszközeivel egyéb érdekes megoldások elkészítésére is alkalmas. Egy projektemben azonban ezt a görgető elemet kellett összehoznom, a Fancybox Galériával.

Az alapfeltevés, hogy a scrollable-ben a diveket egyesével szeretnénk mozgatni jobbra illetve balra és mindezt automatikusan körbe azaz circular paramétert true-ra állítva. Mivel egyszerre egy divet és nem egy teljes nézetet(3-4 divet ami egyszerre látszik) szeretnénk mozgatni ezért a weben található clone módszerrel oldjuk ezt meg:

$featured = $("#scrollable_1").scrollable({circular: true, mousewheel: true}).autoscroll({
interval: 6000});
$featured.each(function() {
var $itemsToClone = $(this).scrollable().getItems().slice(1);
var $wrap = $(this).scrollable().getItemWrap();
var clonedClass = $(this).scrollable().getConf().clonedClass;
$itemsToClone.each(function() {
$(this).clone(true).appendTo($wrap).addClass(clonedClass + ' hacked-' + clonedClass);
});
});
});

Lássuk ennek mi a következménye:

Alapjában véve lesz egy blokkunk amiben benne vannak a divek:

<div id="scrollable_1">
<div class="items">
<div class="slide">...</div>
<div class="slide">...</div>
<div class="slide">...</div>
</div>
</div>

Ha a circular paramétert true-ra állítjuk akkor ez a következőképpen módosul ($(“#scrollable_1”).scrollable({circular: true})):

<div id="scrollable_1">
<div class="items">
<div class="slide cloned">...</div>
<div class="slide">...</div>
<div class="slide">...</div>
<div class="slide">...</div>
<div class="slide cloned">...</div>
</div>
</div>

Mivel egyesével mozgatjuk őket és nem egyszerre az összes láthatót, jobbra vagy balra a fenti hacked következménye ($featured.each(function() { var $itemsToClone = $(this).scrollable().getItems().slice(1); …):

<div id="scrollable_1">
<div class="items">
<div class="slide cloned">...</div>
<div class="slide">...</div>
<div class="slide">...</div>
<div class="slide">...</div>
<div class="slide cloned">...</div>
<div class="slide cloned-hacked">...</div>
<div class="slide cloned-hacked">...</div>
</div>
</div>

Azaz a kiinduló eredeti 3 divünkből lett 7 db. Ez így magában nem is lenne probléma. De mi a Fancyboyx Galériát használjuk, amit a divekben található képekre akarunk meghívni CSS class alapján rel=”g1″-vel pedig csoportokba foglaljuk ezen képeinket. Nyílván a különböző csoportok eléréshez különböző rel=”” érték szükséges. Azonban a fenti mahinációk és változtatások hatására, lesznek olyan képi elemek amelyek többször szerepelnek, a csoportjuk ugyanaz, azaz előfrodulnak olyan div elemek, amelyeknek képei 2-3-szor is szerepelnek a galériában. Ez így elég zavaró lehet, mert 2-3 kép helyett 4-9 vagy még több kép szerepel majd a galériában.

Mi a megoldás?

Egy lehetséges megoldás ennek kiküszöbölése, úgy hogy a cloned és a cloned-hacked CSS classal rendelkező diveknél a rel=”” értékét módosítjuk:
...
var $itemwrap = $(this).scrollable().getItemWrap();
var rels = "";
$itemwrap.find('div.cloned, div.hacked-cloned').each(function(){
if($(this).hasClass('cloned')){
var oldrel = $(this).find('a.group').attr('rel');
$(this).find('a.group').attr('rel', oldrel+String('-cloned'));
$(this).find('a.show_galery').attr('onclick', '$("a.group[rel='+oldrel+String('-cloned')+']:first").trigger("click");');
}
if($(this).hasClass('cloned-hacked')){
var oldrel = $(this).find('a.group').attr('rel');
$(this).find('a.group').attr('rel', oldrel+String('-cloned-hacked'));
$(this).find('a.show_galery').attr('onclick', '$("a.group[rel='+oldrel+String('-cloned-hacked')+']:first").trigger("click");');
}
});
...

Ezzel a megoldással a képek a cloned és hacked diveken belül más és más csoportokba kerülnek. Ha ezután meghívjuk a Fancybox Galériát, akkor már minden divhez csak a saját képei tartoznak és a galériákban nem lesz kép ismétlődés. A galériánkhoz tartozhat egy link amire kattintva is elindítható a galéria. A fenti probléma miatt a trigger eseménynél meg kell változtatni, hogy mely képre kattintva hívódjon meg a galéria. A fenti példában itt egy onclick eseményre hívódik meg a divhez tartozó galéria.

Advertisements

Vélemény, hozzászólás?

Adatok megadása vagy bejelentkezés valamelyik ikonnal:

WordPress.com Logo

Hozzászólhat a WordPress.com felhasználói fiók használatával. Kilépés / Módosítás )

Twitter kép

Hozzászólhat a Twitter felhasználói fiók használatával. Kilépés / Módosítás )

Facebook kép

Hozzászólhat a Facebook felhasználói fiók használatával. Kilépés / Módosítás )

Google+ kép

Hozzászólhat a Google+ felhasználói fiók használatával. Kilépés / Módosítás )

Kapcsolódás: %s