Nội dung

Tạo Video Gallery cực đẹp với unitegallery tích hợp cho theme wordpress

3 năm trước, Code theme wordpress, HTML/CSS, 308 Lượt xem

Các bạn xem demo ở trang này nhé! và download bộ tích hợp về, ở bài này mình sẽ tích hợp qua wordpress.

code này hiện tại mình đang tích hợp sẵn và viết với acf pro, các bạn tạo field như code dưới là chạy ok ạ!

https://unitegallery.net/index.php?page=video-icon

Include header wordpress

Bản sẵn xả nén: https://drive.google.com/file/d/1BHY8j_HzqFnKOk4be0QwNQqiWORXRYHl/view?usp=sharing

<script type='text/javascript' src='<?php echo get_template_directory_uri(); ?>/js/jquery-11.0.min.js'></script>		
<script type='text/javascript' src='<?php echo get_template_directory_uri(); ?>/js/unitegallery.min.js'></script>	

<link rel='stylesheet' href='<?php echo get_template_directory_uri(); ?>/css/unite-gallery.css' type='text/css' />

<script type='text/javascript' src='<?php echo get_template_directory_uri(); ?>/themes/video/ug-theme-video.js'></script>
<link rel='stylesheet' href='<?php echo get_template_directory_uri(); ?>/themes/video/skin-right-thumb.css' type='text/css' /> 

<section class="videohomeok">
			<div class="wrap">
				<div class="row">
						
						<div id="gallery" style="display:none;">
							<?php
							$the_press = new WP_Query(array('post_type' => 'video','posts_per_page' => 10, ));
							// The Loop
							while ($the_press->have_posts()) : $the_press->the_post();      
							 ?>
							<div data-type="youtube"
								 data-title="<?php the_title(); ?>"
								 data-description="<?php the_field('des_video'); ?>"
								 data-thumb="<?php the_field('images_video'); ?>"
								 data-image="<?php the_field('images_video'); ?>"
								 data-videoid="<?php the_field('id_video'); ?>" >
							</div>
							<?php endwhile; ?>      
							<?php wp_reset_postdata();?>
						</div>
					
					
				</div>
			</div>
</section>
	
	<script type="text/javascript">

		jQuery(document).ready(function(){

			jQuery("#gallery").unitegallery();

		});
		
	</script>

Cuối cùng sẽ được

Bài viết mới cập nhập

  • Cách xóa phông ảnh online thành công 100%

    Cách xóa phông ảnh online thành công 100%

    1 tuần trước, 648 Lượt xem

    Với những website xóa phông online, nền ảnh trực tuyến, miễn phí mà NETWEB.VN sẽ giới thiệu dưới đây, bạn sẽ không cần dùng tới Photoshop mà…

Bình luận trên facebook netweb.vn

Gọi netweb Báo giá web Chát Zalo
Chủ đề liên quan theo Tag
, , , , ,

Đam mê thiết kế web, kinh nghiệm 9 năm trong nghề thiết kế website, đang thiết kế web dạo tại netweb.vn, Callme: 08.9898.2526 (Mr Hải)