Lightbox im CP Bilderwechsel?

[hausmeister]

dann kümmere ich mich um das template und
stelle es wie bei dem anderen template zur verfügung.

der hausmeister

[pepe]

Oh prima... dann kann ich ja den nächsten virtuellen Sandkuchen backen

Meine virtuellen Förmchen hab ich mir schon mal rausgelegt:
http://webdesign-dp.de/pepes-sandbox/in ... othgallery

[pepe]

Mich hat doch der Hafer gestochen und ich habs mal versucht...
http://webdesign-dp.de/pepes-sandbox/in ... othgallery

Nur - um mal bei der verwendeten Metapher zu bleiben - ich bekomme es NICHT gebacken, das die Bildchen von alleine "losrauschen"

Hab ich den falschen Sand oder sind meine Förmchen einfach zu alt?
Wer schiebt mich mal in die richtige Richtung???

Ich hab das mit dem CP BILDER SPEZIAL gemacht... bis auf das autoSliden ging das ja ganz prima!


EDIT:
Ach wenn doch alles so einfach wäre...

<script type="text/javascript">
// <![CDATA[
function startGallery() {
var myGallery = new gallery($(\'myGallery\'), {
timed: true,
defaultTransition: \'fadeslideleft\'
});
}
window.onDomReady(startGallery);
// ]]>
</script>

true = slider automatisch starten

false =slider NICHT automatisch starten

[pepe]

Ich habs jetzt "einigermassen" mit meiner smoothGallery http://webdesign-dp.de/pepes-sandbox/in ... othgallery

Lediglich die Geschichte, das Lightbox-Popupbild aus dem Slider hin zu bekommen... da fummle ich noch


Zur Realisierung der SmoothGallery habe ich mir das Scriptpaket hier besorgt:
http://smoothgallery.jondesign.net/what/

Im Downloadbereich hatte ich mich für diese Version entschieden:
Using Mootools 1.11 ?
Download the stable version compressed archive (including mootools v1.11) (recommended too)

Und diese Datei hier heruntergeladen: SmoothGallery-2.0.zip
http://smoothgallery.jondesign.net/mint ... ry-2.0.zip


Wo ich die Dateien abgelegt habe, ist aus dem nachfolgenden Script zu ersehen.

Den img-Ordner mit allen Background-Images und Icons habe ich unterhalb des css-Ordners abgelegt:
...../template/inc_js/smoothgallery/css/img/

Das Template ist abzulegen als: pepes-smoothgallery.tmpl
Innerhalb der Dateistruktur von phpwcms: ...../template/inc_cntpart/imagespecial/pepes-smoothgallery.tmpl

Damit sollte auch der weniger geübte phpwcms-User schon klar kommen.

---------------------------------------------------------------

Im CP BILDER SPEZIAL sind nun:

- die gewünschen Bilder aus der Dateizentrale auszuwählen
- Bildunterzeile zufügen wenn gewünscht = Bildtitel
- Template auswählen: pepes-smoothgallery.tmpl
- Die Abmessungen der Bilder des Sliders eintragen (bei mir sind das 100x75px und 538x300px )
- Die CSS-Datei des Sliders ggf. bezüglich des Finetunings überarbeiten...


Es kann Effekt 1 bis Effekt 3 verwendet werden
---------------------------------------

Effekt 1: Aktivierung der Autostartfunktion des Sliders
Effekt 2: Copyrightvermerk mit Link als Untertitel des Sliders
Effekt 3: Erweiterte Anzeige hinter den Copyright... je nach eigenen Vorstellungen (RTs von phpwcms sind verwendbar!!!)


Wenn jemand mal weiter machen will, hier mein Template... gleich mit der "Kurzbeschreibung" dabei, so hat man alles in einem "Fenster" ( Dieses Template ablegen als: .../template/inc_cntpart/imagespecial/pepes-smoothgallery.tmpl ) :

Code: Select all

Zur Realisierung der SmoothGallery habe ich mir das Scriptpaket hier besorgt:
http://smoothgallery.jondesign.net/what/

Im Downloadbereich hatte ich mich für diese Version entschieden:
Using Mootools 1.11 ? 
Download the stable version compressed archive (including mootools v1.11) (recommended too)

Und diese Datei hier heruntergeladen: SmoothGallery-2.0.zip
http://smoothgallery.jondesign.net/mint/pepper/tillkruess/downloads/tracker.php?uri=http%3A//smoothgallery.jondesign.net/files/SmoothGallery-2.0.zip


Wo ich die Dateien abgelegt habe, ist aus dem nachfolgenden Script zu ersehen.

Den img-Ordner mit allen Background-Images und Icons habe ich unterhalb des css-Ordners abgelegt:
...../template/inc_js/smoothgallery/css/img/

Dieses Template hier ist abzulegen als: pepes-smoothgallery.tmpl
Innerhalb der Dateistruktur von phpwcms: ...../template/inc_cntpart/imagespecial/pepes-smoothgallery.tmpl

Damit sollte auch der weniger geübte phpwcms-User schon klar kommen.

--------------------------------------------------------------------

Im CP BILDER SPEZIAL sind nun:

- die gewünschen Bilder aus der Dateizentrale auszuwählen
- Bildunterzeile zufügen wenn gewünscht = Bildtitel
- Template auswählen: pepes-smoothgallery.tmpl
- Die Abmessungen der Bilder des Sliders eintragen (bei mir sind das 100x75px und 538x300px )
- Die CSS-Datei des Sliders ggf. bezüglich des Finetunings überarbeiten...


Es kann Effekt 1 bis Effekt 3 verwendet werden
----------------------------------------------

Effekt 1: 
Aktivierung der Autostartfunktion des Sliders

Effekt 2: 
Copyrightvermerk mit Link als Untertitel des Sliders

Effekt 3: 
Erweiterte Anzeige hinter den Copyright... je nach eigenen Vorstellungen (RTs von phpwcms sind verwendbar!!!)



<!--IMAGES_HEADER_START//-->

<!-- START :: pepes-smoothgallery.tmpl ========== ========== ========== -->

<div id="pepes-smoothGallery">

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

   <div style="display:block;" class="jdGallery withArrows" id="myGallery">
<!--IMAGES_HEADER_END//-->

         <!-- Alternative Eintragungen für den Image-Link unterhalb von <p>...</p> -->
         <a href="#" title="open image" class="open"></a>
         <a href="{IMAGE_ABS}" title="open image" class="open"><img src="{IMAGE_ABS}" alt="[CAPTION]{CAPTION}[/CAPTION]" border="0" /></a>

<!--IMAGES_ENTRY_START//-->
      [ZOOM]<div class="imageElement">
         <h3>[CAPTION]{CAPTION}[/CAPTION]</h3>
         <p>[EFFECT_2][http://phpwcms-templates.de (c) 2009 by pepe][/EFFECT_2][EFFECT_3] || {CATEGORY} | {TITLE}[/EFFECT_3]</p>
         <a href="#" title="open image" class="open"></a>
         <img src="{IMAGE_ABS}" class="full" alt="" />
         <img src="{THUMB_ABS}" class="thumbnail" alt="" />[/ZOOM][ZOOM_ELSE][IMAGE_URL]<a href="{IMAGE_ABS}">[/IMAGE_URL]<img src="{THUMB_ABS}" alt="{THUMB_NAME}" class="full" border="0" />[IMAGE_URL]</a>[/IMAGE_URL][/ZOOM_ELSE]
      </div><!-- //imageElement -->
<!--IMAGES_ENTRY_END//-->

<!--IMAGES_ENTRY_SPACER_START//--><!--IMAGES_ENTRY_SPACER_END//-->

<!--IMAGES_ROW_SPACER_START//--><!--IMAGES_ROW_SPACER_END//-->

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

</div><!-- //pepes-smoothGallery -->

<!-- STOP :: pepes-smoothgallery.tmpl ========== ========== ========== -->
[PHP]
// Einbinden der zugeordneten CSS-Datei in den HTML-Head des Templates
$GLOBALS['block']['css']['slideshow.css'] 						= 'specific/jd.gallery.css';

// Einbinden der JavaScipt-Dateien in den HTML-Head des Templates
// $GLOBALS['block']['custom_htmlhead']['mootools.js'] 	          = LF.'  <script src="'.TEMPLATE_PATH.'inc_js/mootools/mootools.js" type="text/javascript"></script>';
$GLOBALS['block']['custom_htmlhead']['smoothgallery0.mootools.js'] = LF.'  <script src="'.TEMPLATE_PATH.'inc_js/mootools/mootools.v1.11.js" type="text/javascript"></script>';
$GLOBALS['block']['custom_htmlhead']['smoothgallery1.js']          = '  <script src="'.TEMPLATE_PATH.'inc_js/smoothgallery/scripts/jd.gallery.js" type="text/javascript"></script>';
$GLOBALS['block']['custom_htmlhead']['smoothgallery2.js']          = '  <script src="'.TEMPLATE_PATH.'inc_js/smoothgallery/scripts/jd.gallery.transitions.js" type="text/javascript"></script>';
$GLOBALS['block']['custom_htmlhead']['smoothgallery3.css']         = '  <link href="'.TEMPLATE_PATH.'inc_js/smoothgallery/css/jd.gallery.css" rel="stylesheet" type="text/css" media="screen" />'.LF;

$GLOBALS['block']['custom_htmlhead']['smoothgallery.script']       = '  <script type="text/javascript">
  // <![CDATA[
  function startGallery() {
     var myGallery = new gallery($(\'myGallery\'), { 
        [EFFECT_1]timed: true,                         // true = Slider laeuft automatisch, wenn Effekt 1 aktiviert ist [/EFFECT_1]
        defaultTransition: \'fadeslideleft\',  // Bewegungsrichtung des Sliders
        embedLinks: false,                   // true = Link aktivieren

    /* Mit nachfolgenden Einstellungen, kann die smoothGallery funktional angepasst werden. Bei Wertegleichheit kann die Zeile auch entfallen */

        fadeDuration: 500,                   //  500 = Ueberblenddauer in Millisekunden
        delay: 6500,                         // 9000 = Zykluszeit pro Bild in Millisekunden

        showArrows: true,                    // true = Pfeile anzeigen und aktivieren fuer vor und zurueck
        showCarousel: true,                  // true = Thunbnail-Auswahl anzeigen
        showInfopane: true,                  // true = Informations-Panel anzeigen

        preloader: true,                     // true = Preload aktivieren
        preloaderImage: true,                // true = Funktionsanzeige wenn Preload erfolgt
        preloaderErrorImage: true            // true = Preload-Fehler beim Preload anzeigen
     });
  }
  window.onDomReady(startGallery);
  // ]]>
  </script>'.LF;
[/PHP]
<!--IMAGES_FOOTER_END//-->

Das ist absolut genau das Template, welches ich auf meiner Seite verwendet habe.
Also deshalb keine Aufregung beim Testen... es geht wirklich!

Und wenn OG auf mootools 1.2 umgestellt hat, dann ändern wir einfach wieder...

EDIT
Habe gerade (16:20 Uhr) ein paar zusätzliche Einstell-Parameter in das Template eingefügt.
So können einige Funktionen der smoothGalery leichter angepasst werden, ohne weite Scrips anpacken zu müssen!

ggf. also noch mal runterladen oder nachpflegen!

[hausmeister]

super. werde ich die tage testen. danke

der hausmeister

[pepe]

Ich habe noch einmal eine etwas GÖSSERE Abmessung versucht und das geht mit ein paar Änderungen sehr fix...

CSS Datei einstellen und Abmessungen im CP anpassen ( 1 Minute Arbeit vielleicht... )

http://webdesign-dp.de/pepes-sandbox/in ... othgallery

Was mich jetzt mal interessiert, wie arbeitet die Seite in diversen Windows-Browsern und wie ist die Ladezeit, und das Nachladeverhalten, da ich bewußt nicht extrem geschrumpfte Bilder verwendet habe...

Kann man damit leben, oder muß trotzdem eine radikalere "Pixelreduzierung" vor dem Upload unbedingt sein???

Wäre über ein paar Aussagen sehr froh

[sunburn]

Hoi pepe

also bei mir mit Firefox 3.5 gehts ziemlich flott, nachladen ohne zu ruckeln..

gruss
Kurt

[pepe]

Danke... ich nehme auch an, das die Standzeit der Bilder (da laden wir mal schnell ein Bildchen nach...) und die DSL Anbindung so einiges kaschieren wird...

Wenn ich da noch an meine ersten Modem-Verbindungen denke... da sollte die ganze Seite möglichst < 40 kB sein...
Wie haben wir uns entwickelt... IRRE!

[DanielF]

Coole Sache!!!!

Mein Firefox stellt alles super dar...nur Safari, IE nicht!!





@Pepe: Wenn ich auf http://webdesign-dp.de/pepes-sandbox/in ... othgallery gehe, funktioniert alles bestens^^

Was könnte da los sein?

(Wenn ich neue Bilder hinzufüge, muss ich da bei Vorschau UND großansicht ein Bild hochladen? Kann er nicht aus der Großansciht ein Vorschaubild machen?)


Vielen Dank im Vorraus

Grüße
Daniel

[flip-flop]

Bild hochladen: Nein, dann stricke das eben um für Bilder <div>, dann hast du genau das was du suchst.
Sollte kein Problem sein.

Knut

[pepe]

Hast du das berücksichtigt?

http://forum.phpwcms.org/viewtopic.php? ... 15#p118343

[DanielF]

--> Um diese Gallery hier geht es:
http://neu.jugendhilfeverein-rv.de/index.php?gallery
schauts euch an...


In der neusten Version: "preloaderErrorImage: true" --- ist das Komma bereits weg!!

Firefox 3.0.12 --> Funktioniert Super

Hier gehts leider nicht!!!

- Google Chrome
- IE
- Safari

P.s.: Muss ich bei den Einstellungen irgendwas beachten? Vorschau, Spalten, Zurechtschneiden, Lightbox,... sind alles Optionen die auswählen könnte

Viele Grüße
Danke für die schnellen Antworten!!

KLASSE FORUM!!!!!!!

[pepe]

prüf noch einmal genau, ob du die folgenden Dateien aus dem Download auch an genau die angegebene Stelle kopiert hast!!!

<script src="template/inc_js/mootools/mootools.v1.11.js" type="text/javascript"></script>
<script src="template/inc_js/smoothgallery/scripts/jd.gallery.js" type="text/javascript"></script>

<script src="template/inc_js/smoothgallery/scripts/jd.gallery.transitions.js" type="text/javascript"></script>
<link href="template/inc_js/smoothgallery/css/jd.gallery.css" rel="stylesheet" type="text/css" media="screen" />

[flip-flop]

Es werden auf der Seite 2 mootools-Versionen geladen, das kann nicht funktionieren.

Knut

[DanielF]

Ihr seit echt Klasse!!

Richtig super wie schnell einem hier geholfen wird!

Also ich hab tatsächlich ...

<script src="template/inc_js/mootools/mootools.v1.11.js" type="text/javascript"></script>

diese Datei nicht an der richtgen Stelle eingefügt...

Es werden jetzt dennoch

- mootools.js
- mootools.v1.11.js

geladen

(ich weiß nicht genau was für was zuständig ist)

Das macht aber soweit ich jetzt beurteilen kann keine Probleme.

Vielen Dank nochmal

Viele grüße
Daniel