Lightbox für alle Bilder

Gehe zu Seite:

Geschlossen

Seite 1 von 2 ‹12 ›

Mi. 28.04.2010 15:54 Uhr #1

Robert0506 Mitglied

Registriert seit
24.05.2009

Beiträge
204

Beitragswertungen

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.
- zitieren
Mi. 28.04.2010 16:56 Uhr #2

Jecky79 Mitglied

Registriert seit
28.04.2010

Beiträge
74

Beitragswertungen

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.
- zitieren
Mi. 28.04.2010 17:20 Uhr #3

Robert0506 Mitglied

Registriert seit
24.05.2009

Beiträge
204

Beitragswertungen

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.
- zitieren
Mi. 28.04.2010 18:06 Uhr #4

orsnipe Mitglied

Registriert seit
19.06.2008

Beiträge
425

Beitragswertungen

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.
- zitieren
Mi. 28.04.2010 18:48 Uhr #5

GeCk0 Hall Of Fame

Registriert seit
01.05.2009

Beiträge
2.989

Beitragswertungen

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.
- zitieren
Mi. 28.04.2010 19:13 Uhr #6

Robert0506 Mitglied

Registriert seit
24.05.2009

Beiträge
204

Beitragswertungen

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.
- zitieren
Mi. 28.04.2010 19:30 Uhr #7

GeCk0 Hall Of Fame

Registriert seit
01.05.2009

Beiträge
2.989

Beitragswertungen

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.
- zitieren
Mi. 28.04.2010 19:43 Uhr #8

Robert0506 Mitglied

Registriert seit
24.05.2009

Beiträge
204

Beitragswertungen

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.
- zitieren
Mi. 28.04.2010 19:46 Uhr #9

GeCk0 Hall Of Fame

Registriert seit
01.05.2009

Beiträge
2.989

Beitragswertungen

jo sieht doch gut aus
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.
- zitieren
Mi. 28.04.2010 20:04 Uhr #10

Robert0506 Mitglied

Registriert seit
24.05.2009

Beiträge
204

Beitragswertungen

$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.
- zitieren
Mi. 28.04.2010 22:48 Uhr #11

Robert0506 Mitglied

Registriert seit
24.05.2009

Beiträge
204

Beitragswertungen

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.
- zitieren
Mi. 28.04.2010 22:58 Uhr #12

Lord|Schirmer Administrator

Registriert seit
21.03.2007

Beiträge
7.680

Beitragswertungen

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:

?
1
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.
- zitieren
Mi. 28.04.2010 23:09 Uhr #13

Robert0506 Mitglied

Registriert seit
24.05.2009

Beiträge
204

Beitragswertungen

Hmmm wird in neuem Fenster geöffnet!

pixelphysics.de // Günstige Webdesigns und Anpassungen an Ilch
0 Mitglieder finden den Beitrag gut.
- zitieren

Mi. 28.04.2010 23:11 Uhr #14

Lord|Schirmer Administrator

Ä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.

zitieren

Mi. 28.04.2010 23:17 Uhr #15

Robert0506 Mitglied

Registriert seit
24.05.2009

Beiträge
204

Beitragswertungen

Klappt irgendwie noch nicht!

pixelphysics.de // Günstige Webdesigns und Anpassungen an Ilch
0 Mitglieder finden den Beitrag gut.
- zitieren
Do. 29.04.2010 13:19 Uhr #16

Robert0506 Mitglied

Registriert seit
24.05.2009

Beiträge
204

Beitragswertungen

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.
- zitieren

Do. 29.04.2010 16:08 Uhr #17

Mairu Coder

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.

zitieren

Do. 29.04.2010 17:10 Uhr #18

Robert0506 Mitglied

Registriert seit
24.05.2009

Beiträge
204

Beitragswertungen

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.
- zitieren

Fr. 07.01.2011 02:02 Uhr #19

CaZper Mitglied

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.

zitieren

Di. 11.01.2011 01:57 Uhr #20

CaZper Mitglied

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.

zitieren

Sa. 26.03.2011 10:21 Uhr #21

butter Mitglied

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.

zitieren

Sa. 26.03.2011 10:32 Uhr #22

Lord|Schirmer Administrator

Registriert seit
21.03.2007

Beiträge
7.680

Beitragswertungen

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.
- zitieren

Sa. 26.03.2011 10:43 Uhr #23

butter Mitglied

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.

zitieren

Sa. 26.03.2011 11:37 Uhr #24

butter Mitglied

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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

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.

zitieren

So. 27.03.2011 10:39 Uhr #25

Lord|Schirmer Administrator

Registriert seit
21.03.2007

Beiträge
7.680

Beitragswertungen

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.
- zitieren

So. 27.03.2011 10:50 Uhr #26

butter Mitglied

also sollte ich für das Forum dies nur für die Bilder einstellen?

// 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

werde mein glück versuchen

Mein YouTube Kanal Ilch Boxen, Module etc

0 Mitglieder finden den Beitrag gut.

zitieren

So. 27.03.2011 10:52 Uhr #27

Lord|Schirmer Administrator

Registriert seit
21.03.2007

Beiträge
7.680

Beitragswertungen

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.
- zitieren

So. 27.03.2011 17:26 Uhr #28

Lord|Schirmer Administrator

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.

zitieren

Mo. 28.03.2011 17:03 Uhr #29

IRvD Mitglied

Registriert seit
30.03.2010

Beiträge
460

Beitragswertungen

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.
- zitieren
Mo. 28.03.2011 17:11 Uhr #30

Fonsi1 Mitglied

Registriert seit
01.05.2010

Beiträge
455

Beitragswertungen

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.
- zitieren

Geschlossen		Seite 1 von 2 ‹12 ›

	Zurück zu Allgemein

Beitrag zur Merkliste hinzufügen

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