Post by theloveof » Tue Apr 03, 2012 10:48 pm

Hi there,

This might sound like a very silly question but i cannot work out for the life of me how to do it...

can someone please help explain how i change the slideshow/ carousel images step by step...

so confused

thanks so much

Newbie

Posts

Joined
Tue Apr 03, 2012 10:22 pm

Post by florinsith » Wed Apr 04, 2012 2:05 am

florinsith wrote:First you go in admin > system > design > banners , and there you either edit or insert banners.

When you clicked insert (or edit) you will be taken to the banner page. In that page you can insert one or more images
by clicking "Add banner" (if then you want a banner module with more images(with a fade effect) or leave just one image if you want that banner to display only one image).

After you uploaded your images in the banner (is best if the images are the same size) , navigate trough admin to

extension > modules.

There , click edit on the module Banner.

There , you will click add module , and in the first column , its asking you to select a banner. So , there you

select the banner you created in the previous step.

The second column in size. Is best to insert the same size for the banner , as for your images . At layout select the layout you want it on.complete the other fields and save and you have a displaying banner

The ideea: admin > system > design > banners : Here the banner refers to the actual image(s), you can add as many images per banner as you want and as many banners as you want.

admin > extension > modules > Banner: Here the banner is a module to display the images inserted in specific banners in admin > system > design > banners. You can add as many banner modules as you want to display same or different banners on different positions and pages.

The banners created in admin > system > design > banners, can also be displayed using the slideshow module(is best to use it when a banner contain more than one image and you want the user to controll the transition: ex: click next button for next banner) and using the carousel module(use it to display the banner in carousel form: is best that the banner to have more then 5-6 image of smaller sizes. ex: use it to display the manufacturers logos)

Image
My Extensions - SuperTheme - Opencart templates - Opencart modules


User avatar
Expert Member

Posts

Joined
Fri May 14, 2010 2:36 am


Post by skip » Fri Dec 14, 2012 3:51 am

how to change queue of images in slideshow
I try with change firs letter - no result
I want put first image in slideshow to 3th position for example .how to do it
Thanx

Active Member

Posts

Joined
Mon May 09, 2011 9:57 pm

Post by florinsith » Fri Dec 21, 2012 1:36 am

If you want to be able to sort the images inside the banner you would have too look after an extension that does that.

Image
My Extensions - SuperTheme - Opencart templates - Opencart modules


User avatar
Expert Member

Posts

Joined
Fri May 14, 2010 2:36 am


Post by mcamca » Fri Dec 21, 2012 10:45 pm

skip wrote:how to change queue of images in slideshow
I try with change firs letter - no result
I want put first image in slideshow to 3th position for example .how to do it
Thanx
You can control many aspects of the slideshow as follows:
(Always backup original file first)
In 'slideshow.tpl' located at:
catalog/view/theme/default/template/module/slideshow.tpl
If you have your own theme then 'default' becomes 'your theme name'.

Find:

Code: Select all

<script type="text/javascript"><!--
$(document).ready(function() {
	$('#slideshow<?php echo $module; ?>').nivoSlider();
});
--></script>
and change to:

Code: Select all

<script type="text/javascript"><!--
$(document).ready(function() {
	$('#slideshow<?php echo $module; ?>').nivoSlider(
{"effect":"random","slices":20,"animSpeed":500,"pauseTime":3000,"startSlide":3,"captionOpacity":1,"directionNav":true,"directionNavHide":true,"controlNav":false,"controlNavThumbs":false,"keyboardNav":false,"pauseOnHover":true,"manualAdvance":false,"controlNavThumbsFromRel":true}    );
});
--></script>
The available effects are:

sliceDown
sliceDownLeft
sliceUp
sliceUpLeft
sliceUpDown
sliceUpDownLeft
fold
fade
random
slideInRight
slideInLeft
boxRandom
boxRain
boxRainReverse
boxRainGrow
boxRainGrowReverse

A combination of effects can be entered eg in the above instead of "random" enter:
"fold,fade,sliceDownLeft"

The following describes what each item in the code does:
effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
slices: 15, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed: 500, // Slide transition speed
pauseTime: 3000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: true, // Next & Prev navigation arrows show on hover
directionNavHide":false, // Next & Prev navigation arrows show or not show all the time
controlNav: true, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
pauseOnHover: true, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
randomStart: false, // Start on a random slide

Enjoy!

User avatar
Active Member

Posts

Joined
Fri Aug 06, 2010 5:57 pm

Post by MarauderDesign » Sat Mar 30, 2013 4:27 am

mcamca wrote:
skip wrote:how to change queue of images in slideshow
I try with change firs letter - no result
I want put first image in slideshow to 3th position for example .how to do it
Thanx
You can control many aspects of the slideshow as follows:
(Always backup original file first)
In 'slideshow.tpl' located at:
catalog/view/theme/default/template/module/slideshow.tpl
If you have your own theme then 'default' becomes 'your theme name'.

Find:

Code: Select all

<script type="text/javascript"><!--
$(document).ready(function() {
	$('#slideshow<?php echo $module; ?>').nivoSlider();
});
--></script>
and change to:

Code: Select all

<script type="text/javascript"><!--
$(document).ready(function() {
	$('#slideshow<?php echo $module; ?>').nivoSlider(
{"effect":"random","slices":20,"animSpeed":500,"pauseTime":3000,"startSlide":3,"captionOpacity":1,"directionNav":true,"directionNavHide":true,"controlNav":false,"controlNavThumbs":false,"keyboardNav":false,"pauseOnHover":true,"manualAdvance":false,"controlNavThumbsFromRel":true}    );
});
--></script>
The available effects are:

sliceDown
sliceDownLeft
sliceUp
sliceUpLeft
sliceUpDown
sliceUpDownLeft
fold
fade
random
slideInRight
slideInLeft
boxRandom
boxRain
boxRainReverse
boxRainGrow
boxRainGrowReverse

A combination of effects can be entered eg in the above instead of "random" enter:
"fold,fade,sliceDownLeft"

The following describes what each item in the code does:
effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
slices: 15, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed: 500, // Slide transition speed
pauseTime: 3000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: true, // Next & Prev navigation arrows show on hover
directionNavHide":false, // Next & Prev navigation arrows show or not show all the time
controlNav: true, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
pauseOnHover: true, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
randomStart: false, // Start on a random slide

Enjoy!

This was the answer we were looking for! Awesome post! Thanks!


Posts

Joined
Sat Mar 30, 2013 4:24 am

Post by tallica22 » Tue Apr 15, 2014 1:30 pm

Sorry to did up an old thread, just want to say thank you, this worked great for me, only problem was, there used to be little "buttons" the customers could click on to control what images they see, but now they are gone, how can i get them back?

thanks

mcamca wrote:
skip wrote:how to change queue of images in slideshow
I try with change firs letter - no result
I want put first image in slideshow to 3th position for example .how to do it
Thanx
You can control many aspects of the slideshow as follows:
(Always backup original file first)
In 'slideshow.tpl' located at:
catalog/view/theme/default/template/module/slideshow.tpl
If you have your own theme then 'default' becomes 'your theme name'.

Find:

Code: Select all

<script type="text/javascript"><!--
$(document).ready(function() {
	$('#slideshow<?php echo $module; ?>').nivoSlider();
});
--></script>
and change to:

Code: Select all

<script type="text/javascript"><!--
$(document).ready(function() {
	$('#slideshow<?php echo $module; ?>').nivoSlider(
{"effect":"random","slices":20,"animSpeed":500,"pauseTime":3000,"startSlide":3,"captionOpacity":1,"directionNav":true,"directionNavHide":true,"controlNav":false,"controlNavThumbs":false,"keyboardNav":false,"pauseOnHover":true,"manualAdvance":false,"controlNavThumbsFromRel":true}    );
});
--></script>
The available effects are:

sliceDown
sliceDownLeft
sliceUp
sliceUpLeft
sliceUpDown
sliceUpDownLeft
fold
fade
random
slideInRight
slideInLeft
boxRandom
boxRain
boxRainReverse
boxRainGrow
boxRainGrowReverse

A combination of effects can be entered eg in the above instead of "random" enter:
"fold,fade,sliceDownLeft"

The following describes what each item in the code does:
effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
slices: 15, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed: 500, // Slide transition speed
pauseTime: 3000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: true, // Next & Prev navigation arrows show on hover
directionNavHide":false, // Next & Prev navigation arrows show or not show all the time
controlNav: true, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
pauseOnHover: true, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
randomStart: false, // Start on a random slide

Enjoy!

Newbie

Posts

Joined
Wed Apr 09, 2014 7:45 pm

Post by robert tran » Wed Apr 16, 2014 4:45 pm

Hi all,
If you want to be able to sort the images inside the banner you would have too look after an extension that does that.

Chúng tôi chuyên cung cấp http://ana.biz.vn/ve-may-bay-di-my-n12 và còn có cả http://ana.biz.vn/ve-may-bay-di-canada-n11 giá rất rẻ.


Newbie

Posts

Joined
Wed Apr 16, 2014 4:34 pm


Post by mmtgv » Tue Sep 02, 2014 3:10 pm

tallica22 wrote:Sorry to did up an old thread, just want to say thank you, this worked great for me, only problem was, there used to be little "buttons" the customers could click on to control what images they see, but now they are gone, how can i get them back?

thanks
Try to change the height of the banner (Modules/Slideshow) to at least 320px. Actually, the buttons are there, but there are no visible on dark images because of their grey colors.

Newbie

Posts

Joined
Fri Sep 14, 2012 7:47 pm

Post by Royg » Tue Sep 01, 2015 12:02 am

Sorry to dig this up once more....

I was looking to change the random transition of the default banner slide show to fade and have been playing around with the code shown above. My 'out of the box' slideshow.tpl file is:

<div class="slideshow">
<div id="slideshow<?php echo $module; ?>" class="nivoSlider" style="width: <?php echo $width; ?>px; height: <?php echo $height; ?>px;">
<?php foreach ($banners as $banner) { ?>
<?php if ($banner['link']) { ?>
<a href="<?php echo $banner['link']; ?>"><img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" /></a>
<?php } else { ?>
<img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" />
<?php } ?>
<?php } ?>
</div>
</div>
<script type="text/javascript"><!--
$(document).ready(function() {
$('#slideshow<?php echo $module; ?>').nivoSlider();

});

--></script>


As per above, I added in the line:

{"effect":"fade","slices":20,"animSpeed":500,"pauseTime":3000,"startSlide":3,"captionOpacity":1,"directionNav":true,"directionNavHide":true,"controlNav":false,"controlNavThumbs":false,"keyboardNav":false,"pauseOnHover":true,"manualAdvance":false,"controlNavThumbsFromRel":true} );


and all I get is the rotating loading symbol on the page.

I tried adding just:

{"effect":"fade"} );

But got the same result. What am I doing wrong please?

Thanks
Roy

Newbie

Posts

Joined
Thu Aug 13, 2015 8:12 pm

Post by Royg » Tue Sep 01, 2015 3:27 am

Ok. Resolved.

Syntax error!

Newbie

Posts

Joined
Thu Aug 13, 2015 8:12 pm

Post by skip » Mon Dec 28, 2015 4:32 pm

Hi, how to stop slider on mouse hower in 2031, I wass try this without result

<script type="text/javascript"><!--
$('#slideshow<?php echo $module; ?>').owlCarousel({
items: 6,
autoPlay: 3000,
pauseOnHover: true,
singleItem: true,
navigation: true,
navigationText: ['<i class="fa fa-chevron-left fa-5x"></i>', '<i class="fa fa-chevron-right fa-5x"></i>'],
pagination: true
});
--></script>

Active Member

Posts

Joined
Mon May 09, 2011 9:57 pm

Post by Monkey_Bz » Tue May 10, 2016 11:52 pm

Instead of pauseOnHover: true, use stopOnHover: true,

This worked for me :)

Newbie

Posts

Joined
Fri Apr 29, 2016 2:14 am

Post by skip » Wed May 11, 2016 2:29 am

@Monkey_Bz Thanx I will try

Active Member

Posts

Joined
Mon May 09, 2011 9:57 pm
Who is online

Users browsing this forum: No registered users and 10 guests