ThaiSEOBoard.com

พัฒนาเว็บไซต์ => CMS & Free Script => ข้อความที่เริ่มโดย: Hotsocial ที่ 12 ตุลาคม 2017, 09:49:04



หัวข้อ: สอบถามเกี่ยวกับการทำหน้า Coming Soon หน่อยครับ
เริ่มหัวข้อโดย: Hotsocial ที่ 12 ตุลาคม 2017, 09:49:04
สอบถามเกี่ยวกับการทำหน้า 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=

ขอบคุณครับ


หัวข้อ: Re: สอบถามเกี่ยวกับการทำหน้า Coming Soon หน่อยครับ
เริ่มหัวข้อโดย: 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"

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

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


หัวข้อ: Re: สอบถามเกี่ยวกับการทำหน้า Coming Soon หน่อยครับ
เริ่มหัวข้อโดย: Hotsocial ที่ 12 ตุลาคม 2017, 11:14:25
ผมไม่ได้ดู 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  :'( :'(