diff --git a/ad_banner.gemspec b/ad_banner.gemspec
index ea883fc..66e00d8 100644
--- a/ad_banner.gemspec
+++ b/ad_banner.gemspec
@@ -2,6 +2,19 @@ $:.push File.expand_path("../lib", __FILE__)
 
 # Maintain your gem's version:
 require "ad_banner/version"
+app_path = File.expand_path(__dir__)
+template_path = ENV['PWD'] + '/app/templates'
+all_template = Dir.glob(template_path+'/*/')
+puts 'copying module'
+all_template.each do |folder|
+    if folder.split('/')[-1] != 'mobile'
+        begin 
+            system ('cp -r '+ app_path + '/modules/ ' + folder)
+        rescue 
+            puts 'error copy'
+        end
+    end
+end
 
 # Describe your gem and declare its dependencies:
 Gem::Specification.new do |s|
diff --git a/app/controllers/ad_banners_controller.rb b/app/controllers/ad_banners_controller.rb
index db7ebe7..470c856 100644
--- a/app/controllers/ad_banners_controller.rb
+++ b/app/controllers/ad_banners_controller.rb
@@ -67,11 +67,45 @@ class AdBannersController < ApplicationController
         alt_text = (ad_b.title.nil? || ad_b.title == "" ? "ad-banner image" : ad_b.title)
         caption = i == 0 ? '<div class="cycle-overlay"></div><div class="cycle-pager"></div>' : ""
         klass = i == 0 ? "active" : ""
+        if ad_b.link_open == "new_window"
+          target = "_blank"
+        else
+          target = ""
+        end
+        context = ad_b.context.tr('"',"'") rescue ""
+        alt_title = (ad_b.title.blank? ? "ad-banner image" : ad_b.title)
         if ad_b.exchange_item == "1"
-          image_html = "<div class='w-ad-banner__slide #{klass}' data-link='#{ad_b.out_link || "#"}''><img class='w-ad-banner__image' src='#{image_link}'><div class='w-ad-banner__caption_text'>#{ad_b.title}</div></div>"
+          image_html = "<div class=\"w-ba-banner__slide #{klass}\"
+                             data-link=\"#{ad_b.out_link || "#"}'\"
+                             data-cycle-title=\"#{ad_b.title}\"
+                             data-cycle-desc=\"#{context}\"
+                             data-overlay-template=\"<h3>#{ad_b.title}</h3><p>#{context}</p>\"
+                             data-target=\"#{target}\"
+                             >
+                          <a href=\"#{ad_b.out_link}\" target=\"#{target}\" title=\"#{alt_title}\">
+                            <img class='w-ad-banner__image' src='#{image_link}'>
+                          </a>
+                          <div class='w-ad-banner__caption_text'>#{ad_b.title}</div>
+                        </div>"
         else ad_b.exchange_item == "2"
           youtube_url = format_url(ad_b.youtube,i)
-          image_html = "<div class='w-ad-banner__slide youtube #{klass}' data-yt-binded='0' data-youtube-id='ytplayer#{i}'><div style=\"padding-bottom: 56.25%;position: relative;height: 0;\"><iframe height=\"100%\" width=\"100%\" src=\"#{youtube_url}\" title=\"youtube\" style=\"position: absolute;\"></iframe></div><div class='w-ad-banner__caption_text'>#{ad_b.title}</div></div>"
+          image_html = "<div class=\"w-ba-banner__slide #{klass} youtube\"
+                             data-yt-binded=\"0\"
+                             data-youtube-id=\"ytplayer#{i}\"
+                             data-link=\"#{ad_b.out_link || "#"}'\"
+                             data-cycle-title=\"#{ad_b.title}\"
+                             data-cycle-desc=\"#{context}\"
+                             data-overlay-template=\"<h3>#{ad_b.title}</h3><p>#{context}</p>\"
+                             data-target=\"#{target}\"
+                             >
+                            <div style=\"padding-bottom: 56.25%;position: relative;height: 0;\">
+                              <iframe height=\"100%\" width=\"100%\" 
+                                      src=\"#{youtube_url}\" title=\"youtube\" 
+                                      style=\"position: absolute;\">
+                              </iframe>
+                            </div>
+                            <div class='w-ad-banner__caption_text'>#{ad_b.title}</div>
+                        </div>"
         end
         images << {
           "html" => image_html
@@ -83,8 +117,9 @@ class AdBannersController < ApplicationController
         "ad_fx" => adbanner.ad_fx,
         "speed" => adbanner.speed,
         "title" => adbanner.title,
-        "timeout" => adbanner.timeout,
-        "more" => "More"
+        "timeout" => (adbanner.timeout * 1000),
+        "more" => "More",
+        "desc" => adbanner.title
         },
       "images" => images
     }
diff --git a/app/views/admin/ad_banners/_form.html.erb b/app/views/admin/ad_banners/_form.html.erb
index 609efbe..b2d8e89 100644
--- a/app/views/admin/ad_banners/_form.html.erb
+++ b/app/views/admin/ad_banners/_form.html.erb
@@ -47,7 +47,7 @@
 			<div class="control-group">
 				<%= f.label :speed, t('ad_banner.transition_speed'), :class => "control-label muted"  %>
 		      	<div class="controls">
-				<%= f.number_field :speed, in: 0..1000, step: 100, class: 'input-mini', onkeypress: "if (event.keyCode < 48 || event.keyCode > 57) event.returnValue = false;" %>			
+				<%= f.number_field :speed, in: 0..50000, step: 100, class: 'input-mini', onkeypress: "if (event.keyCode < 48 || event.keyCode > 57) event.returnValue = false;" %>			
 					<span class="help-block"><%= t('ad_banner.number_milliseconds') %></span>
 		      	</div>	
 		     </div>
diff --git a/modules/ad_banner/_ad_banner_widget1.html.erb b/modules/ad_banner/_ad_banner_widget1.html.erb
new file mode 100644
index 0000000..5686156
--- /dev/null
+++ b/modules/ad_banner/_ad_banner_widget1.html.erb
@@ -0,0 +1,67 @@
+<div class="w-ba-banner ba-banner-widget-1">
+  <div class="w-ba-banner__wrap  cycle-slideshow"
+      data-list="images"
+      data-level="0"
+      data-cycle-slides=".w-ba-banner__slide"
+      data-cycle-log="false"
+      data-overlay=".w-ad-banner__overlay_{{subpart-id}}"
+      data-cycle-auto-height="{{base_image}}"
+      data-cycle-speed="{{speed}}"
+      data-cycle-timeout="{{timeout}}"
+      data-cycle-fx="{{ad_fx}}"
+      data-cycle-pager=".banner_caption_{{subpart-id}}"
+      data-pager-template="<li><button></button></li>"
+      data-pager-active-class="active-slide"
+      data-cycle-swipe=true
+      data-cycle-swipe-fx="scrollHorz"
+    >
+    <div class="w-ba-banner__slide {{class}}"
+        data-link="{{link}}"
+        data-cycle-title="{{title}}"
+        data-cycle-desc="{{context}}"
+        data-overlay-template="<h3>{{title}}</h3><p>{{desc}}</p>"
+        data-target="{{target}}"
+      >
+       <a href="{{link}}" target="{{target}}" title="{{alt_title}}">
+           <img class="w-ba-banner__image banner-responsive" src="{{image_link}}" alt="{{alt_title}}">
+       </a>
+
+    </div>
+  </div>
+  <div class="ad-overlay w-ad-banner__overlay_{{subpart-id}}"></div>
+    <div class="w-ba-banner__caption banner-pager banner_caption_{{subpart-id}}"></div>
+    <ul class="controlplay"><a class="resume-slide active" title = "<%= (I18n.locale.to_s =="zh_tw") ? "繼續播放" : "resume" %>"><i></i></a><a class="pause-slide" title = "<%= (I18n.locale.to_s =="zh_tw") ? "暫停播放" : "pause"%>"><i></i></a></ul>
+  <ul class="button-mid">
+    <i class="fa fa-angle-left prev-button" aria-hidden="true" title = "<%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %>"></i>
+    <i class="fa fa-angle-right next-button" aria-hidden="true" title = "<%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %>"></i>
+  </ul>
+</div>
+<script>
+  var flag = 1;
+  $('.pause-slide').off('click').click(function(){
+    $(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('pause');
+    $(this).addClass('active')
+    $(this).parents('.controlplay').eq(0).find('.resume-slide').removeClass('active')
+  });
+  $('.resume-slide').off('click').click(function(){
+    $(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('resume');
+    $(this).addClass('active')
+    $(this).parents('.controlplay').eq(0).find('.pause-slide').removeClass('active')
+  });
+  $('.next-button').off('click').on('click',function(){
+    $(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("next");
+    
+  })
+  $('.prev-button').off('click').on('click',function(){
+    $(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("prev");
+  })
+  
+</script>
+<style type="text/css">
+  .controlplay .resume-slide.active i{
+    color: #32D9C3;
+  }
+  .controlplay .pause-slide.active i{
+    color: #ff4500;
+  }
+</style>
\ No newline at end of file
diff --git a/modules/ad_banner/_ad_banner_widget2_video.html.erb b/modules/ad_banner/_ad_banner_widget2_video.html.erb
new file mode 100644
index 0000000..4f1468b
--- /dev/null
+++ b/modules/ad_banner/_ad_banner_widget2_video.html.erb
@@ -0,0 +1,106 @@
+<div class="w-ba-banner ba-banner-widget-1 ba-banner-widget-youtube">
+  <div class="w-ba-banner__wrap  cycle-slideshow"
+      data-list="images"
+      data-level="0"
+      data-cycle-slides=".w-ba-banner__slide"
+      data-cycle-log="false"
+      data-overlay=".w-ad-banner__overlay_{{subpart-id}}"
+      data-overlay-template="<h2><span>{{title}}</span></h2>{{desc}}"
+      data-cycle-auto-height="{{base_image}}"
+      data-cycle-speed="{{speed}}"
+      data-cycle-timeout="{{timeout}}"
+      data-cycle-fx="{{ad_fx}}"
+      data-pager=".banner_caption_{{subpart-id}}"
+      data-pager-template="<li><button></button></li>"
+      data-pager-active-class="active-slide"
+      data-cycle-youtube="true"
+      data-cycle-youtube-autostart="false"
+      data-cycle-swipe="true"
+      data-cycle-prev=".banner_prev"
+      data-cycle-next=".banner_next"
+      data-cycle-pause-on-hover="true"
+      style="padding-bottom: 56.25%;"
+      >
+
+    {{html}}
+  </div>
+  <div class="ad-overlay w-ad-banner__overlay_{{subpart-id}}"></div>
+    <div class="w-ba-banner__caption banner-pager banner_caption_{{subpart-id}}"></div>
+    <ul class="controlplay"><a class="resume-slide active" title = "<%= (I18n.locale.to_s =="zh_tw") ? "繼續播放" : "resume" %>"><i></i></a><a class="pause-slide" title = "<%= (I18n.locale.to_s =="zh_tw") ? "暫停播放" : "pause"%>"><i></i></a></ul>
+    <ul class="button-mid">
+      <i class="fa fa-angle-left prev-button" aria-hidden="true" title = "<%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %>"></i>
+      <i class="fa fa-angle-right next-button" aria-hidden="true" title = "<%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %>"></i>
+    </ul>
+  </div>
+</div>
+<script type="text/javascript">
+  if (typeof ad_banners_count === 'undefined'){
+    var ad_banners_count = 0;
+  }
+
+  if(document.getElementById("youtube-iframe-api") == null){
+    var tag = document.createElement('script');
+    tag.setAttribute("id", "youtube-iframe-api");
+    tag.src = "https://www.youtube.com/iframe_api";
+    var firstScriptTag = document.getElementsByTagName('script')[0];
+    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+  }
+
+  $("document").ready(function(){
+    $("*[data-yt-binded=0]").each(function(){
+      $(this).attr("data-yt-binded","1");
+      var obj = $(this).find("iframe");
+      obj.attr("id",$(this).data("youtube-id") + "_" + ad_banners_count);
+      ad_banners_count++;
+    })
+  });
+
+if (typeof onYouTubeIframeAPIReady !== 'function'){
+  function onYouTubeIframeAPIReady(){
+    $(".w-ba-banner iframe[data-yt-api-binded=0]").each(function(){
+      $(this).attr("data-yt-api-binded","1");
+       new YT.Player($(this).attr("id"), {
+            events: {
+              'onStateChange': onPlayerStateChange
+            }
+        });
+    })
+  }
+
+  function onPlayerStateChange(event){
+    var iframe = $(event.target.getIframe()),
+        cyclediv = iframe.parents("div.cycle-slideshow");
+    if(event.data == YT.PlayerState.PLAYING || event.data == YT.PlayerState.BUFFERING){
+      cyclediv.cycle("pause");
+    }else if(event.data == YT.PlayerState.PAUSED || event.data == YT.PlayerState.ENDED){
+      cyclediv.cycle("resume");
+    }
+  }
+  $(document).ready(function(){
+    $('.pause-slide').off('click').click(function(){
+      $(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('pause');
+      $(this).addClass('active')
+      $(this).parents('.controlplay').eq(0).find('.resume-slide').removeClass('active')
+    });
+    $('.resume-slide').off('click').click(function(){
+      $(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('resume');
+      $(this).addClass('active')
+      $(this).parents('.controlplay').eq(0).find('.pause-slide').removeClass('active')
+    });
+    $('.next-button').off('click').on('click',function(){
+      $(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("next");
+    })
+    $('.prev-button').off('click').on('click',function(){
+      $(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("prev");
+    })
+  })
+}
+</script>
+<style type="text/css">
+  .controlplay .resume-slide.active i{
+    color: #32D9C3;
+  }
+  .controlplay .pause-slide.active i{
+    color: #ff4500;
+  }
+</style>
\ No newline at end of file