.. You may want to use the usual include line. Uncomment and adjust the path. .. include:: ../Includes.txt =============== EXT: Cloud-Zoom =============== :Created: 2010-02-18T17:33:18 :Changed by: Jürgen Furrer :Changed: 2014-03-12T23:26:39 :Classification: jfcloudzoom :Keywords: Image, zoom, caption, jquery, t3jquery :Author: Juergen Furrer :Email: juergen.furrer@gmail.com :Info 4: :Language: en |img-1| |img-2| EXT: Cloud-Zoom - jfcloudzoom .. _EXT-Cloud-Zoom: EXT: Cloud-Zoom =============== Extension Key: jfcloudzoom Language: en Keywords: Image, zoom, caption, jquery, t3jquery Copyright 2000-2010, Juergen Furrer, Cloud-Zoom © 2010 by R Cecco. This document is published under the Open Content License available from http://www.opencontent.org/opl.shtml The content of this document is related to TYPO3 \- a GNU/GPL CMS/Framework available from www.typo3.org .. _Table-of-Contents: Table of Contents ----------------- `EXT: Cloud-Zoom 1 <#__RefHeading__2138_2087176985>`_ **`Introduction 3 <#__RefHeading__2140_2087176985>`_** `What does it do? 3 <#__RefHeading__2142_2087176985>`_ `Screenshots 3 <#__RefHeading__2144_2087176985>`_ **`Users manual 4 <#__RefHeading__2146_2087176985>`_** `Add page content “Cloud-Zoom” 4 <#__RefHeading__2148_2087176985>`_ `Add “Cloud-Zoom” to content images 5 <#__RefHeading__2150_2087176985>`_ `Add “Cloud-Zoom” to tt\_news 6 <#__RefHeading__2152_2087176985>`_ `Add “Cloud-Zoom” to tt\_productss 7 <#__RefHeading__2154_2087176985>`_ **`Administration 8 <#__RefHeading__2156_2087176985>`_** **`Configuration 9 <#__RefHeading__2158_2087176985>`_** `Reference 9 <#__RefHeading__2160_2087176985>`_ `FAQ 10 <#__RefHeading__2162_2087176985>`_ **`Known problems 11 <#__RefHeading__2164_2087176985>`_** **`To-Do list 12 <#__RefHeading__2166_2087176985>`_** **`ChangeLog 13 <#__RefHeading__2168_2087176985>`_** .. _Introduction: Introduction ------------ .. _What-does-it-do: What does it do? ^^^^^^^^^^^^^^^^ With this extension you are able to publish single images with a zoom, so, users can see the image more detailed. The same effect will be possible in tt\_news and tt\_product on the detailed view. .. _Screenshots: Screenshots ^^^^^^^^^^^ |img-3| Demo: `http://typo3.cms-jack.ch/de/erweiterungen/jfcloudzoom/ `_ .. _Users-manual: Users manual ------------ .. _Add-page-content-Cloud-Zoom: Add page content “Cloud-Zoom” ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Go to Web → Page Choose the page to add the new Cloud-Zoom Add new content Choose Plugin → “Cloud-Zoom” Go to tab “Plugin” Insert images to the field “Zoom images” Define the titles in “Image title” (one caption per line) Configure the Cloud-Zoom presentation in tab “Setting” Define the color and transparency settings in tab “Color” Use special options for your Cloud-Zoom in “Special” |img-4| |img-5| |img-6| .. _Add-Cloud-Zoom-to-content-images: Add “Cloud-Zoom” to content images ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ To add this, you have to modify the tt\_content.image.20 in your setup. Please see the example in static/setup.txt Go to Web → Page Add content type “Text with image” Go to tab “Media” Enable the “Cloud-Zoom - Activate” Choose a “Cloud-Zoom - Zoom factor” Change the image width and height if you like Add title for the images into “Title Text” |img-7| All other information's (position, options etc.) comes from the setup. .. _Add-Cloud-Zoom-to-tt-news: Add “Cloud-Zoom” to tt\_news ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ To add this effect to a news entry, you have to activate the Cloud- Zoom for every item individually. Go to Page → List Go to the SysFolder where you store your news item Edit the item you want to extend with the Cloud-Zoom Go to tab “Media” Enable the “Cloud-Zoom - Activate” Choose a “Cloud-Zoom - Zoom factor” Insert captions to the “Caption” |img-8| All other information's (position, options etc.) comes from the setup. .. _Add-Cloud-Zoom-to-tt-productss: Add “Cloud-Zoom” to tt\_productss ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ To add this effect to a product detail, you have to activate the Cloud-Zoom for every item individually. Go to Page → List Go to the SysFolder where you store your products Edit the product you want to extend with Cloud-Zoom Enable the “Cloud-Zoom - Activate” Choose a “Cloud-Zoom - Zoom factor” |img-9| All other information's (position, options etc.) comes from the setup. .. _Administration: Administration -------------- For administration, you can allow / disallow the following exclude fields for user: - Pagecontent: Activate - Pagecontent: Zoom factor - News: Activate - News: Zoom factor - Products: Activate - Products: Zoom factor You are able to change the following options in configuration: .. ### BEGIN~OF~TABLE ### .. _useSelectInsteadCheckbox: useSelectInsteadCheckbox ^^^^^^^^^^^^^^^^^^^^^^^^ .. container:: table-row Property useSelectInsteadCheckbox Data type boolean Description If set, most of checkboxes will turn into selectboxes, so you can choose "from TS" Default 0 .. ###### END~OF~TABLE ###### .. _Configuration: Configuration ------------- To install the extension you have to add the static “Cloud-Zoom” to your Template. |img-10| If you like to use this effect in tt\_news or tt\_products, you have to add the related static. You are able to define the settings once per template in constant editor, they will be used as default values in template based use and content elements. .. _Reference: Reference ^^^^^^^^^ plugin.tx\_ifcloudzoom\_pi1 .. ### BEGIN~OF~TABLE ### .. _jQueryNoConflict: jQueryNoConflict """""""""""""""" .. container:: table-row Property jQueryNoConflict Data type boolean Description Use the noConflict methode Default 1 .. _jsInFooter: jsInFooter """""""""" .. container:: table-row Property jsInFooter Data type boolean Description If set, the Javascript will be rendered in Footer Default 0 .. _jsMinify: jsMinify """""""" .. container:: table-row Property jsMinify Data type boolean Description If set, the Javascript will be minified Default 0 .. _jsInline: jsInline """""""" .. container:: table-row Property jsInline Data type boolean Description If set, the Javascript will be inserted into the inlineJS, after this, its possible to put it into externel files (config.removeDefaultJS = external) Default 0 .. _cssMinify: cssMinify """"""""" .. container:: table-row Property cssMinify Data type boolean Description If set, the CSS will be minified Default 0 .. _jQueryLibrary: jQueryLibrary """"""""""""" .. container:: table-row Property jQueryLibrary Data type file Description Location of the jQuery Lib, if empty or file does not exist, the script will not be included Default EXT:jfcloudzoom/res/jquery/js/jquery-1.7.2.min.js .. _jQueryCloudZoom: jQueryCloudZoom """"""""""""""" .. container:: table-row Property jQueryCloudZoom Data type file Description Location of the Cloud-Zoom, if empty or file does not exist, the script will not be included Default EXT:jfcloudzoom/res/jquery/js/jquery.cloudzoom-1.0.2.min.js .. ###### END~OF~TABLE ###### It's possible to define the following typoscript for different display types plugin.tx\_ifcloudzoom\_pi1.normal / .header / .content / .ttnews / .ttproducts .. ### BEGIN~OF~TABLE ### .. _imagewidth: imagewidth """""""""" .. container:: table-row Property imagewidth Data type string Description Define the image width Default 600m .. _imageheight: imageheight """"""""""" .. container:: table-row Property imageheight Data type string Description Define the image height Default 600m .. _thumbnailwidth: thumbnailwidth """""""""""""" .. container:: table-row Property thumbnailwidth Data type string Description Define the thumbnail width Default 100c .. _thumbnailheight: thumbnailheight """"""""""""""" .. container:: table-row Property thumbnailheight Data type string Description Define the thumbnail height Default 100c .. _scaleFactor: scaleFactor """"""""""" .. container:: table-row Property scaleFactor Data type integer Description The factor to scale the image Default 2 .. _position: position """""""" .. container:: table-row Property position Data type string Description The position of the scaled area, possible values are: inside,left,right,top,bottom Default inside .. _smoothMove: smoothMove """""""""" .. container:: table-row Property smoothMove Data type boolean Description Define the level of the smooth view (lower=less, higher=more) Default 3 .. _zoomWidth: zoomWidth """"""""" .. container:: table-row Property zoomWidth Data type string / integer Description Define the width of the scaled area (possible values: auto or integer values) Default .. _zoomHeight: zoomHeight """""""""" .. container:: table-row Property zoomHeight Data type string / integer Description Define the height of the scaled area (possible values: auto or integer values) Default .. _adjustX: adjustX """"""" .. container:: table-row Property adjustX Data type integer Description Adjust the scaled area verticaly Default -4 .. _adjustY: adjustY """"""" .. container:: table-row Property adjustY Data type integer Description Adjust the scaled area horizontaly Default -4 .. _showTitle: showTitle """"""""" .. container:: table-row Property showTitle Data type boolean Description If set, the title of the image will be displayed as caption Default 1 .. _softFocus: softFocus """"""""" .. container:: table-row Property softFocus Data type boolean Description If set, the Image will have a soft focus Default 0 .. _useThumbnails: useThumbnails """"""""""""" .. container:: table-row Property useThumbnails Data type boolean Description Use thumbnails in case of multiple images Default 0 .. _maxZindex: maxZindex """"""""" .. container:: table-row Property maxZindex Data type integer Description Defines the maximum z-index to use (must be greater as four) Default 99 .. _options: options """"""" .. container:: table-row Property options Data type string Description Enter own options (see `http://www.professorcloud.com/mainsite/cloud-zoom- integration.htm `_ ) Default .. _tint: tint """" .. container:: table-row Property tint Data type boolean Description Define the color for the tint Have to be hex color values (e.g. #ff00ff) Default .. _tintOpacity: tintOpacity """"""""""" .. container:: table-row Property tintOpacity Data type double Description Define the opacity of the tint Default .. _lensOpacity: lensOpacity """"""""""" .. container:: table-row Property lensOpacity Data type double Description Define the opacity of the lens Default .. _titleOpacity: titleOpacity """""""""""" .. container:: table-row Property titleOpacity Data type double Description Define the opacity of the title Default .. _image: image """"" .. container:: table-row Property image Data type cObject Description Defines the image, imageLinkWrap defines the link around the image (mandatory) Default .. _itemWrap: itemWrap """""""" .. container:: table-row Property itemWrap Data type stdWrap Description stdWrap around single image Default .. _thumbnail: thumbnail """"""""" .. container:: table-row Property thumbnail Data type cObject Description Defines the image of a thumbnail Default .. _thumbnailWrap: thumbnailWrap """"""""""""" .. container:: table-row Property thumbnailWrap Data type stdWrap Description stdWrap around a single thumbnail Default .. _thumbnailsWrap: thumbnailsWrap """""""""""""" .. container:: table-row Property thumbnailsWrap Data type stdWrap Description stdWrap around all thumbnails Default .. _stdWrap: stdWrap """"""" .. container:: table-row Property stdWrap Data type stdWrap Description stdWrap around all items Default .. ###### END~OF~TABLE ###### [tsref:(cObject).plugin.tx\_ifcloudzoom\_pi1] .. _generated: ((generated)) """"""""""""" .. _Example: Example ~~~~~~~ Here an example to define the Cloud-Zoom in TypoScript: :: plugin.tx_jfcloudzoom_pi1.normal { position = right zoomWidth = 200 zoomHeight = auto showTitle = 1 titleOpacity = 0.2 } Here an example to add the Cloud-Zoom to a marks: :: page.10.marks.HEADER_IMAGE < plugin.tx_jfcloudzoom_pi1 .. _FAQ: FAQ ^^^ .. _generated: ((generated)) """"""""""""" .. _I-like-to-add-some-scripts-css-files-globally-is-this-possible: I like to add some scripts / css -files globally, is this possible? ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ If you like to add the library globally you can set an empty string to the values. Only existing files will be included! This will work for jQueryLibrary and jQueryCloudZoom. .. _Known-problems: Known problems -------------- Report bugs at `http://forge.typo3.org/projects/show/extension- jfcloudzoom `_ .. _To-Do-list: To-Do list ---------- Report features at `http://forge.typo3.org/projects/show/extension- jfcloudzoom `_ .. _ChangeLog: ChangeLog --------- .. ### BEGIN~OF~TABLE ### .. _0-0-1: 0.0.1 ^^^^^ .. container:: table-row Version 0.0.1 Changes Initial development .. _0-0-2: 0.0.2 ^^^^^ .. container:: table-row Version 0.0.2 Changes Add documentation .. _0-1-0: 0.1.0 ^^^^^ .. container:: table-row Version 0.1.0 Changes Add DAM support for Ctype list .. _0-2-0: 0.2.0 ^^^^^ .. container:: table-row Version 0.2.0 Changes Add Cloud-Zoom to “Text with image” .. _0-3-0: 0.3.0 ^^^^^ .. container:: table-row Version 0.3.0 Changes Add Cloud-Zoom for tt\_news .. _0-3-1: 0.3.1 ^^^^^ .. container:: table-row Version 0.3.1 Changes Prevent multiple JS-script output .. _1-0-0: 1.0.0 ^^^^^ .. container:: table-row Version 1.0.0 Changes Now it's stable / Add tt\_products to display Cloud-Zoom .. _1-1-0: 1.1.0 ^^^^^ .. container:: table-row Version 1.1.0 Changes Add Cloud-Zoom gallery .. _1-1-1: 1.1.1 ^^^^^ .. container:: table-row Version 1.1.1 Changes Change the title for Cloud-Zoom gallery / Use pageRenderer for script includ .. _1-1-2: 1.1.2 ^^^^^ .. container:: table-row Version 1.1.2 Changes Small bugfix / Add jQuery 1.4.3 .. _1-1-3: 1.1.3 ^^^^^ .. container:: table-row Version 1.1.3 Changes Add jQuery 1.4.4 / Small bugfix (#10984) .. _1-2-0: 1.2.0 ^^^^^ .. container:: table-row Version 1.2.0 Changes Add useSelectInsteadCheckbox to select „from TS“ / Add slider for some BE-Forms .. _1-2-1: 1.2.1 ^^^^^ .. container:: table-row Version 1.2.1 Changes Add support for TYPO3 4.5 / Fix default value of adjustX and adjustY .. _1-2-2: 1.2.2 ^^^^^ .. container:: table-row Version 1.2.2 Changes Add jQuery 1.5.0 / Add jQuery 1.5.1 .. _1-3-0: 1.3.0 ^^^^^ .. container:: table-row Version 1.3.0 Changes Add exclude to all flexform-fields / Add jQuery 1.5.2 / Fix tt\_product view for typo3 4.5 .. _1-3-1: 1.3.1 ^^^^^ .. container:: table-row Version 1.3.1 Changes Fix the flexform data extraction / Remove unused scripts .. _1-3-2: 1.3.2 ^^^^^ .. container:: table-row Version 1.3.2 Changes Add jQuery 1.6.2 / Fix jsInFooter / Convert linefeed to Unix .. _1-3-3: 1.3.3 ^^^^^ .. container:: table-row Version 1.3.3 Changes Use the new color picker of jftcaforms / Fix dam\_cat language overlay (#30082) / Add jQuery 1.6.4 .. _1-3-4: 1.3.4 ^^^^^ .. container:: table-row Version 1.3.4 Changes Fix caption for DAM (#31135) .. _1-3-5: 1.3.5 ^^^^^ .. container:: table-row Version 1.3.5 Changes Add jQuery 1.7.0 / Add static for tt\_content (#31635) .. _1-3-6: 1.3.6 ^^^^^ .. container:: table-row Version 1.3.6 Changes Add jQuery 1.7.1 .. _1-3-7: 1.3.7 ^^^^^ .. container:: table-row Version 1.3.7 Changes Add maxZindex (#34430) .. _1-3-8: 1.3.8 ^^^^^ .. container:: table-row Version 1.3.8 Changes Fix DAM-Selection .. _1-3-9: 1.3.9 ^^^^^ .. container:: table-row Version 1.3.9 Changes Add jQuery 1.7.2 / Remove deprecated methods (#36599) .. _1-3-10: 1.3.10 ^^^^^^ .. container:: table-row Version 1.3.10 Changes Fix t3lib\_utility\_VersionNumber::convertVersionNumberToInteger for older typo3 versions / Remove deprecated method t3lib\_div::intInRange .. _1-3-11: 1.3.11 ^^^^^^ .. container:: table-row Version 1.3.11 Changes Fix compatibility for Typo3 V6 (#41010) .. _1-3-12: 1.3.12 ^^^^^^ .. container:: table-row Version 1.3.12 Changes Fix “Add new” in backend .. _1-3-13: 1.3.13 ^^^^^^ .. container:: table-row Version 1.3.13 Changes Add Compatibility for TYPO3 V 6.2 .. ###### END~OF~TABLE ###### |img-2| 13 .. ######CUTTER_MARK_IMAGES###### .. |img-1| image:: img-1.png .. :align: left .. |img-2| image:: img-2.png .. :border: 0 .. :height: 21 .. :hspace: 9 .. :id: Grafik2 .. :name: Grafik2 .. :width: 87 .. |img-3| image:: img-3.png .. :align: left .. :border: 0 .. :height: 220 .. :id: Grafik1 .. :name: Grafik1 .. :width: 475 .. |img-4| image:: img-4.png .. :align: left .. :border: 0 .. :height: 313 .. :id: Grafik3 .. :name: Grafik3 .. :width: 334 .. |img-5| image:: img-5.png .. :align: left .. :border: 0 .. :height: 512 .. :id: Grafik4 .. :name: Grafik4 .. :width: 300 .. |img-6| image:: img-6.png .. :align: left .. :border: 0 .. :height: 166 .. :id: Grafik5 .. :name: Grafik5 .. :width: 299 .. |img-7| image:: img-7.png .. :align: left .. :border: 0 .. :height: 400 .. :id: Grafik8 .. :name: Grafik8 .. :width: 409 .. |img-8| image:: img-8.png .. :align: left .. :border: 0 .. :height: 259 .. :id: Grafik9 .. :name: Grafik9 .. :width: 378 .. |img-9| image:: img-9.png .. :align: left .. :border: 0 .. :height: 195 .. :id: Grafik10 .. :name: Grafik10 .. :width: 402 .. |img-10| image:: img-10.png .. :align: left .. :border: 0 .. :height: 150 .. :id: Grafik7 .. :name: Grafik7 .. :width: 434