ilch Forum » Allgemein » HTML, PHP, SQL,... » Ilch Clan 1.10 Lightbox2

Geschlossen
  1. Di. 15.11.2011 15:13 Uhr #1
    User Pic
    HaxXor Mitglied
    Registriert seit
    11.03.2011
    Beiträge
    32
    Beitragswertungen
    0 Beitragspunkte
    Hallo liebe Ilchianer zunge
    Wollte mal fragen wie man die Lightbox2 in Ilch in der Gallerie einfügt.
    habe mal gesucht auch etwas gefunden aber funktioniert halt leider nicht.
    Könntet ihr uns bitte helfen wäre ja sehr schön sone Lightbox.


    Danke lachen

    betroffene Homepage: fjr2.de
    0 Mitglieder finden den Beitrag gut.
  2. Di. 15.11.2011 15:53 Uhr #2
    User Pic
    Tr3icio gelöschter User
    www.ilch.de/downloads-show-1085.html
    0 Mitglieder finden den Beitrag gut.
  3. Di. 15.11.2011 16:21 Uhr #3
    User Pic
    HaxXor Mitglied
    Registriert seit
    11.03.2011
    Beiträge
    32
    Beitragswertungen
    0 Beitragspunkte
    Das ist nur für die Usergallery
    0 Mitglieder finden den Beitrag gut.
  4. Di. 15.11.2011 17:25 Uhr #4
    User Pic
    Tr3icio gelöschter User
    Einfach den HTML Code vergleichen und die unterschiede die von der Lightbox kommen einbauen?
    0 Mitglieder finden den Beitrag gut.
  5. Di. 15.11.2011 17:33 Uhr #5
    User Pic
    HaxXor Mitglied
    Registriert seit
    11.03.2011
    Beiträge
    32
    Beitragswertungen
    0 Beitragspunkte
    Versucht hab "ICH" nicht geschafft.
    Kannst du mir vlt. helfen?
    0 Mitglieder finden den Beitrag gut.
  6. Di. 15.11.2011 17:38 Uhr #6
    User Pic
    Fonsi1 Mitglied
    Registriert seit
    01.05.2010
    Beiträge
    455
    Beitragswertungen
    35 Beitragspunkte
    externer Link
    externer Link
    externer Link
    externer Link
    0 Mitglieder finden den Beitrag gut.
  7. Di. 15.11.2011 18:10 Uhr #7
    User Pic
    HaxXor Mitglied
    Registriert seit
    11.03.2011
    Beiträge
    32
    Beitragswertungen
    0 Beitragspunkte
    Ich will das die Lightbox nur in der gallery funktioniert bisher ist das Bild da und wenn ich es anklicke wird es wie ein standard bild angezeigt....
    fjr2.de/index.php?gallery
    Mein Code: 
    {EXPLODE}
<table width="100%" class="border" border="0" cellspacing="1" cellpadding="3">
  <tr class="Chead">
		<td width="80%" align="center"><b>{_lang_category}</b></td>
    <td width="20%" align="center">{_lang_pictures}</td>
	</tr>
	{EXPLODE}
	<tr class="{class}">
	  <td><a href="index.php?gallery-{id}">{name}</a><br /><span class="smalfont">&raquo;&nbsp;{besch}</span></td>
		<td align="center">{gallery}</td>
	</tr>
	{EXPLODE}
</table>
<br /><br />
{EXPLODE}
<table width="100%" class="border" border="0" cellspacing="1" cellpadding="3">
  <tr class="Chead">
		<td colspan="{imgperline}" align="center"><b>{cname}</b></td>
	</tr>
  {EXPLODE}
     <td class="{class}" width="{width}%" valign="top" align="center">

<div onmouseover="hiddpos('infodiv{id}')" class="layer" id="infodiv{id}" style="position:absolute; top:50px; left:50px; display:none; width:200px; height:200px;">
<table width="100%" class="border" border="0" cellspacing="1" cellpadding="4">
  <tr>
    <td class="{class}" align="left">
      <strong>{_lang_filename}:</strong> {datei_name}
<br /><strong>{_lang_seen}:</strong> {klicks}
<br /><strong>{_lang_voting}:</strong> {vote_wertung}
<br /><strong>{_lang_comments}:</strong> {anz_koms}
<br /><strong>{_lang_desc}:</strong> {besch}
    </td>
  </tr>
</table>
</div>
       <table class="border" border="0" cellspacing="1" cellpadding="0">
         <tr>
           <td onmouseout="hiddpos('infodiv{id}')" onmouseover="alertpos('infodiv{id}')"><a href="include/images/gallery/img_{id}.{endung}" rel="lightbox"><img src="include/images/gallery/img_thumb_{id}.{endung}" border="0" alt="{datei_name}" title="&nbsp;" /></a></td>
         </tr>
       </table>
     </td>
   {EXPLODE}
  </tr>
</table>
<center>{MPL}</center>
<script language="JavaScript" type="text/javascript">
<!--
  function oeffneFenster (bildr, cat) {
    var fenster = window.open ('index.php?gallery-show-'+cat+'-p'+bildr,'showBild','scrollbars=yes,height=600,width={breite},left=200,status=yes,resizable=yes');
    fenster.focus();
    return (false);
  }

  // manage div ...
  document.onmousemove = checkPosition;
  function checkPosition(e) {
    if(document.all) {
      mausX = event.clientX + document.body.scrollLeft;
      mausY = event.clientY + document.body.scrollTop;
    } else {
      mausX = e.pageX;
      mausY = e.pageY;
    }

  }

  function alertpos(dname) {
  if (document.layers) {
    document.layers[0].left = mausX;
    document.layers[0].top = mausY;
  } else if (document.getElementById) {
    document.getElementById(dname).style.left = mausX + "px";
    document.getElementById(dname).style.top = mausY + "px";
  }
  document.getElementById(dname).style.display = "inline";
  }
  function hiddpos(dname) {
    document.getElementById(dname).style.display = "none";
  }
//-->
</script>


    In der Design/index.htm sind die Javascript + css eingebunden


    Zuletzt modifiziert von HaxXor am 15.11.2011 - 18:12:30
    0 Mitglieder finden den Beitrag gut.
  8. Di. 15.11.2011 19:52 Uhr #8
    User Pic
    HaxXor Mitglied
    Registriert seit
    11.03.2011
    Beiträge
    32
    Beitragswertungen
    0 Beitragspunkte
    Keiner ne Idee?
    0 Mitglieder finden den Beitrag gut.
  9. Di. 15.11.2011 20:41 Uhr #9
    User Pic
    Angelina Mitglied
    Registriert seit
    06.11.2011
    Beiträge
    127
    Beitragswertungen
    20 Beitragspunkte
    Schau dir mal den ersten Link von Fonsi an, dann der dritte post
    www,angelina.de
    Ein Kavalier ist ein Mann, der sich den Geburtstag einer Frau merkt und ihr alter vergisst.
    0 Mitglieder finden den Beitrag gut.
  10. Mi. 16.11.2011 13:21 Uhr #10
    User Pic
    HaxXor Mitglied
    Registriert seit
    11.03.2011
    Beiträge
    32
    Beitragswertungen
    0 Beitragspunkte
    Ausprobiert hatte ich es schon nur in der gallery.html ist kein <head> Tag und ohne habe ichs ja auch probiert funktioniert leider nit-.-
    0 Mitglieder finden den Beitrag gut.
  11. Mi. 16.11.2011 13:37 Uhr #11
    User Pic
    Tr3icio gelöschter User
    ZitatZitat geschrieben von HaxXor

    Ausprobiert hatte ich es schon nur in der gallery.html ist kein <head> Tag und ohne habe ichs ja auch probiert funktioniert leider nit-.-


    Ja weil der <head> Tag immer im Design drinne ist! Also der index.htm vom Design, das du nutzt
    0 Mitglieder finden den Beitrag gut.
  12. Mi. 16.11.2011 13:50 Uhr #12
    User Pic
    HaxXor Mitglied
    Registriert seit
    11.03.2011
    Beiträge
    32
    Beitragswertungen
    0 Beitragspunkte
    So moment,
    ich lade jetzt nochma die originale gallery.html hoch!
    Done!
    Nimm die Sachen aus dem Design aus dem <head> Tag raus.
    Done!


    So bitte ausführlich erklären.
    ich habe bei mir die javscripte ins Design/index.htm eingefügt.
    In Templates/gallery.html bei 
    <img src="include/images/gallery/img_thumb_{id}.{endung}" border="0" alt="{datei_name}" title="&nbsp;" />

    rel="lightbox"

    hinzugefügt.
    Ausprobiert geht nicht.
    Die Pfade im Design/index.html angepasst.
    Geht nicht?
    Was könnte sonst noch funktionieren?

    Edit: Mir kommt das auch so vor dass er die css und js nicht findet...



    Wäre echt sehr nett wenn mir wer hilft zwinker


    Zuletzt modifiziert von HaxXor am 16.11.2011 - 14:06:59
    0 Mitglieder finden den Beitrag gut.
  13. Mi. 16.11.2011 14:36 Uhr #13
    User Pic
    HaxXor Mitglied
    Registriert seit
    11.03.2011
    Beiträge
    32
    Beitragswertungen
    0 Beitragspunkte
    Hat sich alles erledigt!
    0 Mitglieder finden den Beitrag gut.
  14. Fr. 23.06.2017 22:05 Uhr #14
    User Pic
    MichaSV51 Mitglied
    Registriert seit
    23.06.2017
    Beiträge
    4
    Beitragswertungen
    0 Beitragspunkte
    ZitatZitat geschrieben von HaxXor
    Hallo liebe Ilchianer zunge
    Wollte mal fragen wie man die Lightbox2 in Ilch in der Gallerie einfügt.
    habe mal gesucht auch etwas gefunden aber funktioniert halt leider nicht.
    Könntet ihr uns bitte helfen wäre ja sehr schön sone Lightbox.


    Danke lachen

    betroffene Homepage: fjr2.de




    Hallo,

    ich habe hier bisher noch keine direkte Lösung gelesen.
    Nach langem probieren habe ich letzenendes die Lösung gefunden.

    1. Alle Ordner hochladen.

    2.Code für die lightbox.css in (/web/clude/includes/js/lightbox/css): 

    #lightbox{
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
	}

#lightbox a img{ border: none; }

#outerImageContainer{
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
	}

#imageContainer{
	padding: 10px;
	}

#loading{
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
	}
#hoverNav{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
	}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
	width: 49%;
	height: 100%;
	background: transparent url(/include/includes/js/lightbox/images/blank.gif) no-repeat; /* Trick IE into showing hover */
	display: block;
	}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(/include/includes/js/lightbox/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(/include/includes/js/lightbox/images/nextlabel.gif) right 15% no-repeat; }


#imageDataContainer{
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%	
	}

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}	
		
#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
	}


    3. Code für die Usergallery (gallery.htm): 

    <!--Start LightboxJS2-->
<script type="text/javascript" src="/include/includes/js/lightbox/js/prototype.js"></script>
<script type="text/javascript" src="/include/includes/js/lightbox/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="/include/includes/js/lightbox/js/lightbox.js"></script>
<link rel="stylesheet" href="/include/includes/js/lightbox/css/lightbox.css" type="text/css" media="screen" />
<!--End LightboxJS2-->
<table width="100%" class="border" border="0" cellspacing="1" cellpadding="3">
  <tr class="Chead">
		<td colspan="{imgperline}" align="center"><b>{uname}</b></td>
	</tr>
  <tr>
  {EXPLODE}
     <td class="{class}" width="{width}%" valign="top" align="center">
       <table class="border" border="0" cellspacing="1" cellpadding="0">
         <tr>
           <td><a target="_blank" href="include/images/usergallery/img_{id}.{endung}" rel="lightbox[gruppe]"><img src="include/images/usergallery/img_thumb_{id}.{endung}" border="0" alt="{name}" title="{name}" /></a></td>           
         </tr>
       </table>
       {besch}
     </td>
   {EXPLODE}
  </tr>
</table>
<center>{MPL}</center>
{EXPLODE}

<br /><br />
<form action="index.php?user-usergallery-{uid}" method="POST" enctype="multipart/form-data">
  <input type="hidden" name="gesendet" value="yes" />
  <fieldset>
    <legend><b>{_lang_pictureupload}</b></legend>
	    <input type="file" size="40" name="file" style="margin-top:5px;" />
      <input size="60" name="text" maxlength="255" style="margin-top:5px;" /><br />
      <input type="submit" value="{_lang_formsub}" style="margin-top:5px;" />
  </fieldset>
</form>

{EXPLODE}
{x}


    4.Code für die Gallery(gallery.htm): 

    {EXPLODE}
<table width="100%" class="border" border="0" cellspacing="0" cellpadding="0">
  <tr class="Chead">
		<td width="80%" align="center"><br /><b>{_lang_category}</b><br /><br /></td>
    <td width="20%" align="center"><br />{_lang_pictures}<br /><br /></td>
	</tr>
	{EXPLODE}
	<tr class="{class}">
	  <td><br /><br /><a href="index.php?gallery-{id}">{name}</a><br /><span class="smalfont">&raquo;&nbsp;{besch}</span><br /><br /></td>
		<td align="center">{gallery}</td>
	</tr>
	{EXPLODE}
</table>
<br /><br />
{EXPLODE}
<table width="100%" class="border" border="0" cellspacing="0" cellpadding="0">
  <tr class="Chead">
		<td colspan="{imgperline}" align="center"><b>{cname}</b></td>
	</tr>
  {EXPLODE}
     <td class="{class}" width="{width}%" valign="top" align="center">

<div onmouseover="hiddpos('infodiv{id}')" class="layer" id="infodiv{id}" style="position:absolute; top:50px; left:50px; display:none; width:200px; height:200px;">
<table width="100%" class="border" border="0" cellspacing="1" cellpadding="4">
  <tr>
    <td class="{class}" align="left">
      <strong>{_lang_filename}:</strong> {datei_name}
<br /><strong>{_lang_seen}:</strong> {klicks}
<br /><strong>{_lang_voting}:</strong> {vote_wertung}
<br /><strong>{_lang_comments}:</strong> {anz_koms}
<br /><strong>{_lang_desc}:</strong> {besch}
    </td>
  </tr>
</table>
</div><br />
       <table class="border" border="0" cellspacing="0" cellpadding="0">
         <tr>
           <td onmouseout="hiddpos('infodiv{id}')" onmouseover="alertpos('infodiv{id}')">
		   <a target="_blank" href="include/images/gallery/img_norm_{id}.{endung}" rel="lightbox[gallery]">
		   <img src="include/images/gallery/img_thumb_{id}.{endung}" border="0" alt="{datei_name}" title="&nbsp;" /></a>
		   </td>
         </tr>
       </table>
	  <br />
     </td>
   {EXPLODE}
  </tr>
</table>
<center>{MPL}
<br />
<a href="javascript:history.back(1)"><font color="#FFFFFF" size="+1">&lArr;&nbsp;zurück</font></a></center>
<!--Start LightboxJS2-->
<script type="text/javascript" src="/include/includes/js/lightbox/js/prototype.js"></script>
<script type="text/javascript" src="/include/includes/js/lightbox/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="/include/includes/js/lightbox/js/lightbox.js"></script>
<link rel="stylesheet" href="/include/includes/js/lightbox/css/lightbox.css" type="text/css" media="screen" />
<!--End LightboxJS2-->


    Alles direkt kopieren und einfügen. Nicht mehr und nicht weniger und alles funktioniert.
    Viel Spaß damit lächeln


    Zuletzt modifiziert von MichaSV51 am 24.06.2017 - 13:19:46
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu HTML, PHP, SQL,...

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten