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

Téma: Lytebox

  1. 2010-09-26, 15:36 #1
    thelol
    thelol nem elérhető
    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)


    Válaszol idézettel Válaszol idézettel
  2. 2010-09-26, 15:49 #2
    speeedfire
    speeedfire nem elérhető
    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.


    Válaszol idézettel Válaszol idézettel
  3. 2010-09-26, 15:51 #3
    Geri
    Geri nem elérhető
    Rubyist Geri logója
    Csatlakozott
    07-12-15
    Hely
    \x90
    Hozzászólás
    5.751
    Begyűjtött 1.433 köszönetet
    895 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 15:56
    If debugging is the process of removing software bugs, then programming must be the process of putting them in.
    Ruby blog
    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
    Válaszol idézettel Válaszol idézettel
  4. 2010-09-26, 16:13 #4
    thelol
    thelol nem elérhető
    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...


    Válaszol idézettel Válaszol idézettel
  5. 2010-09-26, 16:20 #5
    Geri
    Geri nem elérhető
    Rubyist Geri logója
    Csatlakozott
    07-12-15
    Hely
    \x90
    Hozzászólás
    5.751
    Begyűjtött 1.433 köszönetet
    895 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.


    Válaszol idézettel Válaszol idézettel
  6. 2010-09-26, 16:33 #6
    thelol
    thelol nem elérhető
    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();
}



    Válaszol idézettel Válaszol idézettel
  7. 2010-09-26, 16:41 #7
    Geri
    Geri nem elérhető
    Rubyist Geri logója
    Csatlakozott
    07-12-15
    Hely
    \x90
    Hozzászólás
    5.751
    Begyűjtött 1.433 köszönetet
    895 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.


    Válaszol idézettel Válaszol idézettel
  8. 2010-09-26, 17:03 #8
    thelol
    thelol nem elérhető
    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.


    Válaszol idézettel Válaszol idézettel
  9. 2010-09-26, 17:17 #9
    Geri
    Geri nem elérhető
    Rubyist Geri logója
    Csatlakozott
    07-12-15
    Hely
    \x90
    Hozzászólás
    5.751
    Begyűjtött 1.433 köszönetet
    895 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...




    Válaszol idézettel Válaszol idézettel
  10. 2010-09-26, 17:33 #10
    thelol
    thelol nem elérhető
    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. :/


    Válaszol idézettel Válaszol idézettel
Oldal: 1 / 2 12 UtolsóUtolsó
« php - jquery | TinyMCE »

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
  •  

Fórum szabályzat