Recent
Categories
View Replies (3)

Changing 1000ms delay of Vegas slide

  1. Issue
0
Votes
Undo
  1. Tralala
    Tralala
  2. Sherlock Holmes
  3. Commercial Templates
  4. Friday, 16 June 2017
  5.  Subscribe via email
Hi Ciaran,

Using now template Harmony gives me problems by tweaking the behavior of that cumbersome thing called Vegas-slide.
Clicking a menuitem always gives an unwanted delay of 1 second.
The code tells me this:
<div class="vegas-slide vegas-transition-fade vegas-transition-fade-in" style="transition: all 1000ms ease 0s;">

But where can I change that 1000ms? It is element.style, but I can”t find it in the template settings.
(site is still locally under contruction)
Responses (3)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

A number of ways of changing this. The easiest one to implement would be to add the following to the Custom CSS field of your templates parameters, editing the transition-duration to your own taste...

.vegas-slide {

    transition-duration: 500ms !important;

}


Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 1
Tralala
Tralala
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Thanks Ciaran,
But unfortunately this doesn't work.
Neither in the existing custom.css nor in the css-field in the template. And yes, custom.css is loaded.

And I tried it added with the classes .vegas-transition-fade, .vegas-transition-fade-in

By the way: there's only one image in the slider.

I'm afraid I have to find where the element.style is added.
  1. more than a month ago
  2. Commercial Templates
  3. # 2
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

You will find all the available settings for the Vegas script here... http://vegas.jaysalvat.com/documentation/settings/

These settings can be applied to the following In your templates index.php (../templates/[YourTemplate]/index.php)...

<!-- Vegas Background Slideshow -->

<script type="text/javascript" src="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/jquery.vegas.js" charset="utf-8"></script>

<script type="text/javascript">

jQuery(document).ready(function() {

    jQuery('#container_header').vegas({

        delay: <?php echo $this->params->get('headerslideinterval') ?>,

        timer: false,

        slides: [

        <?php 

        foreach ($headerslideshow as $item) { ?>

            { src: '<?php echo $this->baseurl ?>/<?php echo $item->header_slide_image; ?>'},

        <?php } ?>

        ]

    });

});

</script>


Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 3
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!

Site Links

Recommended

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters the trademark holder in the United States and other countries.

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok