[DEV] Nivo Slider

[dmzx]

Extension Name: Nivo Slider
Author: dmzx

Special thanks to: martin

Extension Description:
Adds Nivo Slider to your forum, max image size is 1170x320.
Up to 8 images and images need to be uploaded in ext/dmzx/nivoslider/images
Settings only for Admin and link in navbar header profile.



Screenshots:






Extension Download:
http://www.dmzx-web.net/downloadsystemcat?id=72

Installation:

1. Download the latest release.
2. Unzip the downloaded release, and change the name of the folder to `nivoslider`.
3. In the `ext` directory of your phpBB board, create a new directory named `dmzx` (if it does not already exist).
4. Copy the `nivoslider` folder to `/ext/dmzx/` if done correctly, you'll have the main extension class at (your forum root)/ext/dmzx/nivoslider/composer.json
5. Navigate in the ACP to `Customise -> Manage extensions`
6. Look for `Nivo Slider` under the Disabled Extensions list, and click its `Enable` link.

[elawrenc]

Looks interesting, subscribing.

[supanet]

I already have this built into the style I use (subway) and its very handy the down side is I had to pay for that style so will be following this closely.
Subscribed.

[Louis7777]

How about moving the link for the settings into the Slider?

You could use an icon (cogwheel?) and the word "Edit" and make them appear only on hover.

[Miri4ever]

Yes an Icon would be nice and I wonder while settings not done over ACP Menu and inside the Profile Panel of Admin.

I tested this extension with a small image about 500x600 pixels and I got a huge image over my complete screen. It got streched somehow and cannot find any settings why it's streched and not appear in orginal size.

[supanet]

I tested this extension with a small image about 500x600 pixels and I got a huge image over my complete screen. It got streched somehow and cannot find any settings why it's streched and not appear in orginal size.

If it works anything like the one on my forum the image must be 1170x320 for it to work correctly.

[Miri4ever]

Hmm ok, because he wrote about a max image size, smallers should normally work anyway.

Adds Nivo Slider to your forum, [b]max image[/b] size is 1170x320.

[supanet]

Hmm ok, because he wrote about a max image size, smallers should normally work anyway.

Adds Nivo Slider to your forum, [b]max image[/b] size is 1170x320.

You may be right with that as I haven't tested this ext yet I'm just going off the one I use.
on a side note you will also get the affect you describe if you enter the image name wrong also make sure to use the correct prefix png, jpg etc.....

[Sniper_E]

I have images 1700px X 185px and it shows thinner. I have one image 2187px X 228px

Max size can be whatever you want.

[supanet]

I have images 1700px X 185px and it shows thinner. I have one image 2187px X 228px

Max size can be whatever you want.

Yes I agree but if you have more than one image to display they need to all be the same size or you will get distortions as they change.
Like this: http://zonezero.pixelscrapbook.com/index.php

[Louis7777]

@dmzx will it have swipe gestures?

You can use Hammer.JS to create swipe gestures for Nivo Slider, like this:

Code: Select all

/**
* Settings
*/

$(document).ready(function() {
    
    /**
    * Using hammer.js for touch.
    */
    if ("ontouchstart" in document.documentElement)
    {

        $('#slideshow0').nivoSlider({
            effect: 'slideInLeft',
            animSpeed: 100,
            pauseTime: 7000, // Milliseconds to display each slide.
        });

        $('a.nivo-nextNav').css('visibility', 'hidden');
        $('a.nivo-prevNav').css('visibility', 'hidden');

        var element = document.getElementById('slideshow0');

        var hammertime = Hammer(element).on("swipeleft", function(event) {
            $('#slideshow0 img').attr("data-transition","slideInLeft");
            $('a.nivo-nextNav').trigger('click');
            return false;
        });

        var hammertime = Hammer(element).on("swiperight", function(event) {
            $('#slideshow0 img').attr("data-transition","slideInRight");
            $('a.nivo-prevNav').trigger('click');
            $('#slideshow0 img').attr("data-transition","slideInLeft");
            return false;
        });
    }
    else
    {
        $('#slideshow0').nivoSlider({
            pauseTime: 7000, // Milliseconds to display each slide.
            prevText: '‹', // Prev directionNav text
            nextText: '›', // Next directionNav text
        });
    }
});

[Sniper_E]

I have images 1700px X 185px and it shows thinner. I have one image 2187px X 228px

Max size can be whatever you want.

Yes I agree but if you have more than one image to display they need to all be the same size or you will get distortions as they change.
Like this: http://zonezero.pixelscrapbook.com/index.php

Yes you have to make all of the images you use proportional to each other.

My one 2187px X 228px image is proportional to the other three 1700px X 185px images I have.
They look the same when changing like this: http://sniper-e.com/

If a different image is larger in height then it needs to be proportionally larger in width.

[cmyk647]

Love this slider!

There is on caveat though; Can it not be positioned where the banner area is? Not below it, below the nav?
I want to replace the standard banner with the slideshow.

If this can be done, how might I go about doing it?

TIA.

[sgtevmckay]

Nivo Slider images unavailable on Board Portal3 "Home Page"

Is there a possible Fix???

[sgtevmckay]

Love this slider!

There is on caveat though; Can it not be positioned where the banner area is? Not below it, below the nav?
I want to replace the standard banner with the slideshow.

If this can be done, how might I go about doing it?

TIA.

would be interested in something like this myself

This may actually fix the previous mentioned issue, in by-pass....