Lightbox im CP Bilderwechsel?

Bitte alle templatebezogenen Beiträge in diesem Forum veröffentlichen.
hausmeister
Posts: 219
Joined: Thu 18. Dec 2008, 12:45

Re: Lightbox im CP Bilderwechsel?

Post by hausmeister » Tue 7. Jul 2009, 11:13

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

der hausmeister

pepe
Posts: 3954
Joined: Mon 19. Jan 2004, 13:46

Re: Lightbox im CP Bilderwechsel?

Post by pepe » Tue 7. Jul 2009, 11:23

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

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

pepe
Posts: 3954
Joined: Mon 19. Jan 2004, 13:46

Re: Lightbox im CP Bilderwechsel?

Post by pepe » Wed 8. Jul 2009, 02:19

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>
:idea: :idea: :idea:

true = slider automatisch starten

false =slider NICHT automatisch starten


:idea: :idea: :idea:

pepe
Posts: 3954
Joined: Mon 19. Jan 2004, 13:46

Re: Lightbox im CP Bilderwechsel?

Post by pepe » Wed 8. Jul 2009, 12:27

Ich habs jetzt "einigermassen" mit meiner smoothGallery :D 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! :wink:

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!
Last edited by pepe on Tue 21. Jul 2009, 13:24, edited 7 times in total.

hausmeister
Posts: 219
Joined: Thu 18. Dec 2008, 12:45

Re: Lightbox im CP Bilderwechsel?

Post by hausmeister » Wed 8. Jul 2009, 14:09

super. werde ich die tage testen. danke ;)

der hausmeister

pepe
Posts: 3954
Joined: Mon 19. Jan 2004, 13:46

Re: Lightbox im CP Bilderwechsel?

Post by pepe » Wed 8. Jul 2009, 15:59

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 :D

sunburn
Posts: 46
Joined: Wed 2. Mar 2005, 12:13

Re: Lightbox im CP Bilderwechsel?

Post by sunburn » Wed 8. Jul 2009, 19:01

Hoi pepe

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

gruss
Kurt

pepe
Posts: 3954
Joined: Mon 19. Jan 2004, 13:46

Re: Lightbox im CP Bilderwechsel?

Post by pepe » Wed 8. Jul 2009, 19:06

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
Posts: 17
Joined: Mon 18. May 2009, 12:30

Re: Lightbox im CP Bilderwechsel?

Post by DanielF » Wed 22. Jul 2009, 16:59

Coole Sache!!!!

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

Image

Image

@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

User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:

Re: Lightbox im CP Bilderwechsel?

Post by flip-flop » Wed 22. Jul 2009, 17:41

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
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )

pepe
Posts: 3954
Joined: Mon 19. Jan 2004, 13:46

Re: Lightbox im CP Bilderwechsel?

Post by pepe » Wed 22. Jul 2009, 21:09


DanielF
Posts: 17
Joined: Mon 18. May 2009, 12:30

Re: Lightbox im CP Bilderwechsel?

Post by DanielF » Wed 22. Jul 2009, 22:12

--> 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
Posts: 3954
Joined: Mon 19. Jan 2004, 13:46

Re: Lightbox im CP Bilderwechsel?

Post by pepe » Thu 23. Jul 2009, 02:38

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" />
Last edited by pepe on Thu 23. Jul 2009, 12:36, edited 1 time in total.

User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:

Re: Lightbox im CP Bilderwechsel?

Post by flip-flop » Thu 23. Jul 2009, 06:22

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

Knut
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )

DanielF
Posts: 17
Joined: Mon 18. May 2009, 12:30

Re: Lightbox im CP Bilderwechsel?

Post by DanielF » Thu 23. Jul 2009, 11:24

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

Post Reply