Jump to content
ébewè

[FREE MODULE] Slider : Slideshow for your homepage

Recommended Posts

Hello everybody,

 

I recently created the module "Slider" which allows to add a Slideshow on the homepage of a Prestashop site and I've decided to distribute it for free.

 

Even if it's free, it's far from being simple.

It will allow you to configure the slides in a first part :

  • Upload different slides for the different languages of your shop
  • Upload 10 different slides per language
  • Enter for each image: a link, a title and an alternative text
  • Choose if a slide is active or not
  • Change their order of appearance
  • Delete those you don't use anymore

In the second part, you can configure the slideshow itself :

  • The size of the slideshow
  • The transition effects
  • The navigation images (arrows and bullets)

The module works on every of the versions 1.4 of Prestashop.

 

Here are screenshots of the administration part of the module.

post-356533-0-76016600-1346090882_thumb.jpgpost-356533-0-42595900-1346090889_thumb.jpgpost-356533-0-01920000-1346090895_thumb.jpg

 

You can see it in action on ébewè Shop and test the admin part on my DemoShop

 

To download it, simply follow this url Slider : free Slideshow for Prestashop

 

I hope you'll enjoy it and that it will facilitate your work,

Paul.

Edited by ébewè (see edit history)
  • Like 8

Share this post


Link to post
Share on other sites

Wonderful slider, really nice!

 

However, there seems to be a problem with IE - the slide-links don't work. I tried with IE 7,8,9 on different computers, and even on your demo site (http://ebewe.net/demoshop/), the links don't work with IE.

 

It would be great if that could be solved!

Share this post


Link to post
Share on other sites

Amazing Slideshow Module.

 

However rune is correct the links do not work in IE.

 

Hey its for free so thanks again.

Share this post


Link to post
Share on other sites

Hello,

 

It seems that adding those 5 lines to the nivo-slider.css file makes it work with the different browsers.

 

.nivoSlider a.nivo-imageLink{
 ....
 filter:alpha(opacity=0);
 opacity:0;
   -webkit-opacity:0;
   -moz-opacity:0;
   -khtml-opacity:0;
}

 

This file is in the folder "modules/slider/css"

 

Sorry for the inconvenience.

 

Paul.

Share this post


Link to post
Share on other sites

Hi Paul,

Thanks for taking the time to reply - really appreciate it!

 

Unfortunately, your suggested solution doesn't fix the problem.

I have a feeling there's something about the controlNav that's interfering with the img link - the link seems to work for a split second before the nav-bullets appear. Could it have something to do with the z-index? (I've tried a few things without any luck, but my skills are limited...)

 

Thanks!

Rune

Share this post


Link to post
Share on other sites

Sorry,

 

you also have to add a "background" value in the css. Like that :

 

.nivoSlider a.nivo-imageLink{
 ....
 background:#fff;
 filter:alpha(opacity=0);
 opacity:0;
 -webkit-opacity:0;
 -moz-opacity:0;
 -khtml-opacity:0;
}

Share this post


Link to post
Share on other sites

Paul,

Thank you so much.

Adding those lines to the CSS makes it work in IE.

Absolutely brilliant!!!

 

Thanks for the extra service.

i wish some others would be as quick and easy with a solution as you have been.

 

I am now going to purchase your Mail template module.

 

Thanks again,

Richard

Share this post


Link to post
Share on other sites

It's compatible with Prestashop 1.5? I've tried to install but there is not any tab "Slide" to configure the module.

Share this post


Link to post
Share on other sites

It's compatible, but the "Slider" link is not created.

 

In order to create it, you must go to "Administration>Menus"

Click on "Create" and enter the following informations :

 

Name : Slider (or the name you want)

Class : Slideshow (needed)

Module : slider (needed)

Icon : (Leave empty)

State : Active

Parents : Modules (or the tab you want)

 

Save and the link will appear.

  • Like 1

Share this post


Link to post
Share on other sites

Hi,

Very good slider.

Just a question about possible management... How to center in entire width the slider above the home page ?

I'm newbie for prestashop...

Thanks

Share this post


Link to post
Share on other sites

Finding a simple, free :P , slider has been really frustrating. They all seem to not easiy adjust for my large images. I just can't get my 600x600 images to display properly.

 

I've resized the window itself to accommodate them with a width of 800 and height of 600 and can also get the very first image (only) to be centered in the window but when the transistions start the images are below the slider window (cut off) including the original display of the first image.

 

I've tried every CSS tweak (nivo-slider.css) I can find, is there some adjustment I'm missing?

 

Hard to get the first screen shot since it is so fast but even though it is cut off at the bottom in the picture is does show full size in the slider window. The second picture shows how the images are cut off.

 

So what do I need to adjust to make 600x600 images appear centered in the slider window?

 

EDIT:

Answered my own question:

Changed silder size to 600x600 in back office and then set:

 

#slide_holder {

position:relative;

overflow: hidden;

max-height:600px;

left:180px; (just to center it in the window)

}

.nivoSlider {

position:relative;

overflow: hidden;

}

.nivoSlider img {

position:relative;

top:0px;

max-width:600px;

max-height:600px;

}

 

Thanks for the easy and clean slider and for the contribution to the project.

Edited by DBMAN (see edit history)
  • Like 1

Share this post


Link to post
Share on other sites

I installed this module on my site but there is no link that says configure. Only says disable, reset and delete. I also went through the steps you stated above and created the slider link but still nothing. I am using Prestashop 1.5.2. Is there any way I can fix this?

 

Thank you

Share this post


Link to post
Share on other sites

For some reason, the effect doesn't work in IE if I set width of the slide_holder container to 100% (fluid)

Is there any way to fix that?

And thank you so much for a great module!

Edited by daquity36 (see edit history)

Share this post


Link to post
Share on other sites

Answered my own question. IE cannot handle effect when the images and containers are fluid, so you must assign the actual px to width and height dynamically.

 

$(document).ready(function() {
var a = $("#your_container").width();
$("#slide_holder").css('width',a); $("#slide_holder").css('height',0.5*a); //you can change your ratio here
$("#slider img").css('width',a); $("#slider img").css('height',0.5*a);
$(".nivo-directionNav").css('width',a); $(".nivo-directionNav").css('height',0.5*a);
$("#slider").css('width',a); $("#slider").css('height',0.5*a);
});

$(window).resize(function(event) {
var a = $("#center_column").width();
$("#slide_holder").css('width',a); $("#slide_holder").css('height',0.5*a);
$("#slider img").css('width',a); $("#slider img").css('height',0.5*a);
$(".nivo-directionNav").css('width',a); $(".nivo-directionNav").css('height',0.5*a);
$("#slider").css('width',a); $("#slider").css('height',0.5*a);
});

 

Lastly, you MUST set slice to 1, otherwise effects won't work in IE. I use 'fade' so setting slice to 1 has no consequences, but if you want to use other effects, this method maybe wouldn't work.

 

Took me 5 hours to figure this out.

Edited by daquity36 (see edit history)

Share this post


Link to post
Share on other sites

Is there a way where I can display the Slideshow at the top of my webpage. At the moment the Slideshow displays just above the Footer. Have I done something wrong. I am using PS 1.4.x. Apart from that its a very clear and easy module to use. :)

Share this post


Link to post
Share on other sites

This is by far the best free home page slider module. It works great on my local (wamp) server test configuration with prestashop 1.5.3.1

 

Bizarrely though when I tried to upload the module to my live online server running the exactly same version of Prestashop, using the usual "add new module" option, I receive a "fatal error". Therefore I tries uploading the modules folder using ftp and after doing that I get the following error message when accessing the "Modules" menu.

 

[PrestaShop] Fatal error in module slider: syntax error, unexpected T_IF

 

I cannot understand why there is a difference between the two and why this particular module does not work on the live site.

 

Any help or pointers would be very appreciated.

Share this post


Link to post
Share on other sites

Ehi! Thank you very much for your work. But i can't see images :( via firebugs i see this code:

< imgsrc="undefined" style="position: absolute; width: 777px; height: auto; top: 0px; left: -208px; display: block !important;"/

orsoazzurro.it bottom of page. thank you, nico

Edited by nicopellacani (see edit history)

Share this post


Link to post
Share on other sites
Ehi! Thank you very much for your work. But i can't see images :( via firebugs i see this code: < imgsrc="undefined" style="position: absolute; width: 777px; height: auto; top: 0px; left: -208px; display: block !important;"/ orsoazzurro.it bottom of page. thank you, nico

 

I've changed the CHMOD of thumbs.db and works! thank you

Share this post


Link to post
Share on other sites

Hi,

please can you give me advice how to remove yellow circles to change the slides and how to activate the arrows?

Thanks a lot

Share this post


Link to post
Share on other sites

Hey turbopstros,

 

Go to BO(Back office) modules -> slider and

 

scroll down to "configuration of the slideshow" and disable "control navigation" to remove those bullets.

 

My current settings are:

 

Direction navigation: No

 

Hide direction navigation: Yes

 

Control navigation: No

 

Pause on hover: Yes

Edited by daquity36 (see edit history)

Share this post


Link to post
Share on other sites

Hi daquity36,

 

thank you. Unfortunately I didn't find this setting anywhere.

I'm running Prestashop 1.5.3.1.

That's how looks my settings for slider (sorry for the Czech language, I tried to translate it)

presta.jpg

 

Any ideas how to change it? :)

Thank you very much.

 

Hey turbopstros,

 

Go to BO(Back office) modules -> slider and

 

scroll down to "configuration of the slideshow" and disable "control navigation" to remove those bullets.

 

My current settings are:

 

Direction navigation: No

 

Hide direction navigation: Yes

 

Control navigation: No

 

Pause on hover: Yes

Share this post


Link to post
Share on other sites

Wow, that looks totally different from mine. Mine just looks like the screenshots in the first entry of this post.

If you wanted to set a temporary password for FTP, I can have a look.

Or you can go to modules/slider/slider.tpl and modify/add

 

  $(window).load(function() {
$('#slider').nivoSlider({
 effect:'{$xml->effect}', //Specify sets like: 'fold,fade,sliceDown'
 directionNav:{$xml->directionnav}, //Next & Prev
 directionNavHide:{$xml->directionnavhide}, //Only show on hover
 controlNav:{$xml->controlnav}, //1,2,3...
 pauseOnHover:{$xml->pauseonhover}, //Stop animation while hovering
 slices: 1, // For slice animations (MUST SET TO 1, otherwise NO effect on IE)
	   boxCols: {$xml->boxcols}, // For box animations
	   boxRows: {$xml->boxrows}, // For box animations
 animSpeed:{$xml->animspeed}, //Slide transition speed
 pauseTime:{$xml->pausetime};
});
});

 

Notice that the parameters in my case are smarty variables because I can set those settings in Back Office.

In your case, you should change controlNav manually to false.

 

More info on Nivo Slider parameters: http://dev7studios.com/nivo-slider/#/documentation

Edited by daquity36 (see edit history)

Share this post


Link to post
Share on other sites

I have upgradet a prestashop on version 1.5.4 and the slides doesnt change, buttons about currenly slide and next/previous buttons are away :( what can i do with this situation?

Share this post


Link to post
Share on other sites

Thanks Poul,

 

Not only I've got the slider, but had a chance to try the prestashop one page checkout :)

 

Will try to install it later and hope it works as stated. About your store - Great and clean design. Bookmarked! As soon as I sell something from my new online store, I'll invest the money on upgrades.

 

Peter

Share this post


Link to post
Share on other sites

thx for that Module but i dont have a link to configure it. My Prestashop: 1.5.4.1

unbenannt2kmg.jpg

Share this post


Link to post
Share on other sites

Hi Guys, i cant get it to work on chrome, working perfect on firefox and IE just not chrome any ideas

 

Thanks in advanced

Share this post


Link to post
Share on other sites

Hi Guys, i cant get it to work on chrome, working perfect on firefox and IE just not chrome any ideas

 

Thanks in advanced

Fixed it had to clear my cache

Share this post


Link to post
Share on other sites

I have the same issue with the slider, also the images are HUGE! my default images is 220x210 and even tried with 125x120 but still the same issue with the size is way too big aroung 600x400px. Don't know what might be causing it.

 

Please help with this issue.

 

Thanks

Share this post


Link to post
Share on other sites

moved to the paid section.

please update download link (follow forum rules, attach library with module or direct link to the library, not page)

then i will bring it back to the free section

Share this post


Link to post
Share on other sites

Could some friendly soul help me out a bit?

 

I have disabled the default slider and installed this one. No issues installing. I then transplanted to top of pages hook, cleared cache -- and nothing. Does not show up at all.

 

Any ideas? Fairly new to this so forgive my ignorance...

 

Edit: Using default theme, latest version Prestashop. Right column has been disabled if that matters.

Edited by danielbraw (see edit history)

Share this post


Link to post
Share on other sites

Hi All,

First of all, thanks for your module! It is the best I could find so far in Prestashop.

I am a basic Prestashop user (therefore, not an experience developper) and I am having only one difficulty with your module. I have always the issue with the first image of my slides having a distortion when opening the website. The issue happens in Firefox, IE, Mozilla and Chrome. Do you know how I can get this fixed? I have tried many things ( resizing image, changing images, etc) and nothing seems to fix it. Do you know how I can get this fixed?

My website is www.manguetown.ch and the slider is right at the front page.

Many thanks for your help!

Carlos Feres

Share this post


Link to post
Share on other sites

Good afternoon,

 

I am using this plugin in a Prestashop website and everything was working perfectly until I migrated it from the dev to the production server, where I am getting this error:

 

[PrestaShop] Fatal error in module slider: syntax error, unexpected T_IF

 

Any ideas of what might be causing this?

 

Thanks in advance

Share this post


Link to post
Share on other sites

I join to all the people who can't configure the module on prestashop 1.5.6. 

 

Help us please!!

 

Thank you so much.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More