NAVIGATION
This is an old revision of the document!
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). (Markanteil: < 2%) </note>
Basis: Click gallery with permanent images-27-09-2009
Frontend:
Backend:
Docu: –
Forum: –
Autor: K.Heermann (flip-flop) http://planmatrix.de 2010/01/12
- CSS made by http://www.cssplay.co.uk/
CMS version: >= V1.40
Version: V1.0
Update: –
Tag: –
Dateiename: cp_trigg_sort_section.php
Verzeichnis: /template/inc_script/frontend_init/
Dateiename: permanent_image_click_gallery.tmpl
Verzeichnis: /template/inc_cntpart/images/
Dateiename: permanent_image_click_gallery.css
Verzeichnis: /template/inc_css/specific/
Bedingung: → /config/phpwcms/conf.inc.php * $phpwcms['allow_cntPHP_rt'] = 1;
Die Möglichkeit um diese Art der Galerie verwenden zu können setzt eine andere Reihenfolge der HTMLausgabe voraus. Die Vorschaubilder und die Großansichten müssen jeweils in einem eigenen Block stehen.
Um das zu erreichen wird ein kleines php-Script eingesetzt.
Neue Tags im template:
1. Installation:
2. Im Gebrauch:
<note important> Der HTML-Kommentar
<!--SORT_THUMBS_AND_IMAGES//-->
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>
Datei: /template/inc_cntpart/images/permanent_image_click_gallery.tmpl
<note> Augenmerk bitte auf die Bereiche:
[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]
</note>
// ---- Loading the right CSS-file. $GLOBALS['block']['css']['permanent_image_click_gallery'] = 'specific/permanent_image_click_gallery.css';
permanent_image_click_gallery.tmpl
/* ******************************************************************** permanent_image_click_gallery.tmpl for the CP images div 12.01.10 KH (flip-flop) - http://planmatrix.de Knut Heermann Idea: http://www.cssplay.co.uk/menu/clickgallery.html Corresponding with the files -> /template/inc_css/specific/permanent_image_click_gallery.css Uses the cp-trigger php file: template/inc_script/frontend_init/cp_trigg_sort_section.php - Switch in your conf.inc.php: -> $phpwcms['allow_cntPHP_rt'] = 1; -> $phpwcms['allow_ext_init'] = 1; *********************************************************************** */ <!--IMAGES_HEADER_START//--> <!--SORT_THUMBS_AND_IMAGES//--> [TITLE]<h1>{TITLE}</h1>[/TITLE] [SUBTITLE]<h2>{SUBTITLE}</h2>[/SUBTITLE] [TEXT]{TEXT}[/TEXT] <div class="images" id="images{ID}"> <div id="gallery"> [CP_TRIG_DEFINITION] [THUMBX_SUFFIX] <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] [IMAGEX_SUFFIX] <div id="fullsize"> [/IMAGEX_SUFFIX] [IMAGEX_PREFIX] <div id="close"></div> </div> [/IMAGEX_PREFIX] [/CP_TRIG_DEFINITION] [CP_TRIG_WRAP_CONTENT] <!--IMAGES_HEADER_END//--> <!--IMAGES_ENTRY_START//--> [CP_TRIG_CONTENT] [THUMBX] <li><a href="#pic{IMGID}"><img src="{THUMB_REL}" alt="pic{IMGID}" /></a></li><div class="[COUNTX]"></div>[/THUMBX] [ZOOM] [IMAGEX] <div id="pic{IMGID}"><img src="img/cmsimage.php/640x480x0x90/{IMGID}" alt="pic{IMGID}" /></div><div class="[COUNTX]"></div>[/IMAGEX] [/ZOOM] [/CP_TRIG_CONTENT] <!--IMAGES_ENTRY_END//--> <!--IMAGES_FOOTER_START//--> [/CP_TRIG_WRAP_CONTENT] </div> <!-- gallery //--> </div> [PHP] // Load the right css classes $GLOBALS['block']['css']['permanent_image_click_gallery'] = 'specific/permanent_image_click_gallery.css'; [/PHP] <!--IMAGES_FOOTER_END//-->
Datei: /template/inc_script/frontend_init/cp_trigg_sort_section.php
<?php // ------------------------------------------------------------------------------------------- // obligate check for phpwcms constants if (!defined('PHPWCMS_ROOT')) {die("You Cannot Access This Script Directly, Have a Nice Day.");} // ------------------------------------------------------------------------------------------- /** * * ------------------------------------------------------------------------------------------- * V1.0 07.02.10 KH Sort Thumbs and zoomed Images into separate blocks * http://www.cssplay.co.uk/menu/click-gallery-previous-next.html * ------------------------------------------------------------------------------------------- */ function CP_IMAGES_SORT_THUMBS_AND_IMAGES($text, & $data) { // CP: 29 => image <div> CP: 31 => image special CP: 32 => register tabs if( $data['acontent_type'] == 29 AND strpos($text, '<!--SORT_THUMBS_AND_IMAGES//-->') ) { // Catch the thumb/image area from template preg_match_all('/\[CP_TRIG_CONTENT\](.*?)\[\/CP_TRIG_CONTENT\]/ism',$text, $_text['content']); if ($_text['content'][1][0]) { // is there any content? // Catch image by image and sort into the right section -------- $_text['thumb'] = ''; $_text['image'] = ''; foreach ( $_text['content'][1] as $key => $value ) { // parsing THUMBX (Section 1) preg_match('/\[THUMBX\](.*?)\[\/THUMBX\]/ism',$value, $_temp); $_temp[1] = str_replace('[COUNTX]', $key+1, $_temp[1]); $_text['thumb'] .= $_temp[1].LF; // parsing IMAGEX (Section 2) preg_match('/\[IMAGEX\](.*?)\[\/IMAGEX\]/ism',$value, $_temp); $_temp[1] = str_replace('[COUNTX]', $key+1, $_temp[1]); $_text['image'] .= $_temp[1].LF; } // Parsing the definition list ---------------------------------- preg_match_all('/\[CP_TRIG_DEFINITION\](.*?)\[\/CP_TRIG_DEFINITION\]/ism',$text, $_text['definition']); 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])) $_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])) $_text['thumb'] .= $_text['pre_suf'][2][1]; if (preg_match('/\[IMAGEX_SUFFIX\](.*?)\[\/IMAGEX_SUFFIX\]/ism',$_text['definition'][1][0], $_text['pre_suf'][3])) $_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])) $_text['image'] .= $_text['pre_suf'][4][1]; } // Kill all DEFINITION entries in template $text = preg_replace('/\[CP_TRIG_DEFINITION\](.*?)\[\/CP_TRIG_DEFINITION\]/ism', '<!--CP_TRIG_DEFINITION//-->', $text); // Insert new sorted content ------------------------------------ $text = preg_replace('/\[CP_TRIG_WRAP_CONTENT\](.*?)\[\/CP_TRIG_WRAP_CONTENT\]/ism', '<!--img_new_sort_order//-->'.LF.$_text['thumb'].LF.$_text['image'], $text); // fill content } } return $text; } // ---- END function register_cp_trigger('CP_IMAGES_SORT_THUMBS_AND_IMAGES'); ?>
Datei: /template/inc_css/specific/permanent_image_click_gallery.css
permanent_image_click_gallery.css
/* ================================================================ This copyright notice must be untouched at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menu/clickgallery.html Copyright (c) 2005-2009 Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements. 12.01.10 Enhanced: KH (flip-flop) - http://planmatrix.de Knut Heermann =================================================================== */ #gallery { width:640px; height:750px; margin:0 auto; position:relative; } ul#thumbnails { padding:0 0 0 10px; margin:0; list-style:none; } ul#thumbnails li { float:left; position:relative; top:430px; left: 15px; z-index: 999; } ul#thumbnails li a { height:50px; width:50px; padding:3px; display:block; text-decoration:none; background:#eee; } ul#thumbnails li a img {width:50px; height:50px; border:0;} ul#thumbnails li a:hover { background:#fc0; } ul#thumbnails li.close a { background:#eee; } ul#thumbnails li.close a:hover { background:#FFF2BF; } #gallery #fullsize { position:absolute; left:0; top:0; height:507px; width:642px; overflow:hidden; } #gallery #fullsize div {width:640px; height:480px; padding-top:25px;} #gallery #fullsize div img {display:block; margin:0 auto; border: 1px solid #000;}