Nivo Slider jQuery Plugin for phpwcms

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

Nivo Slider jQuery Plugin for phpwcms

Post by Jensensen » Mon 20. Feb 2012, 22:52

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 » Tue 21. Feb 2012, 20:12

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 » Tue 21. Feb 2012, 22:03

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 » Tue 21. Feb 2012, 23:30

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 » Wed 22. Feb 2012, 00:05

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 » Tue 28. Aug 2012, 20:07

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: 6380
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: Nivo Slider jQuery Plugin for phpwcms

Post by update » Tue 28. Aug 2012, 20:27

try a{position:relative;}
That's all I can say this time :|
It's mostly all about webdesign, logo design, new and old pages refresh, print BUT slowly switching to be supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.

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 » Tue 28. Aug 2012, 22:17

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: 9482
Joined: Fri 3. Oct 2003, 22:22
Location: Dessau
Contact:

Re: Nivo Slider jQuery Plugin for phpwcms

Post by Oliver Georgi » Wed 29. Aug 2012, 01:34

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 | Kleintierpraxis am Georgengarten

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 » Wed 29. Aug 2012, 10:29

Cheers Oliver,

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

all the best
jsw_nz

User avatar
Jensensen
Posts: 2986
Joined: Tue 17. Oct 2006, 21:11
Location: auf der mlauer

[IMAGE_URL] {IMAGE_URL} no longer working

Post by Jensensen » Fri 3. May 2013, 03:43

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 » Thu 27. Jun 2013, 20:05

does this still work combined with the latest release?

Has anyone tried??

User avatar
update
Moderator
Posts: 6380
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: Nivo Slider jQuery Plugin for phpwcms

Post by update » Sun 27. Apr 2014, 08:38

It's much easier nowadays with this nice module: http://www.phpwcms-howto.de/wiki/doku.p ... s/sliderjs
It's mostly all about webdesign, logo design, new and old pages refresh, print BUT slowly switching to be supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.

Post Reply