ilch Forum » Ilch Clan 1.1 » Allgemein » Lightbox für alle Bilder

Geschlossen
  1. Mi. 28.04.2010 15:54 Uhr #1
    User Pic
    Robert0506 Mitglied
    Registriert seit
    24.05.2009
    Beiträge
    204
    Beitragswertungen
    5 Beitragspunkte
    Hey Leute!
    Hab da mal wieder ne Frage! Wie muss ich den BBCode abändern damit jedes Bild was (egal ob in den News oder im Forum) via [img] [/img] eingebunden wird, über die auf meiner HP installierte Balupton JQuery Lightbox, angezeigt wird? Für die UserGallery, die normale Gallery und die Forenavatare konnte ich es erfolgreich einbinden! Nur leider für die übrigen Bilder noch nicht! Wäre nett, wenn mir jemand helfen könnte!

    betroffene Homepage: externer Link
    pixelphysics.de // Günstige Webdesigns und Anpassungen an Ilch
    0 Mitglieder finden den Beitrag gut.
  2. Mi. 28.04.2010 16:56 Uhr #2
    User Pic
    Jecky79 Mitglied
    Registriert seit
    28.04.2010
    Beiträge
    74
    Beitragswertungen
    1 Beitragspunkte
    Huhu leiter weiss ich auf deine frage keine Antwort, aber was mich interesiren würte, wie mache ich die lightbox für die normale Gallery .
    Für die user gallery geht es ja, aber für die normale gallery ?

    MFG Jecky79
    0 Mitglieder finden den Beitrag gut.
  3. Mi. 28.04.2010 17:20 Uhr #3
    User Pic
    Robert0506 Mitglied
    Registriert seit
    24.05.2009
    Beiträge
    204
    Beitragswertungen
    5 Beitragspunkte
    Hmmm für dien Problem sollte es eigentlich genügend Anleitungen hier im Forum geben! Hab aber für meiniges noch keine Lösung gefunden!
    pixelphysics.de // Günstige Webdesigns und Anpassungen an Ilch
    0 Mitglieder finden den Beitrag gut.
  4. Mi. 28.04.2010 18:06 Uhr #4
    User Pic
    orsnipe Mitglied
    Registriert seit
    19.06.2008
    Beiträge
    425
    Beitragswertungen
    11 Beitragspunkte
    ich find den link jetzt nicht aber es gibt nen download hier dafür, da hast du die lightbox in der Usergallery , in der normalen gallery und im Picofx,
    musste leider suchen weil wie gesagt ich den link nicht finde aber ich hab es auch auf meiner seite , daher weis ich das es des hier gibt.
    siehe hier: okularrulz.com/index.php?gallery
    Schau mich nicht in diesem Ton an, ich hab nen Tinnitus im Auge, ich seh nur Pfeifen.
    0 Mitglieder finden den Beitrag gut.
  5. Mi. 28.04.2010 18:48 Uhr #5
    User Pic
    GeCk0 Hall Of Fame
    Registriert seit
    01.05.2009
    Beiträge
    2.989
    Beitragswertungen
    96 Beitragspunkte
    hab da was fertig, allerdings mit der GreyBox
    gecko.ilch.de/index.php?downloads-show-1

    Funktioniert in der Gallery, Usergallery und PicOfX
    Alle Module von mir sind nun unter php-gecko.de erreichbar
    0 Mitglieder finden den Beitrag gut.
  6. Mi. 28.04.2010 19:13 Uhr #6
    User Pic
    Robert0506 Mitglied
    Registriert seit
    24.05.2009
    Beiträge
    204
    Beitragswertungen
    5 Beitragspunkte
    Hmmm schade das sich niemand um das eigentlich von mir erwähnte Problem annimmt... Wäre es evtl. möglich die Lightbox auf alle Bilder die via [img] [/img] vom BBCode eingebunden werden anzuwenden?! Für das Problem von Jecky gibts hier eigentlich schon zig Anleitungen...
    pixelphysics.de // Günstige Webdesigns und Anpassungen an Ilch
    0 Mitglieder finden den Beitrag gut.
  7. Mi. 28.04.2010 19:30 Uhr #7
    User Pic
    GeCk0 Hall Of Fame
    Registriert seit
    01.05.2009
    Beiträge
    2.989
    Beitragswertungen
    96 Beitragspunkte
    dazu musst du in der bbcode.php den rel= tag hinzufügenj
    jenachdem welches lightbox-overlay du verwendest

    die original lightbox hat rel="lightbox" soviel ich weis

    wenn das javascript richtig in der index.htm eingebunden wurde funzt das dann auch
    Alle Module von mir sind nun unter php-gecko.de erreichbar
    0 Mitglieder finden den Beitrag gut.
  8. Mi. 28.04.2010 19:43 Uhr #8
    User Pic
    Robert0506 Mitglied
    Registriert seit
    24.05.2009
    Beiträge
    204
    Beitragswertungen
    5 Beitragspunkte
    Vielen Dank für die erst Antwort! Freu mich richtig! xD

    So spass bei Seite! Und zwar verwende ich die JQuery Lightbox (Balupton Edition)...

    Eingebunden hab ich die Lightbox via

    <script type="text/javascript" src="include/includes/func/js/balupton-jquery_lightbox/js/jquery-1.3.2.min.js"></script>

    <script type="text/javascript" src="include/includes/func/js/balupton-jquery_lightbox/js/jquery.lightbox.min.js"></script>

    im Head Bereich der index.htm des Designs! Funktioniert ja auch in der Gallery, Usergallery und habs auch für die Avatare im Forum verwendet (es werden grundsätzlich kleinere Avatare angezeigt und beim Klick drauf via Lightbox vergrößert -> Anleitung gabs hier im Forum)

    Bin ich bei der Datei include/includes/class/bbcode.php schonmal richtig?

    Evtl. auch im in der Datei hier:

    //> Bilder auf Verkleinern via Javascript überprüfen.
    function _img($string, $float='') {
    if ($float == 'none' OR $float == 'left' OR $float == 'right') {
    $float = 'style="float:'.$float.'; margin: 5px;" ';
    } else {
    $float = '';
    }
    $image = '<img src="'.$string.'" rel="lightbox" class="bbcode_image" '.$float.'/>';
    return $image;

    schon richtig? Danke das du dir mein Problem ansiehst!
    pixelphysics.de // Günstige Webdesigns und Anpassungen an Ilch
    0 Mitglieder finden den Beitrag gut.
  9. Mi. 28.04.2010 19:46 Uhr #9
    User Pic
    GeCk0 Hall Of Fame
    Registriert seit
    01.05.2009
    Beiträge
    2.989
    Beitragswertungen
    96 Beitragspunkte
    jo sieht doch gut aus lächeln
    probiers aus. habs selber noch nicht getestet
    wenns nicht geht kann ich ja mal schauen
    Alle Module von mir sind nun unter php-gecko.de erreichbar
    0 Mitglieder finden den Beitrag gut.
  10. Mi. 28.04.2010 20:04 Uhr #10
    User Pic
    Robert0506 Mitglied
    Registriert seit
    24.05.2009
    Beiträge
    204
    Beitragswertungen
    5 Beitragspunkte
    $image = '<img src="'.$string.'" rel="lightbox" class="bbcode_image" '.$float.'/>';

    Hmmm klappt nicht! Es klappt erst, wenn ich folgendes aus der Zeile entferne:

    class="bbcode_image"

    Dann wird das Bild aber nicht mehr verkleinert im Forum dargestellt, aber via Lightbox auf eine bestimmte Größe geöffnet! Irgendwie ist es aber dann via Lightbox nicht die Originalgröße!
    pixelphysics.de // Günstige Webdesigns und Anpassungen an Ilch
    0 Mitglieder finden den Beitrag gut.
  11. Mi. 28.04.2010 22:48 Uhr #11
    User Pic
    Robert0506 Mitglied
    Registriert seit
    24.05.2009
    Beiträge
    204
    Beitragswertungen
    5 Beitragspunkte
    Iwie komm ich grad nicht weiter... Steh irgendwie aufm Schlauch!
    pixelphysics.de // Günstige Webdesigns und Anpassungen an Ilch
    0 Mitglieder finden den Beitrag gut.
  12. Mi. 28.04.2010 22:58 Uhr #12
    User Pic
    Lord|Schirmer Administrator
    Registriert seit
    21.03.2007
    Beiträge
    7.634
    Beitragswertungen
    1193 Beitragspunkte
    Sinnvoller wäre es die include/includes/js/BBCodeGlobal.js anzupassen!

    Mach die Änderung wieder rückgängig und füge in der oben genannten Datei folgendes hinzu: 

    ersatz.setAttribute('rel','lightbox');


    ...sollte funktionieren!
    Bitte um Feedback ob es funzt!


    Zuletzt modifiziert von Lord|Schirmer am 28.04.2010 - 23:15:15
    rules :: doku :: faq :: linkus
    0 Mitglieder finden den Beitrag gut.
  13. Mi. 28.04.2010 23:09 Uhr #13
    User Pic
    Robert0506 Mitglied
    Registriert seit
    24.05.2009
    Beiträge
    204
    Beitragswertungen
    5 Beitragspunkte
    Hmmm wird in neuem Fenster geöffnet!
    pixelphysics.de // Günstige Webdesigns und Anpassungen an Ilch
    0 Mitglieder finden den Beitrag gut.
  14. Mi. 28.04.2010 23:11 Uhr #14
    User Pic
    Lord|Schirmer Administrator
    Registriert seit
    21.03.2007
    Beiträge
    7.634
    Beitragswertungen
    1193 Beitragspunkte
    Ähm, Sorry so meinte ich es eigentlich! 

          var ersatz = document.createElement('a');
      ersatz.setAttribute('href',src);
      ersatz.setAttribute('rel','lightbox');
      var newImg = document.createElement('img');
      newImg.setAttribute('src',src);
      newImg.setAttribute('width',w);
      newImg.setAttribute('height',h);
      newImg.setAttribute('border','0');
      newImg.setAttribute('style',img.getAttribute('style',0));
      ersatz.appendChild(newImg);
      img.parentNode.replaceChild(ersatz,img);



    Zuletzt modifiziert von Lord|Schirmer am 28.04.2010 - 23:13:03
    rules :: doku :: faq :: linkus
    0 Mitglieder finden den Beitrag gut.
  15. Mi. 28.04.2010 23:17 Uhr #15
    User Pic
    Robert0506 Mitglied
    Registriert seit
    24.05.2009
    Beiträge
    204
    Beitragswertungen
    5 Beitragspunkte
    Klappt irgendwie noch nicht!
    pixelphysics.de // Günstige Webdesigns und Anpassungen an Ilch
    0 Mitglieder finden den Beitrag gut.
  16. Do. 29.04.2010 13:19 Uhr #16
    User Pic
    Robert0506 Mitglied
    Registriert seit
    24.05.2009
    Beiträge
    204
    Beitragswertungen
    5 Beitragspunkte
    Hmm hat sonst noch jemand ne Idee? Oder liegts vllt. an mir? Hab das Script lediglich im Head Bereich des Designs stehen! Aber das muss doch normalerweise reichen?!
    pixelphysics.de // Günstige Webdesigns und Anpassungen an Ilch
    0 Mitglieder finden den Beitrag gut.
  17. Do. 29.04.2010 16:08 Uhr #17
    User Pic
    Mairu Coder
    Registriert seit
    16.06.2006
    Beiträge
    15.334
    Beitragswertungen
    386 Beitragspunkte
    Geht so "einfach" auch nicht, weil durch Javascript das Attribut erst später hinzugefügt wird, in diesem Fall erst nachdem das Lightboxscript nach den Links mit rel Attribut sucht, allerdings sollte man es trotzdem leicht hinzufügen können. 

    var ersatz = document.createElement('a');
      ersatz.setAttribute('href',src);
      var newImg = document.createElement('img');
      newImg.setAttribute('src',src);
      newImg.setAttribute('width',w);
      newImg.setAttribute('height',h);
      newImg.setAttribute('border','0');
      newImg.setAttribute('style',img.getAttribute('style',0));
      ersatz.appendChild(newImg);
      img.parentNode.replaceChild(ersatz,img);
      $(ersatz).lightbox();
    Und auch immer mal ein Blick auf die FAQ werfen. | Mairus Ilchseite
    0 Mitglieder finden den Beitrag gut.
  18. Do. 29.04.2010 17:10 Uhr #18
    User Pic
    Robert0506 Mitglied
    Registriert seit
    24.05.2009
    Beiträge
    204
    Beitragswertungen
    5 Beitragspunkte
    Danke Mairu und vielen Dank Lord|Schirmer!
    Jetzt klappts für alle Bilder die ich via [img] [/img] einbinde! Mairus Code hat geklappt...

    Es ging zwar zuerst dann nur unser "Bilderslider" (der basiert auch auf JQuery) aber als ich alle Links zu den JQuery scripten die Zeile von der Lightbox entfernt habe, gings.

    Der Bilderslider hat auf
    include/designs/concept/jquery.js
    zugegriffen und die Lightbox hat auf
    include/includes/func/js/balupton-jquery_lightbox/js/jquery-1.3.2.min.js zugegriffen!

    Scheinbar vertragen sich die beiden Scripte nicht! Anders kann ich es mir nicht erklären!

    Somit hat sich mein anderer Thread mit den Thumbnails in den News Bildern auch erledigt. Ich setzte jetzt die maximale Bildgröße beim BBCode auf 150x150 und gut ist! Somit werden alle Bilder klein angezeigt und beim Klick aufs Bild via Lightbox geöffnet!!! So hab ich mir das vorgestellt... Echt nice...


    Zuletzt modifiziert von Robert0506 am 29.04.2010 - 17:14:57
    pixelphysics.de // Günstige Webdesigns und Anpassungen an Ilch
    0 Mitglieder finden den Beitrag gut.
  19. Fr. 07.01.2011 02:02 Uhr #19
    User Pic
    CaZper Mitglied
    Registriert seit
    03.01.2011
    Beiträge
    17
    Beitragswertungen
    0 Beitragspunkte
    Wenn ich in meiner index.htm,
    den Code von der Lightbox anhänge, laufen leider keine scripte mehr ^^ 

    <!--Start LightboxJS2-->
<link rel="stylesheet" href="include/includes/js/lightbox/css/lightbox.css" type="text/css" media="screen" />
<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>
<!--End LightboxJS2-->




    das ist der restliche kram der im Head geladen wird 

    <link rel="stylesheet" href="include/includes/css/slide.css" type="text/css" media="screen" />
<link rel="stylesheet" href="include/designs/bat/css/navi.css" type="text/css" media="screen" />
<link href="include/designs/bat/css/template.css" rel="stylesheet" type="text/css" />
<link type="text/css" rel="stylesheet" media="all" href="include/includes/css/messenger/chat.css" />
<link type="text/css" rel="stylesheet" media="all" href="include/includes/css/messenger/screen.css" />
<script type="text/javascript" src="include/designs/bat/css/navi.js"></script>
<script type='text/javascript' src='include/includes/js/BBCodeGlobal.js'></script>
<script src="include/includes/js/jquery-1.4.2.js" type="text/javascript"></script>
<script src="include/includes/js/slide.js" type="text/javascript"></script>
<script type="text/javascript" src="include/includes/js/messenger.js"></script>



    Ich sehe leider nicht das Prob.. scheint aber an "Jquery" zuliegen,
    ich weiß es liegt an mir lächeln


    HIIIILLLLFEEEE lächeln


    Zuletzt modifiziert von CaZper am 09.01.2011 - 05:49:18
    kann dochmal passieren lachen
    0 Mitglieder finden den Beitrag gut.
  20. Di. 11.01.2011 01:57 Uhr #20
    User Pic
    CaZper Mitglied
    Registriert seit
    03.01.2011
    Beiträge
    17
    Beitragswertungen
    0 Beitragspunkte
    Hat sich erledigt !! hab die Fancybox genommen !! lachen

    Der Code für die Globalbbcode mit der Fancybox, rest aus readme + thread 

    <!--Start LightboxJS2-->
<link rel="stylesheet" href="include/includes/js/lightbox/css/lightbox.css" type="text/css" media="screen" />
<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/fancybox.js"></script>
<!--End LightboxJS2-->



    DANKE !!!


    Zuletzt modifiziert von CaZper am 11.01.2011 - 01:58:16
    kann dochmal passieren lachen
    0 Mitglieder finden den Beitrag gut.
  21. Sa. 26.03.2011 10:21 Uhr #21
    User Pic
    butter Mitglied
    Registriert seit
    10.07.2008
    Beiträge
    319
    Beitragswertungen
    2 Beitragspunkte
    Sorry ich bekomme das nicht hin habe die Fancybox

    meine sieht so aus BBCodeGlobal 

    function addEvent(elm, evType, fn, useCapture)
// addEvent and removeEvent
// cross-browser event handling for IE5+,  NS6 and Mozilla
// By Scott Andrew
{
 if (elm.addEventListener){
   elm.addEventListener(evType, fn, useCapture);
   return true;
 } else if (elm.attachEvent){
   var r = elm.attachEvent("on"+evType, fn);
   return r;
 } else {
   alert("Handler could not be removed");
 }
}

addEvent(window, "load", ResizeBBCodeImages);

//Funktion die alle Bilder des BBCodes der Funktion SetSize übergibt
function ResizeBBCodeImages() {
  imgs = document.getElementsByTagName("img");
  for (ti=0;ti<imgs.length;ti++) {
    if (imgs[ti].className.indexOf("bbcode_image") != -1) {
      SetSize(imgs[ti]);
    }
  }
}

//Funktion zum Ändern der Bildgröße für zu große Bilder
function SetSize(img){
  var w = img.width;
  var h = img.height;
  var toChange = false;
  if (w>bbcodemaximagewidth) {
    h = bbcodemaximagewidth * h / w;
    w = bbcodemaximagewidth;
    toChange = true;
    }
  if (h>bbcodemaximageheight) {
    w = bbcodemaximageheight * w / h;
    h = bbcodemaximageheight;
    toChange = true;
    }
  if (toChange) {
    var src = img.getAttribute('src');
    if ( img.parentNode.nodeName.toLowerCase() == 'a' ) {
      img.setAttribute('width',w);
      img.setAttribute('height',h);
    } else {
      var ersatz = document.createElement('a');       ersatz.setAttribute('href',src);       var newImg = document.createElement('img');       newImg.setAttribute('src',src);       newImg.setAttribute('width',w);       newImg.setAttribute('height',h);       newImg.setAttribute('border','0');       newImg.setAttribute('style',img.getAttribute('style',0));       ersatz.appendChild(newImg);       img.parentNode.replaceChild(ersatz,img);       $(ersatz).lightbox();
    }
  }
}

//Funktion für BBCode Klapptext
function Klapptext(str) {
	var KlappText = document.getElementById('layer_'+str);
	var KlappBild = document.getElementById('image_'+str);
	var medientuner_minus= "include/images/icons/minus.gif", medientuner_plus="include/images/icons/plus.gif";
	
	if (KlappText.style.display == 'none') {
		KlappText.style.display = 'block';
		KlappBild.src = medientuner_minus;
	} else {
		KlappText.style.display = 'none';
		KlappBild.src = medientuner_plus;
	}
}


    index.htm head bereich 

    <link rel="stylesheet" href="include/includes/css/slide.css" type="text/css" media="screen" /> <link rel="stylesheet" href="include/designs/bat/css/navi.css" type="text/css" media="screen" /> <link href="include/designs/bat/css/template.css" rel="stylesheet" type="text/css" /> <link type="text/css" rel="stylesheet" media="all" href="include/includes/css/messenger/chat.css" /> <link type="text/css" rel="stylesheet" media="all" href="include/includes/css/messenger/screen.css" /> <script type="text/javascript" src="include/designs/bat/css/navi.js"></script> <script type='text/javascript' src='include/includes/js/BBCodeGlobal.js'></script> <script src="include/includes/js/jquery-1.4.2.js" type="text/javascript"></script> <script src="include/includes/js/slide.js" type="text/javascript"></script> <script type="text/javascript" src="include/includes/js/messenger.js"></script>
   </script>

<!--Start LightboxJS2--> 
<link rel="stylesheet" href="include/includes/js/lightbox/css/lightbox.css" type="text/css" media="screen" /> 
<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/fancybox.js"></script> 
<!--End LightboxJS2-->


    was mache ich falsch?


    Zuletzt modifiziert von butter am 26.03.2011 - 10:23:40
    Mein YouTube Kanal Ilch Boxen, Module etc
    0 Mitglieder finden den Beitrag gut.
  22. Sa. 26.03.2011 10:32 Uhr #22
    User Pic
    Lord|Schirmer Administrator
    Registriert seit
    21.03.2007
    Beiträge
    7.634
    Beitragswertungen
    1193 Beitragspunkte
    Du hast ja auch alles von der Lightbox (Prototyp) eingebaut!

    Fancybox (Jquery)
    Quelle: fancybox.net/

    ...in BBCodeGlobal
    $(ersatz).lightbox(); zu $(ersatz).fancybox();

    ...in index.htm
    in den <head> die Links zum Script (JS/CSS) setzen
    (siehe Beispieldatein des Downloads)
    und die Ausführung definieren
    rules :: doku :: faq :: linkus
    0 Mitglieder finden den Beitrag gut.
  23. Sa. 26.03.2011 10:43 Uhr #23
    User Pic
    butter Mitglied
    Registriert seit
    10.07.2008
    Beiträge
    319
    Beitragswertungen
    2 Beitragspunkte
    ok bin weiter gekommen

    BBCodeGlobal 

    function addEvent(elm, evType, fn, useCapture)
// addEvent and removeEvent
// cross-browser event handling for IE5+,  NS6 and Mozilla
// By Scott Andrew
{
 if (elm.addEventListener){
   elm.addEventListener(evType, fn, useCapture);
   return true;
 } else if (elm.attachEvent){
   var r = elm.attachEvent("on"+evType, fn);
   return r;
 } else {
   alert("Handler could not be removed");
 }
}

addEvent(window, "load", ResizeBBCodeImages);

//Funktion die alle Bilder des BBCodes der Funktion SetSize übergibt
function ResizeBBCodeImages() {
  imgs = document.getElementsByTagName("img");
  for (ti=0;ti<imgs.length;ti++) {
    if (imgs[ti].className.indexOf("bbcode_image") != -1) {
      SetSize(imgs[ti]);
    }
  }
}

//Funktion zum Ändern der Bildgröße für zu große Bilder
function SetSize(img){
  var w = img.width;
  var h = img.height;
  var toChange = false;
  if (w>bbcodemaximagewidth) {
    h = bbcodemaximagewidth * h / w;
    w = bbcodemaximagewidth;
    toChange = true;
    }
  if (h>bbcodemaximageheight) {
    w = bbcodemaximageheight * w / h;
    h = bbcodemaximageheight;
    toChange = true;
    }
  if (toChange) {
    var src = img.getAttribute('src');
    if ( img.parentNode.nodeName.toLowerCase() == 'a' ) {
      img.setAttribute('width',w);
      img.setAttribute('height',h);
    } else {
      var ersatz = document.createElement('a');       ersatz.setAttribute('href',src);       var newImg = document.createElement('img');       newImg.setAttribute('src',src);       newImg.setAttribute('width',w);       newImg.setAttribute('height',h);       newImg.setAttribute('border','0');       newImg.setAttribute('style',img.getAttribute('style',0));       ersatz.appendChild(newImg);       img.parentNode.replaceChild(ersatz,img);       $(ersatz).fancybox();
    }
  }
}

//Funktion für BBCode Klapptext
function Klapptext(str) {
	var KlappText = document.getElementById('layer_'+str);
	var KlappBild = document.getElementById('image_'+str);
	var medientuner_minus= "include/images/icons/minus.gif", medientuner_plus="include/images/icons/plus.gif";
	
	if (KlappText.style.display == 'none') {
		KlappText.style.display = 'block';
		KlappBild.src = medientuner_minus;
	} else {
		KlappText.style.display = 'none';
		KlappBild.src = medientuner_plus;
	}
}


    index.htm 

    <!--Start LightboxJS2--> 
<link rel="stylesheet" href="include/extras/fancybox/jquery.fancybox.css" type="text/css" media="screen" /> 
  <script type="text/javascript" src="include/includes/js/jquery-1.3.2.min.js"></script>  
  <script type="text/javascript" src="include/extras/fancybox/jquery.fancybox-1.2.1.pack.js"></script> 
  <script type="text/javascript" src="include/extras/fancybox/jquery.easing.1.3.js"></script>
<!--End LightboxJS2-->


    funktioniert aber noch nicht was habe ich falsch gemacht?
    Mein YouTube Kanal Ilch Boxen, Module etc
    0 Mitglieder finden den Beitrag gut.
  24. Sa. 26.03.2011 11:37 Uhr #24
    User Pic
    butter Mitglied
    Registriert seit
    10.07.2008
    Beiträge
    319
    Beitragswertungen
    2 Beitragspunkte
    Also ich habe die francy box nicht direct von der website geladen fancy.klade.lv/ sondern eine anilch angepasste version.

    Die funktion geht immer noch nicht die bilder werden in einen neuen fenster geöffnet

    in der readme steht 

    Fancybox v1.5 für IlchClan 1.1:
"""""""""""""""""""""""
Beschreibung:
-------------
Intigration des Fancybox Scipts in Ilch für Gallary und BBCode 2.0 Youtube Videos

Entwickelt
----------
° von http://fancy.klade.lv/
° Angepasst von dAnIiiiEl
° Ilch
 
Installation:
-------------
° BBCode 2.0 installieren

° Alles aus dem Upload Ordner Hochladen

° Folgendes in den <head></head> Bereich deines Aktuellen Designs einfügen
  
  <link rel="stylesheet" type="text/css" href="include/extras/fancybox/jquery.fancybox.css" media="screen" />
  <script type="text/javascript" src="include/includes/js/jquery-1.3.2.min.js"></script>  
  <script type="text/javascript" src="include/extras/fancybox/jquery.fancybox-1.2.1.pack.js"></script> 
  <script type="text/javascript" src="include/extras/fancybox/jquery.easing.1.3.js"></script>
  <script type="text/javascript">
	$(document).ready(function() {
		$("table#galimages a").fancybox(
		{ 
		'zoomSpeedIn': 800, 
		'zoomSpeedOut': 500, 
		'zoomSpeedChange': 800,
		'zoomOpacity': 0.5,
		'overlayOpacity': 0.5,
		'easingIn' : 'easeOutBack',
		'easingOut'	: 'easeInBack',
		'overlayShow': true
		}
		);
		
		$("div#bbvideo a").fancybox(
		{ 
		'zoomSpeedIn': 800, 
		'zoomSpeedOut': 500, 
		'zoomSpeedChange': 800,
		'zoomOpacity': 0.5,
		'overlayOpacity': 0.5,
		'overlayShow': true
		}
		);
	});
   </script>

Fakten zum Modul:
-----------------
° Nur YouTube Videos

° Bei Interesse, im extras Ordner das Orginal Fancybox Script mit Beispielen!

° Die beschreibung der Bilder wird als Titel des Bildes genommen!

° Achtung: Es wird folgende Datei von bbcode2 übeschrieben:
  include\includes\class\bbcode.php
  
  Es wurde nur eine Zeile bearbeitet  (Zeile: 526):
  
  		// Edited by dAnIiiiEl
		if($typ == "youtube") {
			$str = "<div id=\"bbvideo\"><a href=\"#".$id."\"><img alt=\"\" src=\"http://i.ytimg.com/vi/".$id."/default.jpg\"></a><div style=\"display:none\" id=\"".$id."\"><object width=\"".$this->info['YoutubeBreite']."\" height=\"".$this->info['YoutubeHoehe']."\"><param name=\"movie\" value=\"http://www.youtube.com/v/".$id."\"></param><embed src=\"http://www.youtube.com/v/".$id."\" type=\"application/x-shockwave-flash\"  width=\"".$this->info['YoutubeBreite']."\" height=\"".$this->info['YoutubeHoehe']."\" bgcolor=\"".$this->info['YoutubeHintergrundfarbe']."\"></embed></object></div></div>";
		}
		// Edited by dAnIiiiEl

######################################################
Einbau in PicOfX:
######################################################
- Box PicOfX im ordner include/boxes mit einem editor šffnen
- suche nach: 
-----------------------------------------------------
	<?php    
    
    echo '<table width="100%" border="0" cellpadding="2" cellspacing="0"><tr><td align="center">';
    echo '<a target="_blank" href="index.php?gallery-show-'.$cid.'-p'.$anz.'" onClick="return picOfxOeffneFenster('.$anz.','.$cid.');"><img src="include/images/gallery/'.$picofxThumb.'" width="'.$picofxImg[0].'" height="'.$picofxImg[1].'" alt=""></a>';
    echo '</td></tr></table>';
  } else {

    echo $lang['nothingavailable'];
  }
?>
-----------------------------------------------------
 und ersetze es durch:
-----------------------------------------------------
<?php    
    
    echo '<table width="100%" id="galimages" border="0" cellpadding="2" cellspacing="0"><tr><td align="center">';
    echo '<a rel="galimagesrel" href="index.php?gallery-show-'.$cid.'-p'.$anz.'"><img src="include/images/gallery/'.$picofxThumb.'" width="'.$picofxImg[0].'" height="'.$picofxImg[1].'" alt=""></a>';
    echo '</td></tr></table>';
  } else {

    echo $lang['nothingavailable'];
  }
?>
-----------------------------------------------------

#####################################################
Einbau in Usergallery:
#####################################################
- …ffne include/templates/user/gallery.htm
-suche nach:
------------------------------------------------------
<table class="border" border="0" cellspacing="1" cellpadding="0">
         <tr>
           <td><a target="_blank" href="include/images/usergallery/img_{id}.{endung}"><img src="include/images/usergallery/img_thumb_{id}.{endung}" border="0" alt="{name}" title="{name}" /></a></td>           
         </tr>
       </table>
------------------------------------------------------
und ersetze es durch:
------------------------------------------------------
<table class="border" id="galimages" border="0" cellspacing="1" cellpadding="0">
         <tr>
           <td><a rel="galimagesrel" href="include/images/usergallery/img_{id}.{endung}"><img src="include/images/usergallery/img_thumb_{id}.{endung}" border="0" alt="{name}" title="{name}" /></a></td>           
         </tr>
       </table>
-----------------------------------------------------
 

Bekannte Einschränkungen / Fehler:
----------------------------------
° Nur YouTube Videos

Haftungsausschluss:
-------------------
Ich übernehme keine Haftung für Schäden, die durch dieses Skript entstehen.
Benutzung ausschließlich AUF EIGENE GEFAHR.


    soll ich das was dort steht mit head auch in die index einfügen?
    Mein YouTube Kanal Ilch Boxen, Module etc
    0 Mitglieder finden den Beitrag gut.
  25. So. 27.03.2011 10:39 Uhr #25
    User Pic
    Lord|Schirmer Administrator
    Registriert seit
    21.03.2007
    Beiträge
    7.634
    Beitragswertungen
    1193 Beitragspunkte
    JA das ist im Endeffekt die passende Einstellung für ganz genaue Bereich, wo Fancybox seine Anwendung finden soll!
    (Usergallery | BBcode YouTube | PicOfX)
    Die normale Gallery wurde jedoch nicht bedacht, diese müsste, sofern die gleiche Art angewendet werden soll, wie Usergallery angepasst werden, also die id=galimages ins table wo der Link des Bildes drin ist!
    rules :: doku :: faq :: linkus
    0 Mitglieder finden den Beitrag gut.
  26. So. 27.03.2011 10:50 Uhr #26
    User Pic
    butter Mitglied
    Registriert seit
    10.07.2008
    Beiträge
    319
    Beitragswertungen
    2 Beitragspunkte
    also sollte ich für das Forum dies nur für die Bilder einstellen? 

    // Edited by dAnIiiiEl
67.        if($typ == "youtube") {
68.            $str = "<div id=\"bbvideo\"><a href=\"#".$id."\"><img alt=\"\" src=\"http://i.ytimg.com/vi/".$id."/default.jpg\"></a><div style=\"display:none\" id=\"".$id."\"><object width=\"".$this->info['YoutubeBreite']."\" height=\"".$this->info['YoutubeHoehe']."\"><param name=\"movie\" value=\"http://www.youtube.com/v/".$id."\"></param><embed src=\"http://www.youtube.com/v/".$id."\" type=\"application/x-shockwave-flash\"  width=\"".$this->info['YoutubeBreite']."\" height=\"".$this->info['YoutubeHoehe']."\" bgcolor=\"".$this->info['YoutubeHintergrundfarbe']."\"></embed></object></div></div>";
69.        }
70.        // Edited by dAnIiiiEl


    werde mein glück versuchen
    Mein YouTube Kanal Ilch Boxen, Module etc
    0 Mitglieder finden den Beitrag gut.
  27. So. 27.03.2011 10:52 Uhr #27
    User Pic
    Lord|Schirmer Administrator
    Registriert seit
    21.03.2007
    Beiträge
    7.634
    Beitragswertungen
    1193 Beitragspunkte
    Nein ... das war für den BBCODE Youtube!
    Wenn es garnicht hinhau gib mir mal deine FTP Zugangsdaten und ich bastel es Dir ein!
    rules :: doku :: faq :: linkus
    0 Mitglieder finden den Beitrag gut.
  28. So. 27.03.2011 17:26 Uhr #28
    User Pic
    Lord|Schirmer Administrator
    Registriert seit
    21.03.2007
    Beiträge
    7.634
    Beitragswertungen
    1193 Beitragspunkte
    So, ich hab bei Dir mal reingeschaut und weiss eigentlich garnicht was ich wie machen soll! Du hast highslide, prototype und x verschiedene js Scripte installiert und in verschiedenen Dateien eingebunden!

    Ich habe jetzt folgende Tätigkeiten ausgeführt:

    Fancybox Version: 1.3.4 in include/includes/js/fancybox gesetzt und in deine index.htm folgendes eingebunden: 
    <!-- JQUERY -->
<script type="text/javascript" src="include/includes/js/jquery-1.4.3.min.js"></script>
<!-- FANCYBOX -->
<script type="text/javascript" src="include/includes/js/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="include/includes/js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="include/includes/js/fancybox/jquery.fancybox-1.3.4.css" media="screen" />

<script type="text/javascript">
$(document).ready(function() {
/*
*   Einzelnes Bild
*/
  $("a[rel=fancy_single]").fancybox({
    'width'	: '80%',
    'height' : '80%',
    'zoomSpeedIn': 800,
    'zoomSpeedOut': 500,
    'zoomSpeedChange': 800,
    'zoomOpacity': 0.5,
    'overlayOpacity': 0.5,
    'easingIn' : 'easeOutBack',
    'easingOut' : 'easeInBack',
    'overlayShow': true
  });
/*
*   Bilder Gruppe
*/
  $("a[rel=fancy_group]").fancybox({
    'width'	: '80%',
    'height' : '80%',
    'transitionIn' : 'none',
    'transitionOut' : 'none',
    'titlePosition' : 'over',
    'titleFormat' : function(title, currentArray, currentIndex, currentOpts) 
      {
      return '<span id="fancybox-title-over">Bild ' +  (currentIndex + 1) + ' / ' + currentArray.length + ' ' + title + '</span>';
      }
  });

});
</script>


    Für Einzelbild:
    <a rel="fancy_single" href=""><img src=""></a>
    Für Bildergruppen:
    <a rel="fancy_group" title="" href=""><img src=""></a>

    Problematisch ist jetzt, alles andere was Du noch eingebunden hast, dass müsste erst mal alles entfernt werden! So das hier die templates/user/gallery.htm und templates/gallery.htm angepasst werden kann!
    rules :: doku :: faq :: linkus
    0 Mitglieder finden den Beitrag gut.
  29. Mo. 28.03.2011 17:03 Uhr #29
    User Pic
    IRvD Mitglied
    Registriert seit
    30.03.2010
    Beiträge
    460
    Beitragswertungen
    31 Beitragspunkte
    Also ich bin jetzt ja mal völlig verwirrt!

    Ich würde gerne das wie oben beschrieben alle Bilder die mit[img) eingebunden werden mit dieser Lightbox angezeigt werden:

    Lightbox Mod 1.1 von T0P0LIN0
    externer Link


    Was genau muss ich nun tun. Mir ist das leider zu verirrent mit den ganzen Beiträgen, da hier über mehere Boxen gesprochen wird.

    Würd mich freuen wenn mir jemand helfen könnte.


    _________

    Oder ist jemand der Meinung is sollte nicht die Lightbox nehmen sondern einen andere, ich sah es gibt Greybox und Fancybox. Kenne den Unterschied leider nich.


    Zuletzt modifiziert von IRvD am 28.03.2011 - 17:05:07
    0 Mitglieder finden den Beitrag gut.
  30. Mo. 28.03.2011 17:11 Uhr #30
    User Pic
    Fonsi1 Mitglied
    Registriert seit
    01.05.2010
    Beiträge
    455
    Beitragswertungen
    35 Beitragspunkte
    Schaumal hier.
    In den Links, wird die Lightbox erklärt wie man sie wo einbaut.
    externer Link
    externer Link
    externer Link
    externer Link
    externer Link
    externer Link
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu Allgemein

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten