2016-11-21 3 views
1

Я использую vegas.js плагин (http://vegas.jaysalvat.com/documentation) для моего сайта. Я хочу отобразить некоторые тексты с этими изображениями. как я могу добавить некоторые анимированные тексты с изображениями.

инициализации vegas.js в теле:Как добавить текстовую анимацию с плагином vegas.js

<script> 
    $("#fullScreenSlide").vegas({ 
     preload : true,/*load then show image*/ 
     autoplay: true, 
     loop: true, 
     shuffle: false, 
     cover: true, 
     transition: 'fade', /*animation-effect*/ 
     transitionDuration: 5000, /*animation duration*/ 
     delay: 12000, /*slide duration*/ 

    slides: [ 
     { src: "images/1.jpg" }, 
     { src: "images/2.jpg" }, 
     { src: "images/3.jpg" }, 
     { src: "images/4.jpg" } 
    ], 
     overlay: 'vegas/overlays/01.png' /*overlay background*/ 
    }); 
    </script> 

ответ

3

Просто исправил себя.
Мое решение заключается в следующем:

vegas.js - Add "overlaytext = this._options('overlaytext')," on row 344<br /> 
vegas.js - Edit row 450 "$inner = $('<div class="vegas-slide-inner"></div>')" to the following "$inner = $('<div class="vegas-slide-inner">' + overlaytext + '</div>')" 



И ваш сценарий должен быть изменен на это:

<script> 
        $(".right-container").vegas({ 
         slides: [ 
          { src: "/img/slider1.jpg", overlaytext: "text 1" }, 
          { src: "/img/slider1.jpg", overlaytext: "text 2" } 
         ] 
        }); 
       </script> 

Это, чтобы получить некоторый текст с каждым изображением, то вам нужно будет стиль это к вашим потребностям.