หัวข้อ: สอบถามเกี่ยวกับการทำหน้า 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">×</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">×</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 :'( :'( |