phpwcms Support Forum

I found a very nice slider that can be used with jQuery. This is a short explanation how you can use it with phpwcms. Read about and download Nivo at: http://nivo.dev7studios.com/
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//-->

CSS
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
    });
});

Place the code above into a file and copy it into
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

Das Ding sieht schnuckelig aus... werd ich doch gleich mal testen...

ca. 1 Stunde später...

Mist, alle Dateien an die richtige Stelle gepackt und .... läuft nicht!
Code wird generiert... aber weisse Fläche, wo die Bilder stehen sollten!

Neueste Revision von phpwcms, frische Installation.

Ist sonst noch was zu berücksichtigen???

OK...it' running now... but i had to change the names of 2 files first

Good JOB... i like it

Feine Sache...
über die Effect-Schalter habe ich jetzt die Möglichkeit eingebunden, auch die anderen Themen bei Bedarf zuschalten zu können... das ist "ausbaufähig!

Danke für die Infos

Kleine Änderung, damit nur dann ein Link generiert wird, wenn tatsächlich eine Linkadresse im CP eingegeben wurde... sonst springt das Bild obwohl KEIN Link vorhanden ist! Hatten wir an anderer Stelle doch schon mal?!
Die vorwärts/rückwärts Buttons funktionieren aber trotzdem!

[CP_TRIG_CONTENT]
[BLOCK_01X][IMAGE_URL]<a href="{IMAGE_URL}">[/IMAGE_URL]<img src="{THUMB_REL}" alt="{THUMB_NAME} [COUNTX]" title="#{THUMB_ID}" />[IMAGE_URL]</a>[/IMAGE_URL][/BLOCK_01X]
[BLOCK_02X][INFOTEXT] <div id="{THUMB_ID}" class="nivo-html-caption">{INFOTEXT}</div>[/INFOTEXT][/BLOCK_02X][/CP_TRIG_CONTENT]

Hi People

I really like this - and seemd to have got it working - however in IE9 - the url (link to separate page) feature does not work
Mind you - I am using a CP replacement tag to 'inject' nivo slider at top of page like this

Code: Select all

<div class="message_tall">
{SHOW_CONTENT:CP, 1}
</div>

The rotating images and links work fine in Firefox and Chrome - but LINKS do not show up / work in IE9

http://www.revolutionhills.co.nz/index.php
the website is under construction

you can compare in different browsers:
any ideas why this is happening - it is as if IE disregards the links - even though - when you look at source - the anchors and hrefs are there?
Can anybody confirm their links in IE9 work?

cheers and thanks in advance
jsw_nz

try a{position:relative;}
That's all I can say this time

Hi Claus - tried that - no joy

so I went a Googling - seems the nivo slider links not working in IE is pretty common.

modifications to: nivo-slider.css does the job:

Code: Select all

.nivoSlider a.nivo-imageLink {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	border:0;
	padding:0;
	margin:0;
	z-index:6;
	background-color:#fff; 
	filter: alpha(opacity=0); 
	/*non ie*/
	opacity: 0;
	-webkit-opacity:0;
	-moz-opacity:0;
	-khtml-opacity:0;
}

cheers and thanks for chiming is so quickly,
jsw_nz (john)

Whenever possible: DOM Manipulation is easier using JavaScript. To use PHP to set active item or additional elements for sliders is not optimal.

Cheers Oliver,

...you are always a step ahead on the curve.
still thanks to Jensen.

all the best
jsw_nz

in older templates (e.g. image special) you could use something like:

Code: Select all

[IMAGE_URL]<a href="{IMAGE_URL}">[/IMAGE_URL]<img src="img/cmsimage.php/940x320/{THUMB_ID}" alt="{THUMB_NAME}" title="#{THUMB_ID}" />[IMAGE_URL]</a>[/IMAGE_URL]

this one is NOT WORKING anymore [grmpfff]!!
O h my G
da wirste bekloppt bei.

when you want to get an image with a link, you have to use the new syntax like this:

Code: Select all

[URL]<a href="{URL}">[/URL]<img src="img/cmsimage.php/940x320/{THUMB_ID}" alt="{THUMB_NAME}" title="#{THUMB_ID}" />[URL]</a>[/URL]

or for example // more usual:

Code: Select all

[URL]<a href="{URL}">[/URL]{IMAGE}[URL]</a>[/URL]

Read also: https://github.com/slackero/phpwcms/issues/22
Thank YOU santscho!

does this still work combined with the latest release?

Has anyone tried??

It's much easier nowadays with this nice module: http://www.phpwcms-howto.de/wiki/doku.p ... s/sliderjs

phpwcms Support Forum

Nivo Slider jQuery Plugin for phpwcms

Nivo Slider jQuery Plugin for phpwcms

Re: Nivo Slider jQuery Plugin for phpwcms

Re: Nivo Slider jQuery Plugin for phpwcms

Re: Nivo Slider jQuery Plugin for phpwcms

Re: Nivo Slider jQuery Plugin for phpwcms

Re: Nivo Slider jQuery Plugin for phpwcms

Re: Nivo Slider jQuery Plugin for phpwcms

Re: Nivo Slider jQuery Plugin for phpwcms

Re: Nivo Slider jQuery Plugin for phpwcms

Re: Nivo Slider jQuery Plugin for phpwcms

[IMAGE_URL] {IMAGE_URL} no longer working

Re: Nivo Slider jQuery Plugin for phpwcms

Re: Nivo Slider jQuery Plugin for phpwcms