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)
If you want to be able to sort the images inside the banner you would have too look after an extension that does that.
You can control many aspects of the slideshow as follows: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
(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>
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>
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!
mcamca wrote:You can control many aspects of the slideshow as follows: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
(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:and change to:Code: Select all
<script type="text/javascript"><!-- $(document).ready(function() { $('#slideshow<?php echo $module; ?>').nivoSlider(); }); --></script>
The available effects are: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>
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!
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
thanks
mcamca wrote:You can control many aspects of the slideshow as follows: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
(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:and change to:Code: Select all
<script type="text/javascript"><!-- $(document).ready(function() { $('#slideshow<?php echo $module; ?>').nivoSlider(); }); --></script>
The available effects are: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>
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!
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.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
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
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
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>
<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>
Who is online
Users browsing this forum: No registered users and 25 guests