สอบถามเกี่ยวกับการทำหน้า Coming Soon หน่อยครับ

เริ่มโดย Hotsocial, 12 ตุลาคม 2017, 09:49:04

หัวข้อก่อนหน้า - หัวข้อถัดไป

0 สมาชิก และ 1 ผู้มาเยือน กำลังดูหัวข้อนี้

Hotsocial

สอบถามเกี่ยวกับการทำหน้า Coming Soon หน่อยครับพอดีกำลังหาวิธีการทำหน้า Coming Soon ของ wordpress และไปเจอตัวนี้เข้า คือแบบโดนใจสุดๆ และลองหา plugin เจอแต่ส่วนมากเป็นการใส่รูปเป็น bg เรียบๆ จึงอยากสอบถามว่าจริงๆแล้ว wordpress มี plugin  การใส่ วีดีโอแบบนี้ พร้อม นาฬิกาแบบนี้ไหมครับ

https://www.wix.com/website-template/view/html/1896?originUrl=https%3A%2F%2Fwww.wix.com%2Fwebsite%2Ftemplates%2Fhtml%2Flanding-pages%2Fcoming-soon%2F1&bookName=create-master-new&galleryDocIndex=5&category=landing-pages&metaSiteId=

ขอบคุณครับ

sputtaro

ผมไม่ได้ดู source code ของเว็บตัวอย่างนะครับ
แต่ก็คิดว่า น่าจะทำจาก Modal Javascript
ลองหาปลั๊กอินพวก landing page modal plugin มาใช้ดูครับ

เกรงว่าคุณอาจไม่เข้าใจ เลยขอเพิ่มเติมสักนิดแล้วกันนะครับ

เมื่อคุณใช้ modal  (ซึ่งผมคิดว่าบางทีคุณอาจผ่านตามมาแล้ว ในการหาปลั๊กอิน)
คุณสามารถใส่อะไรก็ได้ เข้าไปยัง modal body

ตัวอย่างโค๊ด

<div class="modal fade" id="myModal" role="dialog">
   <div class="modal-dialog">
   
     <div class="modal-content">
       <div class="modal-header modal-header-primary">
         <button type="button" class="close" data-dismiss="modal">&times;</button>
         <h4> Videos </h4>
       </div>
       <div class="modal-body">
         <p>Modal content..</p>
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
       </div>
     </div>
     
   </div>
 </div>

----------------
เมื่อคุณตั้งค่า ใน Jquery
โค๊ด

jQuery("#vvideolist").on("click", "#myBtn", function(event) {
         
         vdid = jQuery(this).parents("tr").find("td a").attr('rel');
         preview_link = "//youtube.com/embed/" vdid "?autoplay=0&autohide=1&modestbranding=1&rel=1&hd=1";
         video_modal='<div id="previewframe" class="video-container">'
         '<div class="embed-responsive embed-responsive-16by9">'
         '<iframe width="100%" height="500" src="' preview_link '" frameborder="0" allowfullscreen></iframe>'
         '</div>';
         '</div>';
         var $modal = $('.modal');
         $modal.on('show.bs.modal', function(e) {
         $(this)
         .addClass('modal-scrollfix')
         .find('.modal-body')
         .html(video_modal);
         });
         jQuery("#myModal").modal({show: true});
      });

มันก็จะแสดง video ที่ #myModal (ซึ่งก็คือ Modal)
โดยแทนที่เนื้อหาในส่วน class="modal-body"

********************************************

การใช้ ปลั๊กอิน จะสะดวกตรงที่ คุณไม่จำเป็นต้องเข้าใจโค๊ด ก็สามารถใช้งานได้เหมือนกับคนเขียนโค๊ดเอง
หากสนใจจะใช้ ก็ลองหาดูนะครับ

Hotsocial

อ้างถึงจาก: sputtaro ใน 12 ตุลาคม 2017, 10:01:32
ผมไม่ได้ดู source code ของเว็บตัวอย่างนะครับ
แต่ก็คิดว่า น่าจะทำจาก Modal Javascript
ลองหาปลั๊กอินพวก landing page modal plugin มาใช้ดูครับ

เกรงว่าคุณอาจไม่เข้าใจ เลยขอเพิ่มเติมสักนิดแล้วกันนะครับ

เมื่อคุณใช้ modal  (ซึ่งผมคิดว่าบางทีคุณอาจผ่านตามมาแล้ว ในการหาปลั๊กอิน)
คุณสามารถใส่อะไรก็ได้ เข้าไปยัง modal body

ตัวอย่างโค๊ด

<div class="modal fade" id="myModal" role="dialog">
   <div class="modal-dialog">
   
     <div class="modal-content">
       <div class="modal-header modal-header-primary">
         <button type="button" class="close" data-dismiss="modal">&times;</button>
         <h4> Videos </h4>
       </div>
       <div class="modal-body">
         <p>Modal content..</p>
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
       </div>
     </div>
     
   </div>
 </div>

----------------
เมื่อคุณตั้งค่า ใน Jquery
โค๊ด

jQuery("#vvideolist").on("click", "#myBtn", function(event) {
         
         vdid = jQuery(this).parents("tr").find("td a").attr('rel');
         preview_link = "//youtube.com/embed/" vdid "?autoplay=0&autohide=1&modestbranding=1&rel=1&hd=1";
         video_modal='<div id="previewframe" class="video-container">'
         '<div class="embed-responsive embed-responsive-16by9">'
         '<iframe width="100%" height="500" src="' preview_link '" frameborder="0" allowfullscreen></iframe>'
         '</div>';
         '</div>';
         var $modal = $('.modal');
         $modal.on('show.bs.modal', function(e) {
         $(this)
         .addClass('modal-scrollfix')
         .find('.modal-body')
         .html(video_modal);
         });
         jQuery("#myModal").modal({show: true});
      });

มันก็จะแสดง video ที่ #myModal (ซึ่งก็คือ Modal)
โดยแทนที่เนื้อหาในส่วน class="modal-body"

********************************************

การใช้ ปลั๊กอิน จะสะดวกตรงที่ คุณไม่จำเป็นต้องเข้าใจโค๊ด ก็สามารถใช้งานได้เหมือนกับคนเขียนโค๊ดเอง
หากสนใจจะใช้ ก็ลองหาดูนะครับ

ขอบคุณครับ ขอบคุณมากๆ เลยครับ ติดที่ไม่ค่อยเข้าใจสักเท่าไร ขอโทษน้าครับ TT  :'( :'(