[solved]Bild in Lightbox oeffnen via Textlink statt Thumb

[santscho]

Ist das irgendwie moeglich?

[juergen]

Mediabox ?!

[pepe]

Für mich ist es immer vorteilhaft, wenn ich mit Bordmitteln arbeiten kann.
Deshalb habe gerade mal ein Experiment mit dem ContentPart: Bilder < div > gemacht... und klappt!

Die erforderlichen Linktexte gebe ich im Feld für die Captions ein.
Bild-Abstand = Linktext-Abstand
Anzahl der Spalten = Anzahl der Textlinks in einer Zeile

Die Farben sollen nur zeigen, "was passiert wenn"...
Ist zwar nur eine grober Versuch... aber du kannst ja mal testen, vielleicht hast du weitere Ideen

Code: Select all

<!--IMAGE_SETTINGS_START//-->
; this is formatted like WIN.INI
; please: do not use comments for value lines
; settings will overwrite CP settings
;width			= 100
;height			= 100
;col				= 1
;zoom			   = 1
;crop			   = 0
;space			= 10
;lightbox		= 1
;nocaption		= 0
; 0 = no center, 1 = horizontal/vertical, 2 = horizontal, 3 = vertical
;center_image	= 0
<!--IMAGE_SETTINGS_END//-->

<!--IMAGES_HEADER_START//-->

[TITLE]<h3>{TITLE}</h3>[/TITLE]
[SUBTITLE]<h4>{SUBTITLE}</h4>[/SUBTITLE]
[TEXT]{TEXT}[/TEXT]

<div class="images" id="images{ID}">
<!--IMAGES_HEADER_END//-->

<!--IMAGES_ENTRY_START//-->
   <div class="imageEntry" style="float:left;" id="img{IMGID}">
     <a href="{IMAGE_REL}" rel="lightbox[images{ID}]" title="{CAPTION}" target="_blank">{CAPTION}</a>
   </div>
	<!-- 
		Thumbnail image:    {THUMB_NAME}
		  relative:         {THUMB_REL}
		  absolute:         {THUMB_ABS}
		  height/width:     {THUMB_HEIGHT}px/{THUMB_WIDTH}px
		  height/width max: {THUMB_HEIGHT_MAX}px/{THUMB_WIDTH_MAX}px
		  columns:          {THUMB_COLUMNS}
		  image ID:         {IMAGE_ID}
		  image Hash:       {IMAGE_HASH}
		
		If you are not sure wrap zoomed image:
		[ZOOM]
		Zoomed (big) image: {IMAGE_NAME}
		  relative: {IMAGE_REL}
		  absolute: {IMAGE_ABS}
		  height/width: {IMAGE_HEIGHT}px/{IMAGE_WIDTH}px
		[/ZOOM]		
	//-->
<!--IMAGES_ENTRY_END//-->

<!--IMAGES_ENTRY_SPACER_START//-->
	<div style="float: left; width: {SPACE}px; height: 5px; background: red;"></div><!-- space between images {SPACE}px -->
<!--IMAGES_ENTRY_SPACER_END//-->

<!--IMAGES_ROW_SPACER_START//-->
	<div style="clear: both; height: {SPACE}px; background: blue;"></div><!-- space between image rows {SPACE}px -->
<!--IMAGES_ROW_SPACER_END//-->

<!--IMAGES_FOOTER_START//-->
</div>
<!--IMAGES_FOOTER_END//-->

[flip-flop]

Hier die Einfachvariante bzw. fast identisch bzw. identisch:

Code: Select all

<a target="_blank" title="{TITLE}" rel="lightbox[cat-{ID}]" href="{IMAGE_REL}">{ALT}</a>

Mit Linktext im Alt-Atribut in der Bildunterzeile

Code: Select all

CaptionText|Alt-Text

[santscho]

Vielen Dank! Haut wunderbar hin!

[Oliver Georgi]

Auch gut geeignet, die Fancybox 2 anzubinden MooTools wird eh rausfallen, dann ist auch die Lightbox (etwas outdated) obsolete.

[pepe]

Wenn MooTools "raus" ist... was wird dann weiter "drin" sein?

Man kann dann sich dann schon mal nach neuen Lösungen (solider etc.) umsehen.

So ein integrierter Bilderslider incl. Template-Datei mit Schaltern für Variantensteuerung übrigens... das wär' doch mal was schönes als CP...

[pepe]

Habe mir gerade mal Fancybox 2 angesehen... feines Teil. Das wäre perfekt als CP oder Modul

Und die Kosten für professionelle Einsätze sind auch akzeptabel.

[flip-flop]

Wo sind die Kosten aufgeführt??

[pepe]

PREISE: sites.fastspring.com/fancyapps/product/store

[Oliver Georgi]

Wenn MooTools "raus" ist... was wird dann weiter "drin" sein?
Man kann dann sich dann schon mal nach neuen Lösungen (solider etc.) umsehen.
So ein integrierter Bilderslider incl. Template-Datei mit Schaltern für Variantensteuerung übrigens... das wär' doch mal was schönes als CP...

Es wird von meiner Seite erst mal keine neuen CPs mehr geben. Eher fallen welche heraus. MooTools ist solide, es ist nur nicht zu leisten, mehrere Frameworks im CMS zu pflegen. jQuery ist leichter pflegbar und aus Usersicht variabler.

Eine einfache Lösung im CMS reicht.

[kmstario]

Auch gut geeignet, die Fancybox 2 anzubinden ...

Au ja ja ja, die wär mehr als super

[pepe]

Ich habe gerade in einer r431 die fancyBox 2 integriert...
Geht mit dem CP Bilder < div > ja eigentlich recht einfach, lediglich eine neue Vorlage ist erforderlich...

EIGENTLICH...
Alles absolut den Vorschriften entsprechend... am Ende sieht alles so aus im Code wie im Beispiel vorgegeben

ABER:
Trotzdem keine Funktion hin zu bekommen... weiss der Himmel wieso
Alles schon 10 mal nachgeprüft...
Alle Dateien an der korrekten Stelle vorhanden!
Alle Scripts der Reihenfolge nach im head geladen!
Bilder und Klassen mit passenden Links nach Vorgabe in der Code-Ausgabe...
Verdammte Sch....

ERGEBNIS:
Es wird bei Mausklick immer nur ein neues Fenster mit dem jeweiligen maximierten Bild geöffnet
Es wird bei Mausklick immer nur das jeweiligen maximierten Bild im aktuelle Fenster geöffnet

Ich geh jetzt mal zum Toben in den Keller...

[Oliver Georgi]

man muss die FancyBox auch initialisieren

[pepe]

Ich hab das für die ersten Versuche provisorisch so gelöst...
(Deshalb NICHT konsequent Deine NEUE Version der Einbindung, damit die vorgegebene Reihenfolge passte.
Dachte mir, dass es ggf. daran liegen könnte?)

Code: Select all

<!--IMAGE_SETTINGS_START//-->
; this is formatted like WIN.INI
; please: do not use comments for value lines
; settings will overwrite CP settings
width			   = 150
height			= 150
col				= 1000
zoom			   = 1
crop			   = 0
space			   = 0
lightbox		   = 0 (1 auch getestet)
nocaption		= 1
; 0 = no center, 1 = horizontal/vertical, 2 = horizontal, 3 = vertical
center_image	= 0
<!--IMAGE_SETTINGS_END//-->

<!--IMAGES_HEADER_START//-->
[TITLE]<h3>{TITLE}</h3>[/TITLE]
[SUBTITLE]<h4>{SUBTITLE}</h4>[/SUBTITLE]
[TEXT]{TEXT}[/TEXT]

<div>
<!--IMAGES_HEADER_END//-->


<!--IMAGES_ENTRY_START//-->
      <a class="fancybox-buttons" data-fancybox-group="fancyBox-{CPID}" href="{IMAGE_REL}"><img src="{THUMB_REL}" alt="" /></a>
<!--IMAGES_ENTRY_END//-->


<!--IMAGES_ENTRY_SPACER_START//--><!-- space between images {SPACE}px --><!--IMAGES_ENTRY_SPACER_END//-->

<!--IMAGES_ROW_SPACER_START//--><!-- space between image rows {SPACE}px --><!--IMAGES_ROW_SPACER_END//-->


<!--IMAGES_FOOTER_START//-->
</div>

<!-- CSS: fancybox/source/jquery.fancybox.css -->
<!-- CSS: fancybox/source/helpers/jquery.fancybox-buttons.css -->
<!-- CSS: fancybox/source/helpers/jquery.fancybox-thumbs.css -->
[PHP]
$GLOBALS['block']['custom_htmlhead']['fancyBox-JS'] = '  
  <script type="text/javascript" src="fancybox/lib/jquery-1.7.1.min.js"></script>
  <script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
  <script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js"></script>
  <script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js"></script>
  <script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js"></script>
';
$GLOBALS['block']['custom_htmlhead']['fancyBox-Einstellungen'] = '  <script type="text/javascript">
  $(document).ready(function() {

     $(".fancybox-buttons").fancybox({
        openEffect  : "none",
        closeEffect : "none",
        prevEffect  : "none",
        nextEffect  : "none",
        closeBtn    : false,

        helpers : {
           title : {
              type  : "inside"
           },
           buttons : {}
        },

        afterLoad : function() {
           this.title = "Image " + (this.index + 1) + " of " + this.group.length + (this.title ? " - " + this.title : "");
        }
     });

  });
  </script>
';
[/PHP]
<!--IMAGES_FOOTER_END//-->

Fehlt da noch was ???


Tante EDIT sagt:
Ach menno... kaum macht mans richtig, schon geht's