Vote to Improve PrestaShop

PrestaShop Forum: Build a free online shop. Count on the Community!

The best place in the world to ask questions about PrestaShop and get advice from our passionate community!

PrestaShop Forum: Build a free online shop. Count on the Community!

Jump to content

 
Photo

re-position re-size home slider


  • Please log in to reply
18 replies to this topic
naykel

    PrestaShop Apprentice

  • Members
  • PipPip
  • 26 posts

Posted 01 November 2012 - 09:51 PM

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


benjamin utterback

    Community Jedi

  • Members
  • PipPipPipPipPip
  • 5931 posts

Posted 01 November 2012 - 10:04 PM

Hello, the image size value of the Home Text Editor has already been changed. That size is not standard by default. Was this a template?

naykel

    PrestaShop Apprentice

  • Members
  • PipPip
  • 26 posts

Posted 02 November 2012 - 12:04 AM


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

cybermatatu

    PrestaShop Newbie

  • Members
  • Pip
  • 3 posts

Posted 02 November 2012 - 02:14 PM

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, 02 November 2012 - 02:16 PM.


vekia

    PrestaShop Legend

  • US Moderators
  • 46475 posts

Posted 02 November 2012 - 02:46 PM

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

free tutorials, free templates, free addons, prestashop modules MndfRK4.png


naykel

    PrestaShop Apprentice

  • Members
  • PipPip
  • 26 posts

Posted 02 November 2012 - 11:05 PM

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

cybermatatu

    PrestaShop Newbie

  • Members
  • Pip
  • 3 posts

Posted 03 November 2012 - 07:48 AM

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, 03 November 2012 - 07:54 AM.


naykel

    PrestaShop Apprentice

  • Members
  • PipPip
  • 26 posts

Posted 03 November 2012 - 09:50 PM

Hey Fredrick, you are a champion that works great.

cybermatatu

    PrestaShop Newbie

  • Members
  • Pip
  • 3 posts

Posted 05 November 2012 - 07:27 AM

Thanks buddy, you're welcomed!

Gany.akshu

    PrestaShop Newbie

  • Members
  • Pip
  • 8 posts

Posted 15 November 2012 - 12:42 PM

Great thanks a lot

go2pub

    PrestaShop Apprentice

  • Members
  • PipPip
  • 44 posts

Posted 04 January 2013 - 02:07 AM

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

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

abhijeetkmohite

    PrestaShop Newbie

  • Members
  • Pip
  • 2 posts

Posted 13 February 2013 - 04:54 AM

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

Attached Files



Northman

    PrestaShop Newbie

  • Members
  • Pip
  • 4 posts

Posted 01 March 2013 - 12:13 PM

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, 18 March 2013 - 04:48 PM.


turdi

    PrestaShop Apprentice

  • Members
  • PipPip
  • 54 posts

Posted 27 March 2013 - 10:59 AM

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, 27 March 2013 - 11:00 AM.


nuchie1

    PrestaShop Apprentice

  • Members
  • PipPip
  • 175 posts

Posted 27 March 2013 - 05:52 PM

I have the same problem, any solution???

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


Thanks I've been trying to resize for a while. Now I need to know how i can center the slider horizonaly

Attached File  Untitled.png   298.56KB   28 downloads

Edited by nuchie1, 27 March 2013 - 05:54 PM.


vekia

    PrestaShop Legend

  • US Moderators
  • 46475 posts

Posted 27 March 2013 - 05:58 PM

paste the url, we will check what you have to do :)

free tutorials, free templates, free addons, prestashop modules MndfRK4.png


turdi

    PrestaShop Apprentice

  • Members
  • PipPip
  • 54 posts

Posted 27 March 2013 - 06:07 PM

Dont want to advertise, but I found a simple solution, free slider. Beautiful and easy to configure.

http://www.prestasho...ider-for-ps-15/

I used it here: http://www.growmundocannabico.com/es/

Edited by turdi, 27 March 2013 - 06:08 PM.


nuchie1

    PrestaShop Apprentice

  • Members
  • PipPip
  • 175 posts

Posted 27 March 2013 - 06:12 PM

paste the url, we will check what you have to do :)


My URL is www.Leoswoodcrafts.com

Edited by nuchie1, 27 March 2013 - 06:13 PM.


abhijeetkmohite

    PrestaShop Newbie

  • Members
  • Pip
  • 2 posts

Posted 29 March 2013 - 05:52 AM

my website url is www.bbitch.in




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users