Jump to content
  • 0
naykel

re-position re-size home slider

Question

Hi All,

I put a post up earlier regarding the home slider and I thought I had figured it out but I am still having some problems.

 

I have been playing around with the css and I have figured out how to make the alterations I need but I have been unable to change to overall width of the bx-wrapper.

 

Looking through the html I found <div class="bx-wrapper" style="width:709px; position:relative;"> but I am not sure what is dictating the width of 709px

 

When I use the Google inspect tool it brings up

 

element.style{

width: 709px;

position; relative

}

 

If I alter this I can get it to do what I want but I can't find where to alter it in my .css or .tpl file.

 

I had a look in the .js file but I am still new to this so I could not really understand it.

 

I quickly uploaded something to my site if it is helpful for you to look http://shop.zakscust...om.au/index.php

 

Thanks in advance for the help

 

Regards

Nathan

Share this post


Link to post
Share on other sites

20 answers to this question

Recommended Posts

  • 0

Hi Benjamin,

Its not the home text editor I am having trouble with it is the home slider.

The problem is when I put padding on the home slider it pushes it out of the main column and I can find out how to change the width to correct it. I can change everything except the width of the main div.

The pictures I am using are 600px and the column is 709px.

If I don't use padding it just puts the images in the top left and it does not look any good.

I have a couple of screen shots showing a before and after but I don't know how to link them here.

This is the code I need to change but I can't find where to change it. It seams to he hard coded somehow.

<div class="bx-window" style="position:relative; overflow:hidden; width:709px;"><ul id="homeslider" style="width: 999999px; position: relative; left: -2117.459696px; "><li style="width: 709px; float: left; list-style: none; "><a href="http://www.prestashop.com" title="This is a sample picture"><img src="/modules//homeslider/images/6baec6d3747451bba340cd4ecfe069f3.jpg" alt="sample-2" title="This is a sample picture" height="280" width="601"></a></li>

<li style="width: 709px; float: left; list-style: none; " class="pager"><a href="http://www.prestashop.com" title="This is a sample picture"><img src="/modules//homeslider/images/4b916cb575febe963552f2e8a57cafaf.jpg" alt="sample-1" title="This is a sample picture" height="280" width="601"></a></li>

<li style="width: 709px; float: left; list-style: none; " class="pager"><a href="http://www.prestashop.com" title="This is a sample picture"><img src="/modules//homeslider/images/6baec6d3747451bba340cd4ecfe069f3.jpg" alt="sample-2" title="This is a sample picture" height="280" width="601"></a></li>

<li style="width: 709px; float: left; list-style: none; "><a href="http://www.prestashop.com" title="This is a sample picture"><img src="/modules//homeslider/images/4b916cb575febe963552f2e8a57cafaf.jpg" alt="sample-1" title="This is a sample picture" height="280" width="601"></a></li></ul></div>

 

Best Regards

Nathan

Share this post


Link to post
Share on other sites
  • 0

Hi,

 

I was having the same problem, but I figured out a jQuery hack.

 

$(".bx-wrapper,.bx-window").width("100%"); - Changing both the bx-wrapper & bx-windows width.

 

This is how I used it:

 

<script type="text/javascript">

$(document).ready(function(){

 

/* Banner slider */

$('#topbanner').bxSlider({

mode: 'horizontal',

easing: 'easeOutBounce',

auto: true,

//captions: true,

speed: 3000,

pause: 8000,

pager: false,

controls: false

});

 

$(".bx-wrapper,.bx-window").width("100%");

 

});

</script>

 

Note:You can change width to whatever you choose.

Edited by cybermatatu

Share this post


Link to post
Share on other sites
  • 0

Hi,

 

Where do i put the information for the jQuery hack. I had a play around but was not successful.

 

vekia, the problem with this is it scales/stretches the image to the width of the div or column. It will work if the images are the same size but in my case the column is 680px but the image is only 600px and I am trying to put a colored back ground.

 

Thanks

Share this post


Link to post
Share on other sites
  • 0

Hi,

 

I haven't worked with prestashop, but I think you should try looking at the file: homeslider.js.

It should be under: modules/homeslider/js/homeslider.js

 

The contents should look like below;

/*

* 2007-2012 PrestaShop

*

* NOTICE OF LICENSE

*

* This source file is subject to the Academic Free License (AFL 3.0)

* that is bundled with this package in the file LICENSE.txt.

* It is also available through the world-wide-web at this URL:

* http://opensource.or...ses/afl-3.0.php

* If you did not receive a copy of the license and are unable to

* obtain it through the world-wide-web, please send an email

* to license@prestashop.com so we can send you a copy immediately.

*

* DISCLAIMER

*

* Do not edit or add to this file if you wish to upgrade PrestaShop to newer

* versions in the future. If you wish to customize PrestaShop for your

* needs please refer to http://www.prestashop.com for more information.

*

* @author PrestaShop SA <contact@prestashop.com>

* @copyright 2007-2012 PrestaShop SA

* @version Release: $Revision: 14973 $

* @license http://opensource.or...ses/afl-3.0.php Academic Free License (AFL 3.0)

* International Registered Trademark & Property of PrestaShop SA

*/

 

$(function(){

 

if (typeof(homeslider_speed) == 'undefined')

homeslider_speed = 500;

if (typeof(homeslider_pause) == 'undefined')

homeslider_pause = 3000;

if (typeof(homeslider_loop) == 'undefined')

homeslider_loop = true;

 

$('#homeslider').bxSlider({

infiniteLoop: homeslider_loop,

hideControlOnEnd: true,

pager: true,

autoHover: true,

auto: homeslider_loop,

speed: homeslider_speed,

pause: homeslider_pause,

controls: false

});

 

/* Put your JQuery hack here */

$(".bx-wrapper,.bx-window").width("680px");

 

});

Give it a try and let me know.

 

Good Luck

 

Regards;

Fredrick

Edited by cybermatatu

Share this post


Link to post
Share on other sites
  • 0

$(".bx-wrapper,.bx-window").height("100px");

 

This works to change the height of the box, thanks for the pointer :-)

Share this post


Link to post
Share on other sites
  • 0

Hi i am using this hack in my slide

 

/* Put your JQuery hack here */

$(".bx-wrapper,.bx-window").width("800px");

 

 

it works when i change the slider size

 

but the problem is that when i put multiple images in the slider they are still taking the original size of the image slider you can check out on this website

 

www.bbitch.in

 

 

 

 

please help

 

thanks in advance

post-459570-0-97303800-1360727653_thumb.png

Share this post


Link to post
Share on other sites
  • 0

Hi everyone,

 

I'm new to prestashop and i find this forum very useful.

 

I tried the above method of moving the slider from the hook Home to the hook Top, but it was not satisfying since the hook top is in the div #header and i wanted to move the slider between the div #header and the div #columns.

 

To match this, i put the addJS and addCSS lines to hookDisplayHome() and then called homeslider.tpl in my displayCustomhook() function. Then in the backoffice, i had to attach the module both to DisplayHome hook (for the JS/CSS to be inserted) and to my DisplayCustomhook() (for the tpl to be displayed).

 

Since my website is offline, i can only copy/paste part of code. My customed hook is named 'displayCarousel'.

 

header.tpl:

 

<div id="header" class="grid_9 alpha omega">
{hook h='displayLienspermanents'}
<a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}">
<img class="logo" src="{$logo_url}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if} />
</a>
<div id="header_right" class="grid_6 omega">
{$HOOK_TOP}
</div>
</div>
<div id="carouselHome" class="grid_5">
{hook h='displayCarousel'}
</div>
<div id="columns" class="grid_9 alpha omega clearfix">
<!-- Left -->
.......... (original ps code after)

 

file homeslider.php : (don't forget the registerHook('displayCarousel') in the install method)

public function hookDisplayHome()
{
 if(!$this->_prepareHook())
  return;
 // Check if not a mobile theme
 if ($this->context->getMobileDevice() != false)
  return false;
 $this->context->controller->addJS($this->_path.'js/jquery.bxSlider.min.js');
 $this->context->controller->addCSS($this->_path.'bx_styles.css');
 $this->context->controller->addJS($this->_path.'js/homeslider.js');
 // return $this->display(__FILE__, 'homeslider.tpl'); // <-- remove or comment this line 
}

public function hookDisplayTop()
{
 return $this->hookDisplayHome();
}

public function hookDisplayCarousel()
{
 return $this->display(__FILE__, 'homeslider.tpl');
}

 

If that helps... :)

Edited by Northman

Share this post


Link to post
Share on other sites
  • 0

Hi i am using this hack in my slide

 

/* Put your JQuery hack here */

$(".bx-wrapper,.bx-window").width("800px");

 

 

it works when i change the slider size

 

but the problem is that when i put multiple images in the slider they are still taking the original size of the image slider you can check out on this website

 

www.bbitch.in

 

 

 

 

please help

 

thanks in advance

 

I have the same problem, any solution???

 

here's the web: http://www.growmundocannabico.com/es/

Edited by turdi

Share this post


Link to post
Share on other sites
  • 0

another solution to controlle the height and width is to set useCSS to true in the jquery file. It worked for me.

 

if (!!$.prototype.bxSlider)
$('#homeslider').bxSlider({
useCSS: false, /*change this to true*/
maxSlides: 1,
slideWidth: homeslider_width,
infiniteLoop: homeslider_loop,
hideControlOnEnd: true,
pager: false,
autoHover: true,
auto: homeslider_loop,
speed: parseInt(homeslider_speed),
pause: homeslider_pause,
controls: true
});

Share this post


Link to post
Share on other sites
  • 0

here is a tutorial about moving and chainging size of homeslider module: How to move image slider module from home to top in PrestaShop

 

you can find there how to move slider and hov to change its width and height

 

Hi,

 

This is not the right place to start this topic but I am not able to start new topic.

My question is related to PS version 1.6.0.11.

I have changed my slider height form 100% to 300px. Now home slider is looking good but the new problem is that my both photos which are besides the slider got disturbed.Now other two pictures are not arranging properly. Please help.

 

I tried to attach img but it is not attaching.

Share this post


Link to post
Share on other sites

×