' + comment + '

/** * * JavaScript knihovna s metodami pro práci s obrázky * * @package sllibs3 * @subpackage jslibs * @version $Id: sl.image.js 11331 2009-08-21 14:40:14Z michal $ * @encoding UTF-8 * @author Michal Kouďa * @copyright (c) e4you spol. s r.o. 2002-2008, * * Obsah tohoto souboru je majetkem e4you spol. s r.o. Jeho kopírování, * pozměňování, šíření a jakékoli další využití je možné výhradně * se souhlasem e4you spol. s r.o. * */ /// pokud neexistuje jmenný prostor sl. vytvoříme ho if(!sl) { var sl = {} }; /// definujeme modul a jeho metody sl.image = { /** * Objekt s plnou verzí obrázku * * @var object */ full_size_box: null, /** * Plná verze obrázku * * @var object */ image_object: null, /** * Objekt s křížkem pro zavření obrázku * * @var object */ close_object: null, /** * Identifikátor intervalu pro posun náhledů v kompaktní galerii * * @var object */ thumbs_move_interval: null, /** * Čas (v milisekundách), po kterém proběhne ztmavení mizejícího obrázku * @var integer */ dimming_time: 100, /** * Krok o který bude ztmaven, mizející obrázek * @var float */ dimming_step: 0.3, /** * Čas (v milisekundách), po kterém proběhne jeden krok změny průhlednosti obrázku * @var integer */ opacity_time: 100, /** * Krok o který bude průhlednost změněna * @var float */ opacity_step: 0.3, /** * Zobrazí náhled obrázku, jehož jméno je předáno jako parametr * @param string jméno obrázku který chceme zobrazit * @param string popis obrázku */ preview: function (picture, comment) { try { if(this.previewWindow) { this.previewWindow.close(); } } catch (error) {} this.previewWindow = window.open('','picturedetail','resizable=no,location=no,status=no,scrollbars=no'); with(this.previewWindow) { document.open(); document.write('\n\n\t' + comment + '\n\t\n\n'); document.write(''); document.write('

' + comment + '

'); if(comment) { document.write('

' + comment + '

\n'); } document.write('\n\n'); document.close(); if(document.images[0]) { document.images[0].onload = function () { var document_width = document.images[0].width + 20; var document_height = document.images[0].height + 40; if(comment) { document_height += 16; } resizeTo(document_width, document_height); } document.images[0].onload(); } focus(); } }, /** * Nastaví obrázkům v rámci předaného objektu událost onclick, * která otevře plnou verzi obrázku * * @param object_id string Css id elementu, v jehož rámci vyhledáme obrázky * @param baseuri string Baseuri * @param thumbs_dir string Adresář s náhledy obrázků * @param full_size_dir strint Adresář s plnými verzemi obrázků */ initFullSizePreview: function(object_id,baseuri,thumbs_dir,full_size_dir) { try { /// zjistíme, jestli je předán adresář s náhledy a plnými velikostmi obrázků, jinak nastavíme defaultní hodnoty thumbs_dir = thumbs_dir ? thumbs_dir : 'thumbs'; full_size_dir = full_size_dir ? full_size_dir : 'full-size'; /// regulární výraz, jehož pomocí identifikujeme obrázky, které se mají otevřít v novém okně /// jsou to obrázky uložené v předaném adresáři s náhledy image_regexp = thumbs_dir+'/([0-9a-z-]+\.[a-z]{3})'; /// zjistíme si obrázky obsažené v předaném elementu object_images = sl.dom.getElement(object_id).getElementsByTagName('IMG'); /// projdeme je a pokud vyhovují regulárnímu výrazu, nastavíme jim událost onclick for (var i=0;i "; sl.full_size_box.innerHTML += '

' + description + '

\n'; sl.full_size_box.innerHTML += "

"; /// zjistíme vlastnosti obrázku a 'křížku' pro zavření obrázku sl.image.image_object = sl.full_size_box.getElementsByTagName('IMG')[0]; var new_image = new Image(); new_image.onload = function() { sl.image.setFullSizeBox() }; new_image.src = image_src; }, /** * Nastaví atributy elementu pro zobrazení plné verze obrázku */ setFullSizeBox: function () { if (sl.full_size_box) { sl.full_size_box.style.width = (sl.image.image_object.width+30)+'px'; sl.full_size_box.style.padding = '15px'; //sl.full_size_box.style.height = (sl.image.image_object.height+20)+'px'; /// pozicujeme podle aktuální velikosti a offsetu okna var size = sl.getBrowserWindowSize(); var scroll_position = sl.getBrowserScrollPosition(); var left_position = ((size.width/2)-sl.image.image_object.width/2)+scroll_position.x; sl.full_size_box.style.left = left_position+"px"; var top_position = (size.height/5) + scroll_position.y; sl.full_size_box.style.top = top_position+"px"; /// přidáme 'obálce' drag&drop sl.dragAndDrop.initElement(sl.full_size_box); /// nastavíme nad obrázkem a křížkem kurzor 'ruku' a na kliknutí událost - zavření obrázku sl.image.close_object = sl.dom.getElement('slImageClose', window.top.document); sl.image.close_object.onclick = sl.image.hideImage; sl.image.close_object.style.cursor = 'pointer'; sl.image.image_object.onclick = sl.image.hideImage; sl.image.image_object.style.cursor = 'pointer'; /// zobrazíme sl.full_size_box.style.display = 'block'; sl.full_size_box.style.visibility = 'visible'; } }, /** * Skryje plnou verzi obrázku * * @todo udělat variantně skrytí pomocí "stmívání" a bez něj */ hideImage: function () { if (sl.full_size_box) { /// @todo část kódu pro skrytí objektu pomocí průhlednosti - vytvořit novou knihovnu sl.effect a přesunout do ní sl.full_size_box.style.opacity = '1'; var dimming_interval = setInterval(function() { if (sl.full_size_box.style.opacity <= 0) { clearInterval(dimming_interval); sl.full_size_box.style.display = 'none'; } sl.full_size_box.style.opacity = (sl.full_size_box.style.opacity - sl.image.dimming_step) }, sl.image.dimming_time); } }, /** * Načte obrázek pro zobrazení v kompaktní galerii a zobrazí ho * * @param src string Cesta k obrázku */ showCompactGalleryImage: function(src) { /// načteme nový obrázek, abychom mohli zjistit jeho vlastnosti var new_image = new Image(); /// je-li zcela načten, zavoláme funkci, která ho zobrazí new_image.onload = function() { sl.image.setCompactGalleryImage(new_image) }; /// tím, že src nastavíme až po onload zamezíme načítání obrázku z cache a problémům s IE 7 new_image.src = src; }, /** * Zobrazí obrázek, předaný jako parametru, v kompaktní galerii * Před zobrazením přizpůsobí jeho velikost oknu * * @param new_image object Objekt s obrázkem, který se má zobrazit */ setCompactGalleryImage: function(new_image) { /// objekt s aktuálně zobrazeným obrázkem, který budeme nahrazovat za nový var current_image = sl.dom.getElement('compact_gallery_main_image') var image_window = sl.dom.getElement('compact_gallery_full_size'); var opacity_interval = null; /// aktuální průhlednost var current_opacity = 0; /// pro IE if (current_image.style.filter!=undefined) { current_image.style.filter = 'alpha(opacity=0)'; /// pro slušné prohlížeče } else { current_image.style.opacity = current_opacity; } /// pokud se obrázek nevejde do zobrazovacího rámce, upravíme jeho velikost if ( (new_image.height > image_window.offsetHeight) || (new_image.width > image_window.offsetWidth) ) { /// je-li šířka větší než výška nebo je výška obrázku menší než výška okna if (new_image.width>=new_image.height || new_image.height <=image_window.offsetHeight) { /// nastavíme šířku podle okna a dopočítáme výšku new_image.height = Math.round(image_window.offsetWidth*(new_image.height/new_image.width)); new_image.width = image_window.offsetWidth; } else { /// jinak nastavíme výšku podle okna a dopočítáme šířku new_image.width = Math.round(image_window.offsetHeight*(new_image.width/new_image.height)); new_image.height = image_window.offsetHeight; } } /// aktualizujeme velikost stávajícího obrázku current_image.style.height = new_image.height+'px'; current_image.style.width = new_image.width+'px'; current_image.src = new_image.src; clearInterval(opacity_interval); /// spustíme anonymní funkci, která zajistí přechod od nulové do plné průhlednosti /// @todo - část kódu pro skrytí objektu pomocí průhlednosti - vytvořit novou knihovnu sl.effect a přesunout do ní opacity_interval = setInterval(function() { /// pokud jsme dosáhli plné viditelnosti if (current_opacity >= 1) { /// zastavíme provádění funkce clearInterval(opacity_interval); } /// průhlednost 0-1 (používá vše kromě IE) current_opacity = current_opacity + sl.image.opacity_step; /// pro IE if (current_image.style.filter!=undefined) { current_image.style.filter = 'alpha(opacity=' + (current_opacity * 100) + ')'; /// pro slušné prohlížeče } else { current_image.style.opacity = current_opacity ; } }, sl.image.opacity_time); }, /** * Provede posunutí náhledů v kompaktní galerii * * @param direction string Určuje směr posunu (left|right) */ moveThumbs: function(direction) { /// vytvoříme objekt s dom elementem, maskujícím náhledy var preview_box = sl.dom.getElement('compact_gallery_preview'); /// vytvoříme objekt s dom elementem, který budeme posouvat, obsahujícím náhledy var thumbs_box = sl.dom.getElement('compact_gallery_thumbs'); /// sečteme šírku všechn náhledů a tak zjistíme jejich celkovou šírku /// @todo - ještě bychom měli započítávat margin var thumbs_width = 0; var thumbs = thumbs_box.getElementsByTagName('IMG'); for (var i=0 ; i= thumbs_width - preview_box.offsetWidth*thumbs_width/(0.028*(thumbs[1].offsetWidth))) && (counter >=0)){ clearInterval(sl.image.thumbs_move_interval); } else { counter = counter + 4; } } thumbs_box.style.left = counter+'px'; }, 30); }, /** * Zastaví posouvání náhledů v kompaktní galerii * */ stopThumbs: function() { clearInterval(sl.image.thumbs_move_interval); } }