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 im Link zur Seite direkt aufzurufen. Es wird kein JavaScript verwendet.

<note>Funktioniert in allen Browsern außer Opera (Stand: V10.10 Build 1893). 8-O (Marktanteil: < 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;

  • phpwcms['allow_ext_init'] = 1;




Beschreibung

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:

[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

[/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


1. Installation:

  • Erstelle aus den drei folgenden Texten die drei angegebenen Dateien in den angegebenen Verzeichnissen.

2. Im Gebrauch:

  • Fülle einen CP Bilder <div> mit deinen Einträgen (Siehe Beispiel oben).
  • Wähle als Vorlage: permanent_image_click_gallery.tmpl
  • Sichern und das Ergebnis im FE ansehen :-)

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


Template

Datei: /template/inc_cntpart/images/permanent_image_click_gallery.tmpl

CSS laden:

// ---- Loading the right CSS-file.
$GLOBALS['block']['css']['permanent_image_click_gallery'] = 'specific/permanent_image_click_gallery.css';


Template:

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_PREFIX]    <ul id="thumbnails">
[/THUMBX_PREFIX]
[THUMBX_SUFFIX]        <li class="close"><a href="#close"><img src="template/img/permanent_image_click_gallery/cancel_50x50.gif" alt="Close image" /></a></li>
    </ul>
[/THUMBX_SUFFIX]
[IMAGEX_PREFIX]    <div id="fullsize">
[/IMAGEX_PREFIX]
[IMAGEX_SUFFIX]        <div id="close"></div>
    </div>
[/IMAGEX_SUFFIX]
 
[/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="TestThumb-[COUNTX]"></div>[/THUMBX]
 
[ZOOM]
[IMAGEX]        <div id="pic{IMGID}"><img src="img/cmsimage.php/640x480x0x90/{IMGID}" alt="pic{IMGID}" /></div><div class="TestImage-[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//-->


PHP:

Datei: /template/inc_script/frontend_init/cp_trigg_sort_section.php
(Alternativ kann auch dieser Programmteil php_script_v1.2 verwendet werden. Die speziellen Tags müssen entsprechend angepasst werden).

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_PREFIX\](.*?)\[\/THUMBX_PREFIX\]/ism',$_text['definition'][1][0], $_text['pre_suf'][1]))
                    $_text['thumb'] = $_text['pre_suf'][1][1] . $_text['thumb'];
                if (preg_match('/\[THUMBX_SUFFIX\](.*?)\[\/THUMBX_SUFFIX\]/ism',$_text['definition'][1][0], $_text['pre_suf'][2]))
                    $_text['thumb'] .= $_text['pre_suf'][2][1];
                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'];
                if (preg_match('/\[IMAGEX_SUFFIX\](.*?)\[\/IMAGEX_SUFFIX\]/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');
 
?>


CSS:

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;}
deutsch/phpwcms-system/artikel/contentparts/bilder-div/statische-bilder-klick-gallerie.txt · Last modified: 2018/06/03 18:08 (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