Nivo Slider jQuery Plugin for phpwcms

post everything related to phpwcms templates here
Post Reply
User avatar
Jensensen
Posts: 3000
Joined: Tue 17. Oct 2006, 21:11
Location: auf der mlauer

Nivo Slider jQuery Plugin for phpwcms

Post by Jensensen »

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
{so_much} | Knick-Knack. | GitHub
Umlaute im URL sind meistens immer Kacke.
pepe
Posts: 3954
Joined: Mon 19. Jan 2004, 13:46

Re: Nivo Slider jQuery Plugin for phpwcms

Post by pepe »

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???
pepe
Posts: 3954
Joined: Mon 19. Jan 2004, 13:46

Re: Nivo Slider jQuery Plugin for phpwcms

Post by pepe »

OK...it' running now... but i had to change the names of 2 files first :idea:
<!-- JS: {TEMPLATE}lib/jquery/plugin/nivo/jquery.nivo.slider.js -->
<!-- JS: {TEMPLATE}lib/jquery/plugin/nivo/nivo.slider.settings_XX.js -->
<!-- JS: {TEMPLATE}lib/jquery/plugin/nivo/jquery.nivo.slider.pack.js -->
Good JOB... i like it :D
pepe
Posts: 3954
Joined: Mon 19. Jan 2004, 13:46

Re: Nivo Slider jQuery Plugin for phpwcms

Post by pepe »

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 :D
pepe
Posts: 3954
Joined: Mon 19. Jan 2004, 13:46

Re: Nivo Slider jQuery Plugin for phpwcms

Post by pepe »

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!
<!--IMAGES_ENTRY_START//-->[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]
<!--IMAGES_ENTRY_END//-->
User avatar
jsw_nz
Posts: 907
Joined: Fri 2. Apr 2004, 02:42
Location: New Zealand

Re: Nivo Slider jQuery Plugin for phpwcms

Post by jsw_nz »

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
:)
User avatar
update
Moderator
Posts: 6455
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: Nivo Slider jQuery Plugin for phpwcms

Post by update »

try a{position:relative;}
That's all I can say this time :|
It's mostly all about maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
User avatar
jsw_nz
Posts: 907
Joined: Fri 2. Apr 2004, 02:42
Location: New Zealand

Re: Nivo Slider jQuery Plugin for phpwcms

Post by jsw_nz »

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)
:D
User avatar
Oliver Georgi
Site Admin
Posts: 9888
Joined: Fri 3. Oct 2003, 22:22
Contact:

Re: Nivo Slider jQuery Plugin for phpwcms

Post by Oliver Georgi »

Whenever possible: DOM Manipulation is easier using JavaScript. To use PHP to set active item or additional elements for sliders is not optimal.
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон
User avatar
jsw_nz
Posts: 907
Joined: Fri 2. Apr 2004, 02:42
Location: New Zealand

Re: Nivo Slider jQuery Plugin for phpwcms

Post by jsw_nz »

Cheers Oliver,

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

all the best
jsw_nz
User avatar
Jensensen
Posts: 3000
Joined: Tue 17. Oct 2006, 21:11
Location: auf der mlauer

[IMAGE_URL] {IMAGE_URL} no longer working

Post by Jensensen »

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!
{so_much} | Knick-Knack. | GitHub
Umlaute im URL sind meistens immer Kacke.
kakarot
Posts: 1
Joined: Thu 27. Jun 2013, 20:01

Re: Nivo Slider jQuery Plugin for phpwcms

Post by kakarot »

does this still work combined with the latest release?

Has anyone tried??
User avatar
update
Moderator
Posts: 6455
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: Nivo Slider jQuery Plugin for phpwcms

Post by update »

It's much easier nowadays with this nice module: http://www.phpwcms-howto.de/wiki/doku.p ... s/sliderjs
It's mostly all about maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
Post Reply