[module] Prestashop Homeslider on TOP - free modification

[vekia 8,961]

homeslider on TOP - default module modification

Default homeslider module modification. By default homeslider module don't allow to display slider on top, with this modification it is possible. This modification is absolutely free. You can download it now.

module for prestashop 1.5

attached below:

[navid68 13]

Hi Vekia, your module looks very interesting but I can not make it work!

 

After installing a new PS 1.5.0, I added your module. The standard homeslider disappears and can not see one at the top.

So I change the changed the Width to 980 (the same size of images in the folder) as you can see in the attachment, nothing happens.

 

What did I do wrong?

Navid

[vekia 8,961]

for the first - remove the default module. After that - install my modification.

Then clear prestashop cache (or turn force compilation)

 

if it is possible - please share the url to your store - i will check the sources for potential css/js issues

[navid68 13]

Thanks vekia,

 

I followed your instructions and now it works!

 

I know there are explanation in the forum to move the home slider, but I am not a tech guy and prefer to avoid messing up with the code. Your module is the right solution (see attachment)

 

Thanks again

Navid

Edited July 8, 2013 by navid68 (see edit history)

[vekia 8,961]

thanks for information that it works for you as you expect im glad that i could help, anyway, if you've got any questions related to this module - feel free to continue discussion - im here to help you

 

regards

[navid68 13]

Just one question Vekia.

 

As your module replaces the standard homeslider, how can I put back the standard module in case I need the original layout?

 

Thanks again

Navid

[vekia 8,961]

in this case you have to remove (delete) modified module - then upload default one, for example, from official library

[Misobella 1]

I appreciate this FREE top banner/slider module enhancement for the default 1.5.4.1 theme. (I previously purchased a theme for a currently outdated prestashop version, so I'm sticking to the basics for now) Thanks!

 

1. I downloaded zip file to my computer

2. I went to advanced parameters>performance and turned off both caches.

3. I went to modules and uninstalled the current slider.

4. I uploaded the module then re-installed the image slider

 

Voila!

 

The slider stays on top even when you navigate throughout your website. Your 5 banner images must fit 300x980

Edited July 17, 2013 by Misobella (see edit history)

[vekia 8,961]

hello

 

that's right, thanks for instruction, im convinced that it will be really helpfull for other merchants

if you've got any questions - feel free to ask, im here to help you:)

 

ps. welcome on board!

[Misobella 1]

Thank You! Will do

[matteo_mont 0]

Hi there,

 

I tried the module and the outcome is great! For sure I would recommend this module.

 

@ Vekia I have some in question about your homeslider module.

• I edited the following code lines (into "bx_styles.css" file) in order to make the slider displayed in home page only: It works perfect, but I wonder if you can suggest a best practice instead of it
  

.bx-wrapper {
display: none;
margin-bottom:20px;
height:300px
}

body#index #page #header #header_right .bx-wrapper {
display: block;
}

• I'd like to edit the border around the slider window.
  I added the comand "border: 5px solid" on .bx-wrapper, but now the slider window is not fitted into the frame created (I'll attach the image).
  I believe I should modify some element.style but I don't know how to do it. Can you give a tip?
  

Thanks in advance,

Matteo

Edited July 21, 2013 by matteo_mont (see edit history)

[vekia 8,961]

it's better to use this:

 

1) open the homeslider.tpl file and add there if condition:

 

{if $page_name == 'index'}

TPL FILE CONTENT

{/if}

this is the proper method

 

 

second question

add border to the bx-windows

[matteo_mont 0]

Hi Vekia,

 

thanks for the quick reply.

 

about my question

1. I got the TPL file, but at which line should I add the code you provided?
   I mean... which part of the TPL file's code has to go in between the if condition you gave?
   
2. I added the border to the bx-windows but still the window isn't fitted into the frame.
   I think I have to make the width smaller than 980px but I don't know which file and line must be edited. Indeed once I reduce it into the "element.style" through firebug then the image fit 100%. (see the capture attached)
   Now where is this damned file? :-)
   

Thanks again,

Matteo

[vekia 8,961]

1) whole code

2) weirdy, is there any way to test your website? if so, please share the url i will do this with pleasure

[zee28 2]

Hi i replaced the homeslider module and the original one disappeared and the new one doesnt appear... i put force compilation on but still nothing..

[vekia 8,961]

Hi i replaced the homeslider module and the original one disappeared and the new one doesnt appear... i put force compilation on but still nothing..

 

reinstall the module. It's necessary

[zee28 2]

thanks!

[vekia 8,961]

thanks!

 

so it works?

[zee28 2]

yes but how can i get it to only appear on the homepage?

[vekia 8,961]

in this case you have define the exceptions

 

go to the modules > positions

 

search for "dispalyTop" modules list

 

click on edit button near the "home slider module"

 

define exceptions, add all fields instead the "index" - this is homepage

[matteo_mont 0]

Hi Vekia,

1. I edited the TPL file and it works: the slider is displayed only in homepage
   
2. At the moment the website is only in localhost. If you want I can copy it on dropbox and sharing the folder with you. By the way it is the prestashop 1.5.4.1 with no further code's customization. please contact me in private message if you can.
   I think the B.O. of your module take only action on the size of the images, but not on the window's size as it's fixed at 980px...
   

Cheers,

Matteo

[vekia 8,961]

that's right it is fixed, it's only modification of the default module - to support top section

[matteo_mont 0]

I understand, so no way to edit border and fit the image on it?

can you address me on how to modify the element.style's width?

 

Thanks a milion Vekia

 

Cheers,

Matteo

[vekia 8,961]

share the url, i will check it (i asked before )

[matteo_mont 0]

yes I know you already asked to me, but isn't online yet.

That's why I hope is possible take action on the element style, as a work-around. otherwise I can share a dropbox folder

[vekia 8,961]

well, everything depends on whole website, believe me

it's hard to debug things like this one without an access to the website via web browser

[matteo_mont 0]

I understand... :-(

any chance to take action on the element.style?

can you share some links or a guidelines?

 

thanks again for the support

[vekia 8,961]

take a look:

 

i just added border: 5px solid #000; to the bx-wrapper element. It looks well. So im convinced that in your case the problem is somewhere else.

 

try to use firebug extension and inspect the elements (main blocks of the slider) and search for something like: padding, margin

i think that these params making a white gap that you've got

[matteo_mont 0]

if I do that, then the module will be bigger than 980px and won't fit into the template

 

I you want test the website you can just add your module to the latest prestashop version 1.5.4.1

I didn't change anything else

[vekia 8,961]

one more question: ANYTHING? or anything in the module?

[matteo_mont 0]

ANYTHING!

:-)

[matteo_mont 0]

Hi Vekia,

 

I installed again prestashop (1.5.4.1) and your homeslider module.

I regret to inform you it's not working, still not possible change the window's width...

[vekia 8,961]

it is necessary to change the css styles of the module. there is no other way at the moment.

moreover, with default template it is also necessary to change the css styles if you want to use module in the top hook.

[matteo_mont 0]

Hi Vekia,

 

the only css file I think is bx_styles in homeslider folder, But I'm afraid I should change element.style and I can't understand where is it, can you help me please.

 

Cheers,

Matteo

[ismiley 1]

jai installer ce module et configurer sur v1.5.4.1 et il apparait pas c normal?? que me conseiller vous pour

http://www.missanahid.fr/fr/

[vekia 8,961]

hello

please write in english here, it's a english forum subsection

not everyone is native in French

[bettiebee 0]

Hi

 

Just reading this thread as I was hoping it would help me.

 

I've got version 1.5.4.1 and want to make my image slider smaller. I've changed it in the module, and made my slides the smaller size, but it's not any smaller.

 

I've moved it down to where I want it, but just want it 496 x 248 now so it fits better with everything else.

 

My site is www.wightprincesses.co.uk, but it's not quite live yet.

[vekia 8,961]

unfortunately your store is under the maintenance mode

[bettiebee 0]

unfortunately your store is under the maintenance mode

 

I've changed it for you.

[vekia 8,961]

you use module from this thread? or it is default, non changed module?

[bettiebee 0]

I'm using the original at the moment, but didn't know which was easiest to change the size of.

 

I need some advice.

[vekia 8,961]

so please create new thread, this whole topic is related to the modified slider module,

sorry to bother you, but this module is a bit different

[S3V 0]

Is possible to change the Animation Effect? (sliceDownLeft, sliceUpDown, etc) Like minicslider.

[vekia 8,961]

this module is based on bxslider: http://bxslider.com/examples

 

you can change animation types by editing the main .js script of this module

 

General

 

mode

Type of transition between slides

default: 'horizontal'

options: 'horizontal', 'vertical', 'fade'

[S3V 0]

Thanks, lets see what i can do.

[vekia 8,961]

if you will have any questions - feel free to write, i changed animation type several times and it works well

[bettiebee 0]

if you will have any questions - feel free to write, i changed animation type several times and it works well

 

what changes do I make to the js. script to make it fade ? I changed the 'horizontal' near the top of it, but I guess there's more to do than that . . .

[vekia 8,961]

open homeslider.js file located in /js/ subdirectory (in module dir)

 

add mode: 'fade',

$('#homeslider').bxSlider({
 infiniteLoop: homeslider_loop,
 hideControlOnEnd: true,
 pager: true,
 autoHover: true,
 auto: homeslider_loop,
 speed: homeslider_speed,
 pause: homeslider_pause,
 controls: false,
 mode: 'fade'
});

[bettiebee 0]

Thank you

 

So, I add all of that rather than alter the content of the file ?

[vekia 8,961]

hmm just add simple mode: 'fade' settings to the function that i mentioned above

that's all

[Tayo 4]

Earlier you mentioned that to reinstall the original imageslider you have to first delete this module and  "then upload default one, for example, from official library". I have been looking but cannot find the default module Imageslider. Do you have a link to the 'official library'?

[vekia 8,961]

here it is: https://github.com/PrestaShop/PrestaShop/tree/development/modules/homeslider

[Tayo 4]

thanks!

[bongkokxx 0]

Hi, this is a great module. However is it possible to transplant this module into displayheader instead of displaytop? I tried to transplant it in module position and it returned an error.

 

Thanks

[vekia 8,961]

display header is not a section for displaying contents.

displayHeader is a section where all jquery js css files are attached.

[bongkokxx 0]

display header is not a section for displaying contents.

displayHeader is a section where all jquery js css files are attached.

 

Hi Vekia, thanks for your prompt response. Sorry I must have mistaken the displayheader for something else. Could you please take a look my website in *********? I want to put the image slider in the blank spot below the top horizontal menu. Is this possible? 

 

Thanks

Edited December 24, 2013 by bongkokxx (see edit history)

[vekia 8,961]

i don't know sources of this theme. When you install this module, where it appears?

[mftanet 0]

Hi ,

Great job with the module. Is there a way to be displayed in top position, but behind the cart and other fixed nonpositional element in the top.

thanks,

[vekia 8,961]

module updated! module now works well with prestashop 1.5.0.x, 1.5.1.x, 1.5.2.x, 1.5.3.x versions

i added also updates notification (you will see information about new releases)

[Critycal 0]

Great job! 

Everything works fine for me, thanks

[treka555 0]

what is the name of the default module i should remove first?

[vekia 8,961]

/homeslider/ but you don't have to remove it. just upload new version and that's all.

[treka555 0]

thanks, it works

[waav0104 0]

hello,

I have a problem with my web site and its visuality, when I open my web site www.waav.sk throu the firefox the home slide is out of the modul (see the attachment), with the google chrome and internet explorer its ok,

thank in advence

 

 

[vekia 8,961]

your shop is under maintenance mode, can you disable maintenance mode for a while ? then i will be able to inspect it

[waav0104 0]

ok no maintenance

[vekia 8,961]

still the same:

[waav0104 0]

sorry is

ok no maintenance

[vekia 8,961]

module is turned off

[waav0104 0]

Is ok problem version prestashop 1.5.3 upgrade is 1.5.6 is ok modul

[seriagueda 0]

hi

 

work in 1.5.6.1?

[vekia 8,961]

yes it should work in 1.5.6.1 (i tested it and works)

[adang darojat 0]

Hello there, i try to prestashop 1.5.6.2 but they said "There was an error while extracting the module (file may be corrupted) " after i upload it.. would you help me please..

[vekia 8,961]

more than weird.

unpack module on your desktop, then pack module directory once again to .zip library

try to upload it once again after that

[adang darojat 0]

more than weird.

unpack module on your desktop, then pack module directory once again to .zip library

try to upload it once again after that

 

Still not working sir. after i unpack and pack to .zip file again..

[vekia 8,961]

ok,

i have no idea why zipp file doesnt work on your prestashop installation

you can install other modules without problems?

[Daviant 21]

Prestashop 1.5.6.1 - 1.5.6.2 (Written with Google Translate)

Greetings Vekia;
Thank you very much for this module. I tried it and it works perfect.
I have a question: is possible to position the Homeslider in the way that I put in the attached image? (keeping the three columns Prestashop default.)

Thank you very much.

[vekia 8,961]

it is possible, but... i've got quesiton

you want to display slider only on homepage? or also on other pages too? everything depends on it!

[Daviant 21]

it is possible, but... i've got quesiton

you want to display slider only on homepage? or also on other pages too? everything depends on it!

Ps. 1.5.6.1 - 1.5.6.2 (Written with Google Translate).

 

Hello, greetings . Homeslider normal behavior, namely, appears on every page and one adds the exceptions in the module configuration.

 

Thanks

Edited January 29, 2014 by Daviant (see edit history)

[vekia 8,961]

but in this case it will not be as easy as it seems, it's because, the easiest solution with display home will allow to show slider only on homepage.

modification like you want need customization of theme file (header.tpl and footer.tpl)

[Daviant 21]

but in this case it will not be as easy as it seems, it's because, the easiest solution with display home will allow to show slider only on homepage.

modification like you want need customization of theme file (header.tpl and footer.tpl)

I thought it was easier homeslider normal operation but if there is a simpler solution that works only on the main page is welcome.

   

I have not seen modules (free or paid) that include this position in the display options.

 

 

(Google Translate)

[EGBee 7]

After in installed the module. The standard slider disappeared. Even the New Slide doesn't appear.

 

I reinstalled it & made force compilation but no luck

 

How can i get it worked or how to revert back to the default slider?

[EGBee 7]

After in installed the module. The standard slider disappeared. Even the New Slide doesn't appear.

 

I reinstalled it & made force compilation but no luck

 

How can i get it worked or how to revert back to the default slider?

 

 

@Vekia i re installed and it works but the home's main menu drop downs and the categories drop downs are not working when i enable this slider module.

 

What am i missing here?

[vekia 8,961]

any chance to see it live? if so, please share url i will inspect it and give you solution

[EGBee 7]

Yes. its www.ezeetrain.com
 
Kindly please help. 
 
I just saw at the bottom of the admin panel i see a notification kind of thing as fatal error
 
getimagesize() [function.getimagesize]: Filename cannot be empty

 

what am i missing here?

Edited February 11, 2014 by EGBee (see edit history)

[vekia 8,961]

add clear:both; to:

.bx-wrapper {
margin-bottom: 20px;
height: 360px;
clear: both;
}

in http://www.ezeetrain.com/modules/homeslider/bx_styles.css file line ~9

[EGBee 7]

@Vekia: 

 

Many thanks for you quick reply. Did as you said and It's working now!  

Edited February 11, 2014 by EGBee (see edit history)

[nicolasG 0]

Hello,

 

(reduce to optimize the size and loading image)

 

Left: Slider width: 650px

Right: <div></div> width:300px + border left 30px

 

It's possible? how?
thank you for your reply

Edited February 19, 2014 by nicolasG (see edit history)

[vekia 8,961]

i dont understand what you exactly expect and .... what's going on

[marion34 0]

Hi Vekia,

I have a quick question. I have the basic three column presta theme with modified colors background etc. I need to adjust the image slider height to accommodate manufacturer images. Will your module allow this up to 1000px height? Ive tried adjusting the original module to

 

 .bx-wrapper {
 margin-bottom:20px;
 height:1000px;
} 

It changes the size of the image but the box it self does not change so I get partial image in the original size image slider.

Thanks

[vekia 8,961]

Hi Vekia,

I have a quick question. I have the basic three column presta theme with modified colors background etc. I need to adjust the image slider height to accommodate manufacturer images. Will your module allow this up to 1000px height? Ive tried adjusting the original module to

 

 .bx-wrapper {

 margin-bottom:20px;

 height:1000px;

} 

It changes the size of the image but the box it self does not change so I get partial image in the original size image slider.

Thanks

any chance to see it live somewhere?

[marion34 0]

Here is a the link. http://hitechmarineequipment.com

Thanks

[vekia 8,961]

i checked your website, there is still height:300px; code inside css styles.

[Dahl99 4]

Hi Vekia,

 

1. When my website loads all the slides appear under each other for a few seconds before the slider starts and then it works ok. Is there a solution to stop that happening?

 

2. I only want the slider to appear on the homepage. Rather than configure this with exceptions is there some code I can add somewhere?

 

3. I've tried to reduce the slider height in the bx_styles.css file from 360 to 300 but nothing happens. What am I doing wrong?

 

Thanks.

[vekia 8,961]

Hi Vekia,

 

1. When my website loads all the slides appear under each other for a few seconds before the slider starts and then it works ok. Is there a solution to stop that happening?

 

2. I only want the slider to appear on the homepage. Rather than configure this with exceptions is there some code I can add somewhere?

 

3. I've tried to reduce the slider height in the bx_styles.css file from 360 to 300 but nothing happens. What am I doing wrong?

 

Thanks.

 

1. try to insert css library for your slider as the first element in <head> section

2. {if $page_name=='index'}contents of module tpl file here{/if} - use this in module template file

3. in this case it will be also necessary to upload new images, you uploaded images in new size?

[muskteer 0]

Hi Vekia,

 

Thanks for that nice module, It works great for English culture but it doesn't work for Arabic culture . It gives me the slider frame but with no images although I changed images for both cultures (En-Ar). I wish you could help me with that .