Post by mteverest » Thu Jun 18, 2015 2:27 pm

Hi,

I'm trying to change the banner transition (Owl Carousel) of home page from standard slide to fade but could not make it work.
I've updated following file with following code but no luck.
catalog/view/theme/default/template/module/slideshow.tpl

Code: Select all

<script type="text/javascript"><!--
$('#slideshow<?php echo $module; ?>').owlCarousel({
	items: 6,
	autoPlay: 3000,
	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,
	//added following code
       transitionStyle:"fade"
});
no other files are changed. I'm testing on lastest version of Firefox & Google Chrome. Any suggestion is highly appreciated.

User avatar
Newbie

Posts

Joined
Sat May 17, 2008 8:46 am
Location - Dhulikhel, Nepal

Post by viethemes » Thu Jun 18, 2015 8:30 pm

Maybe a OCMOD extension is changing the slideshow.tpl file. You should go to admin > Extensions > Modification > click on the Rerfresh button and recheck it.

http://www.viethemes.com - OpenCart turtorials, news, tips and stricks, extension

Our extensions:
Visual Theme Editor - Powerful tool for customizing style of any theme visually
Live Theme Editor - Customize layout, colors, backgrounds, fonts of the default theme
Theme Animation - Animation Editor for any theme

Extra Positions PRO, Custom JavaScript, Custom CSS and others


User avatar
Active Member

Posts

Joined
Thu Jan 08, 2015 12:17 pm


Post by mteverest » Thu Jun 18, 2015 11:12 pm

Thanks viethemes for your reply. I did it several times immediately after updating the file but no luck.

It only slides, no fade effect.

User avatar
Newbie

Posts

Joined
Sat May 17, 2008 8:46 am
Location - Dhulikhel, Nepal

Post by viethemes » Fri Jun 19, 2015 12:30 am

Could you provide your site URL, so we can take a look at it closer?

http://www.viethemes.com - OpenCart turtorials, news, tips and stricks, extension

Our extensions:
Visual Theme Editor - Powerful tool for customizing style of any theme visually
Live Theme Editor - Customize layout, colors, backgrounds, fonts of the default theme
Theme Animation - Animation Editor for any theme

Extra Positions PRO, Custom JavaScript, Custom CSS and others


User avatar
Active Member

Posts

Joined
Thu Jan 08, 2015 12:17 pm


Post by mteverest » Fri Jun 19, 2015 2:45 pm

Please have a look at www.raja.org.np

User avatar
Newbie

Posts

Joined
Sat May 17, 2008 8:46 am
Location - Dhulikhel, Nepal

Post by viethemes » Mon Jun 22, 2015 9:15 pm

mteverest wrote:Please have a look at http://www.raja.org.np
I don't see any change in slideshow file. Did you try to go to admin > Extensions > Modifications > click on the Refresh button and recheck the problem?

http://www.viethemes.com - OpenCart turtorials, news, tips and stricks, extension

Our extensions:
Visual Theme Editor - Powerful tool for customizing style of any theme visually
Live Theme Editor - Customize layout, colors, backgrounds, fonts of the default theme
Theme Animation - Animation Editor for any theme

Extra Positions PRO, Custom JavaScript, Custom CSS and others


User avatar
Active Member

Posts

Joined
Thu Jan 08, 2015 12:17 pm


Post by mteverest » Tue Jun 23, 2015 6:58 pm

Yes i did that multiple times.

User avatar
Newbie

Posts

Joined
Sat May 17, 2008 8:46 am
Location - Dhulikhel, Nepal

Post by viethemes » Tue Jun 23, 2015 10:44 pm

mteverest wrote:Yes i did that multiple times.
Could you send me a admin account and a FTP account via PM, so I can take a look at the problem closer?

http://www.viethemes.com - OpenCart turtorials, news, tips and stricks, extension

Our extensions:
Visual Theme Editor - Powerful tool for customizing style of any theme visually
Live Theme Editor - Customize layout, colors, backgrounds, fonts of the default theme
Theme Animation - Animation Editor for any theme

Extra Positions PRO, Custom JavaScript, Custom CSS and others


User avatar
Active Member

Posts

Joined
Thu Jan 08, 2015 12:17 pm


Post by ricstr » Tue Dec 15, 2015 7:19 pm

I know this is an old thread but for anyone else looking for a solution to the same issue, you need to reference the Owl Transitions CSS file in the slideshow controller file.

Add the following line to '/catalog/controller/module/slideshow.php';

Code: Select all

$this->document->addStyle('catalog/view/javascript/jquery/owl-carousel/owl.transitions.css');

Newbie

Posts

Joined
Thu Dec 03, 2015 4:13 am

Post by giproc » Sun Jan 31, 2016 12:42 am

After referencing the owl-transitions.css, what would be the line to add to the slideshow.tpl? Seems to be a syntax error in the original poster's added line.

New member

Posts

Joined
Sat Aug 29, 2015 9:24 pm

Post by giproc » Sun Jan 31, 2016 1:09 am

After calling the owl transitions css as mentioned by ricstar with the line of code to add to the slideshow.php, I made a tweak to the original poster's addition and it works like a charm (at least on 2.0.3.1.) A similar solution was mentioned in a related thread about banners, modded to enable fading.

Just above the script in slideshow.tpl, add this....
<?php
$bannertransition="fade";
?>

In the script itself in slideshow.tpl , rather than adding....

transitionStyle: 'fade' as mentioned by the original post

add this instead....

transitionStyle: '<?php echo $bannertransition; ?>'

Works for me anyway.

Slideshow.tpl would then look something like this depending on your other options...

<div id="slideshow<?php echo $module; ?>" class="owl-carousel" style="opacity: 1;">
<?php foreach ($banners as $banner) { ?>
<div class="item">
<?php if ($banner['link']) { ?>
<a href="<?php echo $banner['link']; ?>"><img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" /></a>
<?php } else { ?>
<img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" />
<?php } ?>
</div>
<?php } ?>
</div>
<?php
$bannertransition="fade";
?>
<script type="text/javascript"><!--
$('#slideshow<?php echo $module; ?>').owlCarousel({
items: 6,
autoPlay: 5000,
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,
transitionStyle: '<?php echo $bannertransition; ?>'

});
--></script>

New member

Posts

Joined
Sat Aug 29, 2015 9:24 pm
Who is online

Users browsing this forum: No registered users and 19 guests