Differences

This shows you the differences between two versions of the page.

deutsch:phpwcms-system:artikel:contentparts:bilder-div:statische-bilder-klick-gallerie [2010/02/08 09:26]
Knut Heermann (flip-flop)
deutsch:phpwcms-system:artikel:contentparts:bilder-div:statische-bilder-klick-gallerie [2018/06/03 18:08] (current)
Line 1: Line 1:
{{indexmenu_n>20}} {{indexmenu_n>20}}
-====== Galerie mit dauerhaften Bildern (kein Js) ======+====== Einfache CSS-Galerie (no JS) ======
-Eine einfache CSS basierte Bildergalerie , bei der das große Bild durch einen Klick auf das kleine Bild (Thumbnail) gewechselt wird. Es ist ebenso  möglich,das gewünschte Bild mit dem Link zu der Seite direkt aufzurufen. Es wird kein JavaScript verwendet. +Eine einfache **CSS basierte** Bildergalerie, bei der das große Bild durch einen Klick auf das kleine Bild //(Thumbnail)// gewechselt wird. \\ 
 +Es ist ebenso möglich, das gewünschte Bild im Link zur Seite direkt aufzurufen. Es wird **kein JavaScript** verwendet.
-<note>**Funktioniert in allen Brwosern außer Opera** (Stand: V10.10 Build 1893).</note>+<note>**Funktioniert in allen Browsern außer Opera** //(Stand: V10.10 Build 1893)//. 8-O //(Marktanteil: < 2%)// </note>
Line 61: Line 62:
 +**Neue Tags im template:**
 +<code>
 +[CP_TRIG_DEFINITION]                         // Begin Definiton
 +  
 +  [THUMBX_PREFIX] .... [/THUMBX_PREFIX]        // Thumb-Block before
 +  [THUMBX_PREFIX] .... [/THUMBX_SUFFIX]        // Thumb-Block after
 +  [IMAGEX_PREFIX] .... [/IMAGEX_PREFIX]        // Image-Block before
 +  [IMAGEX_SUFFIX] .... [/IMAGEX_SUFFIX]        // Image-Block after
-Neue Tags im template:+[/CP_TRIG_DEFINITION]                        // End Definiton
 +[CP_TRIG_WRAP_CONTENT]                       // Begin where the result is placed into
 +
 +  [CP_TRIG_CONTENT]                            // Begin Content
 +
 +    [THUMBX] .... [/THUMBX]                      // designated area
 +    [IMAGEX] .... [/IMAGEX]                      // designated area
 +
 +    [COUNTX]                                     // Running Counter >0
 +
 +  [/CP_TRIG_CONTENT]                           // End Content
 +
 +[/CP_TRIG_WRAP_CONTENT]                      // End where the result is placed into
 +</code>
 +
 +\\
**1.** Installation: **1.** Installation:
Line 74: Line 98:
  * Sichern und das Ergebnis im FE ansehen :-)   * Sichern und das Ergebnis im FE ansehen :-)
-<note> +<note important
-**Für Entwickler:**  +Der HTML-Kommentar <code><!--SORT_THUMBS_AND_IMAGES//--></code> muss im ausgabefähigen HTML-Text im Template stehen, damit das php-Script diesen CP für die Bearbeitung erkennt. //(Sonst würde jeder CP "Bilder <div>" von diesem Script bearbeitet)//.
- +
</note> </note>
Line 85: Line 107:
**Datei:**  /template/inc_cntpart/images/permanent_image_click_gallery.tmpl **Datei:**  /template/inc_cntpart/images/permanent_image_click_gallery.tmpl
- 
-<note> 
-**Augenmerk bitte auf die Bereiche:** 
-<code>[CP_TRIG_DEFINITION] 
-   
-  [THUMBX_SUFFIX] .... [/THUMBX_SUFFIX] 
-  [THUMBX_PREFIX] .... [/THUMBX_PREFIX] 
-  [IMAGEX_SUFFIX] .... [/IMAGEX_SUFFIX] 
-  [IMAGEX_PREFIX] .... [/IMAGEX_PREFIX] 
- 
-[/CP_TRIG_DEFINITION] 
- 
-[CP_TRIG_WRAP_CONTENT] 
- 
-  [CP_TRIG_CONTENT] 
- 
-    [THUMBX] .... [/THUMBX] 
-    [IMAGEX] .... [/IMAGEX] 
- 
-    [COUNTX] 
- 
-  [/CP_TRIG_CONTENT] 
- 
-[/CP_TRIG_WRAP_CONTENT] 
-</code> 
-</note> 
- 
Line 158: Line 153:
[CP_TRIG_DEFINITION] [CP_TRIG_DEFINITION]
-[THUMBX_SUFFIX] <ul id="thumbnails"+[THUMBX_PREFIX] <ul id="thumbnails">
-[/THUMBX_SUFFIX] +
-[THUMBX_PREFIX] <li class="close"><a href="#close"><img src="template/img/permanent_image_click_gallery/cancel_50x50.gif" alt="Close image" /></a></li> +
- </ul>+
[/THUMBX_PREFIX] [/THUMBX_PREFIX]
-[IMAGEX_SUFFIX] <div id="fullsize"> +[THUMBX_SUFFIX] <li class="close"><a href="#close"><;img src="template/img/permanent_image_click_gallery/cancel_50x50.gif" alt="Close image"; /></a></li
-[/IMAGEX_SUFFIX] + </ul> 
-[IMAGEX_PREFIX] <div id="close"></div+[/THUMBX_SUFFIX] 
- </div>+[IMAGEX_PREFIX] <div id="fullsize">
[/IMAGEX_PREFIX] [/IMAGEX_PREFIX]
 +[IMAGEX_SUFFIX] <div id="close"></div>
 + </div>
 +[/IMAGEX_SUFFIX]
[/CP_TRIG_DEFINITION] [/CP_TRIG_DEFINITION]
Line 178: Line 173:
[CP_TRIG_CONTENT] [CP_TRIG_CONTENT]
-[THUMBX] <li><a href="#pic{IMGID}"><img src="{THUMB_REL}" alt="pic{IMGID}" /></a></li><div class="[COUNTX]"></div>[/THUMBX]+[THUMBX] <li><a href="#pic{IMGID}"><img src="{THUMB_REL}" alt="pic{IMGID}" /></a></li><div class="TestThumb-[COUNTX]"></div>[/THUMBX]
[ZOOM] [ZOOM]
-[IMAGEX] <div id="pic{IMGID}"><img src="img/cmsimage.php/640x480x0x90/{IMGID}" alt="pic{IMGID}" /></div><div class="[COUNTX]"></div>[/IMAGEX]+[IMAGEX] <div id="pic{IMGID}"><img src="img/cmsimage.php/640x480x0x90/{IMGID}" alt="pic{IMGID}" /></div><div class="TestImage-[COUNTX]"></div>[/IMAGEX]
[/ZOOM] [/ZOOM]
Line 206: Line 201:
==== PHP: ==== ==== PHP: ====
-**Datei:** /template/inc_script/frontend_init/cp_trigg_sort_section.php+**Datei:** /template/inc_script/frontend_init/cp_trigg_sort_section.php \\ 
 +//(Alternativ kann auch dieser Programmteil [[deutsch/ersetzer_rts/frontend_init/cp_trigger/sort-section#php_script_v1.2]] verwendet werden. Die speziellen Tags müssen entsprechend angepasst werden)//. 
<code php |h cp_trigg_sort_section.php |h > <code php |h cp_trigg_sort_section.php |h >
Line 256: Line 253:
if ($_text['definition'][1][0]) {  // is there any content in definition section? if ($_text['definition'][1][0]) {  // is there any content in definition section?
- if (preg_match('/\[THUMBX_SUFFIX\](.*?)\[\/THUMBX_SUFFIX\]/ism',$_text['definition'][1][0], $_text['pre_suf'][1])) + if (preg_match('/\[THUMBX_PREFIX\](.*?)\[\/THUMBX_PREFIX\]/ism',$_text['definition'][1][0], $_text['pre_suf'][1]))
$_text['thumb'] = $_text['pre_suf'][1][1] . $_text['thumb']; $_text['thumb'] = $_text['pre_suf'][1][1] . $_text['thumb'];
- if (preg_match('/\[THUMBX_PREFIX\](.*?)\[\/THUMBX_PREFIX\]/ism',$_text['definition'][1][0], $_text['pre_suf'][2]))+ if (preg_match('/\[THUMBX_SUFFIX\](.*?)\[\/THUMBX_SUFFIX\]/ism',$_text['definition'][1][0], $_text['pre_suf'][2]))
$_text['thumb'] .= $_text['pre_suf'][2][1]; $_text['thumb'] .= $_text['pre_suf'][2][1];
- if (preg_match('/\[IMAGEX_SUFFIX\](.*?)\[\/IMAGEX_SUFFIX\]/ism',$_text['definition'][1][0], $_text['pre_suf'][3]))+ if (preg_match('/\[IMAGEX_PREFIX\](.*?)\[\/IMAGEX_PREFIX\]/ism',$_text['definition'][1][0], $_text['pre_suf'][3]))
$_text['image'] = $_text['pre_suf'][3][1] . $_text['image']; $_text['image'] = $_text['pre_suf'][3][1] . $_text['image'];
- if (preg_match('/\[IMAGEX_PREFIX\](.*?)\[\/IMAGEX_PREFIX\]/ism',$_text['definition'][1][0], $_text['pre_suf'][4]))+ if (preg_match('/\[IMAGEX_SUFFIX\](.*?)\[\/IMAGEX_SUFFIX\]/ism',$_text['definition'][1][0], $_text['pre_suf'][4]))
$_text['image'] .= $_text['pre_suf'][4][1]; $_text['image'] .= $_text['pre_suf'][4][1];
} }
Line 286: Line 283:
\\ \\
 +
==== CSS: ==== ==== CSS: ====
deutsch/phpwcms-system/artikel/contentparts/bilder-div/statische-bilder-klick-gallerie.1265617568.txt.gz · Last modified: 2018/06/03 18:07 (external edit)
www.planmatrix.de www.chimeric.de Creative Commons License Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0