Oldal: 1 / 2 12 UtolsóUtolsó
Eredmény: 1 - 10 (20) összesen

Téma: Lytebox

  1. #1
    Tag
    Csatlakozott
    10-09-06
    Hozzászólás
    53
    Begyűjtött 0 köszönetet
    0 hozzászólásával

    Alapbeállítás Lytebox

    Sziasztok!

    Egy olyan kérdésem, lenne, hogy a lytebox nem akar működni a honlapomon.

    A honlap felépítése:
    index.php
    Kód:
    <?php
    error_reporting(E_ALL & ~E_NOTICE);
    header("Content-Type: text/html; charset=utf-8");
    
    require_once("lib/head.class.php");
    //require_once("lib/init.php");
    session_start();
    $_SESSION['url'] = $_SERVER['REQUEST_URI'];
    
    require_once("header.php");
    
    echo "<body>
       <div align='center'>
          <div id='container1' style='background: url(../images/backgrounds/bg.jpg);'>
    
    <!-- Admin menü -->
             <div id='admin'>
             </div>
    
    <!-- Főmenü -->
             <div id='menu'>";
    include_once("lib/menu.php");
    echo "         </div>
    
    <!-- Tartalom -->
             <div id='tartalom'>
             </div>
             <div class='loading' style='display: none; position: relative; top: 385px; left: -3px;' align='center'>
                <img src='../images/loader.gif'>
             </div>
          </div>
       </div>
    
    </body>
    </html>";
    ?>
    A head.class.php, illetve a head.php hozzák létre a <head></head> részt.
    A böngésző által kapott kód:
    Kód:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    ...
       <link href="js/lytebox.css" rel="stylesheet" type="text/css" media="screen">
       <script src="js/jquery.min.js" type="text/javascript"></script>
       <script src="js/lytebox.js" type="text/javascript"></script>
    ...
    </head>
    A képfeltöltésnél van perpillanat probléma, amit ajax vezérel.
    A form:
    Kód:
    ...    
        $borderdata = "<script type='text/javascript' src='admin/scripts/ajaxupload.js'></script>
       <div id='left_col'>
          <fieldset>
             <legend>Standard Use</legend>
             <form action='/admin/scripts/ajaxupload.php?filename=name&amp;maxW=800&amp;fullPath=".$config['site']['url']."galeria/".$todo."/&amp;relPath=../../galeria/".$todo."/&amp;colorR=0&amp;colorG=0&amp;colorB=0&amp;maxH=600&amp;path=".$todo."/' method='post'>
                <input type='file' name='name'>
                <button onclick=\"ajaxUpload(this.form,'/admin/scripts/ajaxupload.php?filename=name&amp;maxSize=9999999999&amp;maxW=800&amp;fullPath=".$config['site']['url']."galeria/".$todo."/&amp;relPath=../../galeria/".$todo."/&amp;colorR=0&amp;colorG=0&amp;colorB=0&amp;maxH=600&amp;path=".$todo."/','upload_area','Kép feltöltése folyamatban...&lt;br /&gt;&lt;img src=\'images/loader_light_blue.gif\' border=\'0\' /&gt;','&lt;img src=\'images/error.gif\' border=\'0\' /&gt; Error in Upload, check settings and path info in source code.'); return false;\" type='button' class='admin'>Kép feltöltése</button>
             </form>
          </fieldset>
       </div>
       <div id='upload_area' style='height: 150px;'></div>";
    }
    ...
    És a scriptek, amik vezérlik:
    js:
    Kód:
    function $m(theVar){
        return document.getElementById(theVar)
    }
    function remove(theVar){
        var theParent = theVar.parentNode;
        theParent.removeChild(theVar);
    }
    function addEvent(obj, evType, fn){
        if(obj.addEventListener)
            obj.addEventListener(evType, fn, true)
        if(obj.attachEvent)
            obj.attachEvent("on"+evType, fn)
    }
    function removeEvent(obj, type, fn){
        if(obj.detachEvent){
            obj.detachEvent('on'+type, fn);
        }else{
            obj.removeEventListener(type, fn, false);
        }
    }
    function isWebKit(){
        return RegExp(" AppleWebKit/").test(navigator.userAgent);
    }
    function ajaxUpload(form,url_action,id_element,html_show_loading,html_error_http){
        var detectWebKit = isWebKit();
        form = typeof(form)=="string"?$m(form):form;
        var erro="";
        if(form==null || typeof(form)=="undefined"){
            erro += "The form of 1st parameter does not exists.\n";
        }else if(form.nodeName.toLowerCase()!="form"){
            erro += "The form of 1st parameter its not a form.\n";
        }
        if($m(id_element)==null){
            erro += "The element of 3rd parameter does not exists.\n";
        }
        if(erro.length>0){
            alert("Error in call ajaxUpload:\n" + erro);
            return;
        }
        var iframe = document.createElement("iframe");
        iframe.setAttribute("id","ajax-temp");
        iframe.setAttribute("name","ajax-temp");
        iframe.setAttribute("width","0");
        iframe.setAttribute("height","0");
        iframe.setAttribute("border","0");
        iframe.setAttribute("style","width: 0; height: 0; border: none;");
        form.parentNode.appendChild(iframe);
        window.frames['ajax-temp'].name="ajax-temp";
        var doUpload = function(){
            removeEvent($m('ajax-temp'),"load", doUpload);
            var cross = "javascript: ";
            cross += "window.parent.$m('"+id_element+"').innerHTML = document.body.innerHTML; void(0);";
            $m(id_element).innerHTML = html_error_http;
            $m('ajax-temp').src = cross;
            if(detectWebKit){
                remove($m('ajax-temp'));
            }else{
                setTimeout(function(){ remove($m('ajax-temp'))}, 250);
            }
        }
        addEvent($m('ajax-temp'),"load", doUpload);
        form.setAttribute("target","ajax-temp");
        form.setAttribute("action",url_action);
        form.setAttribute("method","post");
        form.setAttribute("enctype","multipart/form-data");
        form.setAttribute("encoding","multipart/form-data");
        form.submit();
        if(html_show_loading.length > 0){
            $m(id_element).innerHTML = html_show_loading;
        }
    }
    php:
    Kód:
    ...
    <?php
    if($imgUploaded){
    	echo "<img src='images/success.gif' border='0' style='marin-bottom: -4px;'> Sikeres feltöltés!<br><a href='galeria/images/".$upload_image."' rel='lytebox'><img src='galeria/images/thumb/thumb_".$upload_image."' border='0' width='128' height='128'></a>";
    }else{
    	echo "<img src='images/error.gif' border='0' style='marin-bottom: -3px;' /> Hibás feltöltés: ";
    	foreach($errorList as $value){
        		echo $value.", ";
    	}
    }
    ?>
    Szépen feltöltődik a kép, megjelenik a thumb, viszont ha rákattintok, akkor a képet a főoldalon nyitja meg a lytebox használata nélkül....

    Mi lehet a gond? (Az oldal betöltéseket mind ajax végzi)



  2. #2
    Music Addict speeedfire logója
    Csatlakozott
    10-05-19
    Hely
    Győr
    Hozzászólás
    446
    Begyűjtött 0 köszönetet
    0 hozzászólásával

    Alapbeállítás re: Lytebox

    Ff alatt a firebug-al nézd meg, ilyenkor általában nem tölti be a pluginokat.



  3. #3
    Rubyist Geri logója
    Csatlakozott
    07-12-15
    Hely
    \x90
    Hozzászólás
    5.607
    Begyűjtött 1.334 köszönetet
    829 hozzászólásával

    Alapbeállítás re: Lytebox

    Idézet thelol eredeti hozzászólása Hozzászólás megtekintése

    Mi lehet a gond? (Az oldal betöltéseket mind ajax végzi)
    mivel a lytebox-ot akkor inicializálod amikor még ezek a képek nincsenek a DOM-ban így nem tudja rárakni a képekre az event-et.

    Kód:
    initLytebox();
    ezt hívd meg minden ajax kérés végén, amikor a képek már bekerültek a DOM-ba és elvileg jó lesz.


    Utoljára módosítva: Geri által : 2010-09-26 16:56
    If debugging is the process of removing software bugs, then programming must be the process of putting them in.
    Github Rake tutorial
    Give a man a fish and you feed him for a day. Teach a man to fish and you feed him for a lifetime.
    Respect all, fear none

  4. #4
    Tag
    Csatlakozott
    10-09-06
    Hozzászólás
    53
    Begyűjtött 0 köszönetet
    0 hozzászólásával

    Alapbeállítás re: Lytebox

    A FireBug szerint be van töltve a lytebox.js.... Kipróbáltam, az initLytebox();
    parancsot.... Megpróbáltam a jsbe is beszúrni, illetve megpróbáltam a képet kirakó php scriptbe benyomni.... de ugyan az az eredmény...
    Kód:
    <?php
    if($imgUploaded){
    	echo "<img src='images/success.gif' border='0' style='marin-bottom: -4px;'> Sikeres feltöltés!<br>
    <a href='galeria/".$_SESSION['path'].$upload_image."' rel='lytebox'><img src='galeria/".$_SESSION['path']."/thumb/thumb_".$upload_image."' border='0' width='128' height='128'></a>
    <script>
    initLytebox();
    </script>";
    }else{
    	echo "<img src='images/error.gif' border='0' style='marin-bottom: -3px;' /> Hibás feltöltés: ";
    	foreach($errorList as $value){
        		echo $value.", ";
    	}
    }
    ?>
    Próbáltam az <img> elé is tenni...



  5. #5
    Rubyist Geri logója
    Csatlakozott
    07-12-15
    Hely
    \x90
    Hozzászólás
    5.607
    Begyűjtött 1.334 köszönetet
    829 hozzászólásával

    Alapbeállítás re: Lytebox

    Idézet thelol eredeti hozzászólása Hozzászólás megtekintése
    A FireBug szerint be van töltve a lytebox.js.... Kipróbáltam, az initLytebox();
    parancsot.... Megpróbáltam a jsbe is beszúrni, illetve megpróbáltam a képet kirakó php scriptbe benyomni.... de ugyan az az eredmény...
    Kód:
    <?php
    if($imgUploaded){
    	echo "<img src='images/success.gif' border='0' style='marin-bottom: -4px;'> Sikeres feltöltés!<br>
    <a href='galeria/".$_SESSION['path'].$upload_image."' rel='lytebox'><img src='galeria/".$_SESSION['path']."/thumb/thumb_".$upload_image."' border='0' width='128' height='128'></a>
    <script>
    initLytebox();
    </script>";
    }else{
    	echo "<img src='images/error.gif' border='0' style='marin-bottom: -3px;' /> Hibás feltöltés: ";
    	foreach($errorList as $value){
        		echo $value.", ";
    	}
    }
    ?>
    Próbáltam az <img> elé is tenni...

    most látom hogy van erre hivatalos megoldás:

    Kód:
    myLytebox.updateLyteboxItems();
    de az ajax befejeződése után hívd meg a javascriptben.



  6. #6
    Tag
    Csatlakozott
    10-09-06
    Hozzászólás
    53
    Begyűjtött 0 köszönetet
    0 hozzászólásával

    Alapbeállítás re: Lytebox

    Nem jön össze... Hogy tudom az ajax befejeződése után meghívni?
    Próbáltam az .ajaxComplete();, illetve simán az ajax script végére beszúrni is...
    Kód:
    function $m(theVar){
    	return document.getElementById(theVar)
    }
    function remove(theVar){
    	var theParent = theVar.parentNode;
    	theParent.removeChild(theVar);
    }
    function addEvent(obj, evType, fn){
    	if(obj.addEventListener)
    	    obj.addEventListener(evType, fn, true)
    	if(obj.attachEvent)
    	    obj.attachEvent("on"+evType, fn)
    }
    function removeEvent(obj, type, fn){
    	if(obj.detachEvent){
    		obj.detachEvent('on'+type, fn);
    	}else{
    		obj.removeEventListener(type, fn, false);
    	}
    }
    function isWebKit(){
    	return RegExp(" AppleWebKit/").test(navigator.userAgent);
    }
    function ajaxUpload(form,url_action,id_element,html_show_loading,html_error_http){
    	var detectWebKit = isWebKit();
    	form = typeof(form)=="string"?$m(form):form;
    	var erro="";
    	if(form==null || typeof(form)=="undefined"){
    		erro += "The form of 1st parameter does not exists.\n";
    	}else if(form.nodeName.toLowerCase()!="form"){
    		erro += "The form of 1st parameter its not a form.\n";
    	}
    	if($m(id_element)==null){
    		erro += "The element of 3rd parameter does not exists.\n";
    	}
    	if(erro.length>0){
    		alert("Error in call ajaxUpload:\n" + erro);
    		return;
    	}
    	var iframe = document.createElement("iframe");
    	iframe.setAttribute("id","ajax-temp");
    	iframe.setAttribute("name","ajax-temp");
    	iframe.setAttribute("width","0");
    	iframe.setAttribute("height","0");
    	iframe.setAttribute("border","0");
    	iframe.setAttribute("style","width: 0; height: 0; border: none;");
    	form.parentNode.appendChild(iframe);
    	window.frames['ajax-temp'].name="ajax-temp";
    	var doUpload = function(){
    		removeEvent($m('ajax-temp'),"load", doUpload);
    		var cross = "javascript: ";
    		cross += "window.parent.$m('"+id_element+"').innerHTML = document.body.innerHTML; void(0);";
    		$m(id_element).innerHTML = html_error_http;
    		$m('ajax-temp').src = cross;
    		if(detectWebKit){
            	remove($m('ajax-temp'));
            }else{
            	setTimeout(function(){ remove($m('ajax-temp'))}, 250);
            }
        }
    	addEvent($m('ajax-temp'),"load", doUpload);
    	form.setAttribute("target","ajax-temp");
    	form.setAttribute("action",url_action);
    	form.setAttribute("method","post");
    	form.setAttribute("enctype","multipart/form-data");
    	form.setAttribute("encoding","multipart/form-data");
    	form.submit();
    	if(html_show_loading.length > 0){
    		$m(id_element).innerHTML = html_show_loading;
    	}
    		myLytebox.updateLyteboxItems();
    }




  7. #7
    Rubyist Geri logója
    Csatlakozott
    07-12-15
    Hely
    \x90
    Hozzászólás
    5.607
    Begyűjtött 1.334 köszönetet
    829 hozzászólásával

    Alapbeállítás re: Lytebox

    Idézet thelol eredeti hozzászólása Hozzászólás megtekintése
    Nem jön össze... Hogy tudom az ajax befejeződése után meghívni?
    Próbáltam az .ajaxComplete();, illetve simán az ajax script végére beszúrni is...
    hát, itt az a helyzet, hogy ez minden csak nem ajax. ahogy látom egy iframet csinálsz a form köré és úgy küldöd el a tartalmat. így az iframe tartalma ahonnan jön oda kellene berakni a lytebox-ot.



  8. #8
    Tag
    Csatlakozott
    10-09-06
    Hozzászólás
    53
    Begyűjtött 0 köszönetet
    0 hozzászólásával

    Alapbeállítás re: Lytebox

    Az ajaxupload.php generálja az iframe . Oda is próbáltam beszúrni a parancsot...

    Kód:
    ...
    if($imgUploaded){
    	echo "<script>myLytebox.updateLyteboxItems();</script>";
    	echo "<img src='images/success.gif' border='0' style='marin-bottom: -4px;'> Sikeres feltöltés!<br>
    <a href='galeria/".$_SESSION['path'].$upload_image."' rel='lytebox'><img src='galeria/".$_SESSION['path']."/thumb/thumb_".$upload_image."' border='0' width='128' height='128'></a>";
    }else{
    	echo "<script type='txt/javascript' src='js/lytebox.js'></script>
    <img src='images/error.gif' border='0' style='marin-bottom: -3px;' /> Hibás feltöltés: ";
    	foreach($errorList as $value){
        		echo $value.", ";
    	}
    }
    A php kód első fele, tölti fel a képet, és méretezi, illetve készíti el a thumb képet. A javascripttel, illetve ajaxal most ismerkedek.... Ezt a kódot úgy találtam, mikor feltöltés után kutattam.
    Mikor megnézem a generált forrást, a <script type='txt/javascript' src='js/lytebox.js'></script> hiányzik.

    Így néz ki a form:
    Kód:
    	$borderdata = "<script type='text/javascript' src='admin/scripts/ajaxupload.js'></script>
       <div id='left_col'>
          <fieldset>
             <legend>Kép feltöltése</legend>
             <form action='/admin/scripts/ajaxupload.php?filename=name&amp;maxW=800&amp;fullPath=".$config['site']['url']."galeria/".$todo."/&amp;relPath=../../galeria/".$todo."/&amp;colorR=0&amp;colorG=0&amp;colorB=0&amp;maxH=600&amp;path=".$todo."/' method='post'>
                <input type='file' name='name'>
                <button onclick=\"ajaxUpload(this.form,'/admin/scripts/ajaxupload.php?filename=name&amp;maxSize=9999999999&amp;maxW=800&amp;fullPath=".$config['site']['url']."galeria/".$todo."/&amp;relPath=../../galeria/".$todo."/&amp;colorR=0&amp;colorG=0&amp;colorB=0&amp;maxH=600&amp;path=".$todo."/','upload_area','Kép feltöltése folyamatban...&lt;br /&gt;&lt;img src=\'images/loader_light_blue.gif\' border=\'0\' /&gt;','&lt;img src=\'images/error.gif\' border=\'0\' /&gt; Error in Upload, check settings and path info in source code.'); return false;\" type='button' class='admin'>Kép feltöltése</button>
             </form>
          </fieldset>
       </div>
       <div id='upload_area' style='height: 150px;'></div>";
    }
    Majd a generált kód:
    Kód:
    ...
    <div id="left_col">
          <fieldset>
    
             <legend>Standard Use</legend>
             <form encoding="multipart/form-data" enctype="multipart/form-data" target="ajax-temp" action="/admin/scripts/ajaxupload.php?filename=name&amp;maxSize=9999999999&amp;maxW=800&amp;fullPath=http://localhost/galeria/images/&amp;relPath=../../galeria/images/&amp;colorR=0&amp;colorG=0&amp;colorB=0&amp;maxH=600&amp;path=images/" method="post">
                <input name="name" type="file">
                <button onclick="ajaxUpload(this.form,'/admin/scripts/ajaxupload.php?filename=name&amp;maxSize=9999999999&amp;maxW=800&amp;fullPath=http://localhost/galeria/images/&amp;relPath=../../galeria/images/&amp;colorR=0&amp;colorG=0&amp;colorB=0&amp;maxH=600&amp;path=images/','upload_area','Kép feltöltése folyamatban...<br /><img src=\'images/loader_light_blue.gif\' border=\'0\' />','<img src=\'images/error.gif\' border=\'0\' /> Error in Upload, check settings and path info in source code.'); return false;" type="button" class="admin">Kép feltöltése</button>
             </form>
          </fieldset>
       </div>
       <div id="upload_area" style="height: 150px;"><img src="images/success.gif" style="" border="0"> Sikeres feltöltés!<br>
    
    <a href="galeria/images/0001.jpg" rel="lytebox"><img src="galeria/images/thumb/thumb_0001.jpg" border="0" height="128" width="128"></a><div firebugversion="1.5.4" style="display: none;" id="_firebugConsole"></div></div>               </td>
    ...
    A $borderdata egy keretbe teszi a tartalmat.



  9. #9
    Rubyist Geri logója
    Csatlakozott
    07-12-15
    Hely
    \x90
    Hozzászólás
    5.607
    Begyűjtött 1.334 köszönetet
    829 hozzászólásával

    Alapbeállítás re: Lytebox

    Kód:
    ...
    if($imgUploaded){
    	echo "<script type='txt/javascript' src='js/lytebox.js'></script>";
    	echo "<img src='images/success.gif' border='0' style='marin-bottom: -4px;'> Sikeres feltöltés!<br>
    <a href='galeria/".$_SESSION['path'].$upload_image."' rel='lytebox'><img src='galeria/".$_SESSION['path']."/thumb/thumb_".$upload_image."' border='0' width='128' height='128'></a>";
    }else{
    	
    <img src='images/error.gif' border='0' style='marin-bottom: -3px;' /> Hibás feltöltés: ";
    	foreach($errorList as $value){
        		echo $value.", ";
    	}
    }
    elvileg így jó lesz.

    Idézet thelol eredeti hozzászólása Hozzászólás megtekintése
    Az ajaxupload.php generálja az iframe . Oda is próbáltam beszúrni a parancsot...





  10. #10
    Tag
    Csatlakozott
    10-09-06
    Hozzászólás
    53
    Begyűjtött 0 köszönetet
    0 hozzászólásával

    Mérges re: Lytebox

    Ugyan az a helyzet...

    Az echo "<script type='txt/javascript' src='js/lytebox.js'></script>"; sort simán figyelmen kívül hadja... Ezt nem igazán értem

    Ha így írom be:
    Kód:
    if($imgUploaded){
        echo "<script>myLytebox.updateLyteboxItems();</script><img src='images/success.gif' border='0' style='marin-bottom: -4px;'> Sikeres feltöltés!<br>
    <a href='galeria/".$_SESSION['path'].$upload_image."' rel='lytebox'><img src='galeria/".$_SESSION['path']."/thumb/thumb_".$upload_image."' border='0' width='128' height='128'></a>";
    }else{
    Ugyan az... a <script></script> egyszerűen figyelmen kívül marad, és így be sem töltődik. :/



Oldal: 1 / 2 12 UtolsóUtolsó

A téma címkéi:

Könyvjelzők

Hozzászólás szabályai

  • Új témákat nem hozhatsz létre
  • Válaszokat nem küldhetsz
  • Fájlokat nem csatolhatsz
  • A hozzászólásaidat nem módosíthatod
  •