NAVIGATION
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:50] Knut Heermann (flip-flop) |
deutsch:phpwcms-system:artikel:contentparts:bilder-div:statische-bilder-klick-gallerie [2018/06/03 18:08] (current) |
||
|---|---|---|---|
| Line 4: | Line 4: | ||
| - | 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. | + | 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 Brosern außer Opera** //(Stand: V10.10 Build 1893)//. 8-O //(Markanteil: < 2%)// </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 83: | 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 156: | 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 176: | 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 204: | 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 254: | 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 284: | Line 283: | ||
| \\ | \\ | ||
| + | |||
| ==== CSS: ==== | ==== CSS: ==== | ||