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!