Copy the JS package to
/template/lib/jquery/plugin/nivo/
The script unfortunately requires a different order of the output than the template provides. The cms must rearrange certain areas. flip-flop helps us with a perfect tool to do this. Many thanks to Knut.
http://www.phpwcms-howto.de/wiki/doku.p ... t-of-areas
http://www.phpwcms-howto.de/wiki/doku.p ... rt-section
Download the script cp_trig_sort_section_v13.zip (V1.3) and copy it into:
/template/inc_script/frontend_init/
It's 'must have ware' whenever you want to sort the output of HTML and it works perfect with the contentparts
image <div>, image special or register tabs.
Template example nivo.tmpl
It can be used with CP image special
Copy to
/template/inc_cntpart/imagespecial/nivo.tmpl
The template displays the INFOTEXT above the thumb image as a kind of caption.
Code: Select all
<!--IMAGE_SETTINGS_START//-->
; InfoText render: plain, html, markdown, textile
text_render = html
<!--IMAGE_SETTINGS_END//-->
<!--IMAGES_HEADER_START//-->
<!--SORT_INTO_NEW_BLOCKS_V13//-->
<div class="slider-wrapper theme-default">[CP_TRIG_DEFINITION]
[BLOCK_01X_PREFIX] <div id="slider" class="nivoSlider">[/BLOCK_01X_PREFIX][BLOCK_01X_SUFFIX]</div>[/BLOCK_01X_SUFFIX]
[CLASS_01X_FIRST][/CLASS_01X_FIRST][CLASS_01X_LAST][/CLASS_01X_LAST]
[BLOCK_02X_PREFIX][/BLOCK_02X_PREFIX][BLOCK_02X_SUFFIX][/BLOCK_02X_SUFFIX]
[CLASS_02X_FIRST] class="active"[/CLASS_02X_FIRST][CLASS_02X_LAST][/CLASS_02X_LAST][/CP_TRIG_DEFINITION]
[CP_TRIG_WRAP_CONTENT]<!--IMAGES_HEADER_END//--><!--IMAGES_ENTRY_START//-->[CP_TRIG_CONTENT]
[BLOCK_01X]
<a href="{IMAGE_URL}"><img src="{THUMB_REL}" alt="{THUMB_NAME} [COUNTX]" title="#{THUMB_ID}" /></a>[/BLOCK_01X]
[BLOCK_02X][INFOTEXT]
<div id="{THUMB_ID}" class="nivo-html-caption">{INFOTEXT}</div>[/INFOTEXT][/BLOCK_02X]
[/CP_TRIG_CONTENT]<!--IMAGES_ENTRY_END//--><!--IMAGES_ENTRY_SPACER_START//--><!--IMAGES_ENTRY_SPACER_END//--><!--IMAGES_ROW_SPACER_START//--><!--IMAGES_ROW_SPACER_END//--><!--IMAGES_FOOTER_START//-->
[/CP_TRIG_WRAP_CONTENT]
</div><!-- JS: {TEMPLATE}lib/jquery/plugin/nivo/nivo.slider.js --><!-- JS: {TEMPLATE}lib/jquery/plugin/nivo/nivo.slider.settings_XX.js --><!-- JS: {TEMPLATE}lib/jquery/plugin/nivo/nivo.slider.pack.js -->
[PHP]
initJSLib();
$GLOBALS['block']['css']['nivo.slider-basic'] = 'specific/jquery/nivo/nivo-slider.css';
$GLOBALS['block']['css']['nivo.slider-theme-default'] = 'specific/jquery/nivo/themes/default/default.css';
[/PHP]
<!--IMAGES_FOOTER_END//-->
copy the css files of the Nivo package to
/template/inc_css/specific/jquery/nivo/nivo-slider.css
and the themes to
/template/inc_css/specific/jquery/nivo/themes/default/default.css
Plugin settings (Nivo version 2.7.1).
To get those beautiful transitions JS is needed.
Code: Select all
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
slices: 15, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed: 500, // Slide transition speed
pauseTime: 6500, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: true, // Next & Prev navigation
directionNavHide: true, // Only show on hover
controlNav: true, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
controlNavThumbsFromRel: false, // Use image rel for thumbs
controlNavThumbsSearch: '.jpg', // Replace this with...
controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
keyboardNav: true, // Use left & right arrows
pauseOnHover: true, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
captionOpacity: 0.8, // Universal caption opacity
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
randomStart: false, // Start on a random slide
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
});
template/lib/jquery/plugin/nivo/nivo.slider.settings_XX.js
(see template)
Read more about the effect parameter at Nivo (see above)
phpwcms settings:
- only thumbnail image required
- infotext when needed
this one is so *Neu* that i like to send some greetings to santscho