Joomla Templates Club 406,261 posts

[brusamolino Friend brusamolinoJoin date: January 2009Posts: 273Downloads:75Uploads:70 Thanks: 56 Thanked: 10 times in 2 posts]

#731599

Now is a right to left transition, but I need to be a fade-in/fade-out
How can i do it?

Thanks Luca

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#752106

Hi Luca,

The slide in this JA Events II template is using owlCarousel lib, you can see JS code at the end of this file: /root/templates/ja_events_ii/acm/slideshow/tmpl/style-owl.php

and customize as you wish.

[Henning Friend HenningJoin date: February 2012Posts: 69Downloads:45Uploads:9 Thanks: 40 Thanked: 9 times in 1 posts]

#754633

Hi Guys,

Can you provide the code to add the fade-in and fade-out effect? Struggling to customize this on my own, any assistance would be appreciated.

I just require it to fade in and fade out, similar to the JA Playmag theme’s slideshow.

I know this not the place to post the following; I really feel that the JA Acm Slideshow extension does not have a lot of capabilities or functionality! I know that some members would agree. You can only add images, titles and descriptions. What about Transitioning effects, time lapses, auto play feature etc.

Regards,
Henning

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#754773

Hi Henning,

This is only a custom HTML module with advanced options adapt to the concept of template so ACM Slideshow has only some simple options.

This ACM Slideshow implements owl carousel, you can customise it also. Open the file:

/root/templates/ja_events_ii/acm/slideshow/tmpl/style-owl.php

At the end of file you will see script tag for JS and you can customise, for example: autoPlay: 2000, ….

1 user says Thank You to Saguaros for this useful post

1. Henning

[Henning Friend HenningJoin date: February 2012Posts: 69Downloads:45Uploads:9 Thanks: 40 Thanked: 9 times in 1 posts]

#756558

Hi Guys,

I have added the new transition style, but it stops after the second image fades in. Have a look at the script used;

<script>
(function($){
jQuery(document).ready(function($) {
$("#acm-slideshow-<?php echo $module->id; ?> .owl-carousel").owlCarousel({
items: 1,
singleItem : true,
itemsScaleUp : true,
navigation : true,
navigationText : ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"],
pagination: false,
merge: false,
mergeFit: true,
slideBy: 1,
autoPlay: true,
transitionStyle : "fade"
});
});
})(jQuery);
</script>

There are four images that supposed to load but only the first two appear after adding the new transition style.

Regards,
Henning

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#758666

Let me check and will get back to you

[Author]

Posts