【演示地址】
http://demo3.yobots.cn/products/iphone-7-ok/
演示的功能有：
- 安装开发型插件Featured Galleries给产品页面添加相册功能；
- 使用商业代码ImageZoom给相册添加幻灯和放大功能；
- 使用开源代码Magnific Popup整合，使第一张图片弹出视频；
- Magnific Popup是一种可以作为万能弹出窗口的一组代码，在此基础上可创建弹出Youku视频等；
- 使用Toolset插件创建自定义文章类型（作为产品中心使用）；
安装步骤：
1，安装U-design主题和子主题，TOOLSET插件（Types 和 Views），Breadcrumb NavXT插件，Featured Galleries插件；
2，设置U-design主题：设置标题显示为Title Position 2，取消自带的面包屑显示，将BLOG选项里的RIGHT边栏改为LEFT边栏；
3，复制functions.php里的一段代码，使用Breadcrumb NavXT插件提供的代码，添加到page-title的DIV内；
4，使用Toolset创建products文章类型，并给其添加分类和标签分别为products-cat和products-tag；
5，给自定义的文章类型添加Featured Galleries属性（Featured Galleries默认情况下，仅给文章和页面附加属性，对于TOOLSET创建的products类型并没有自动附加属性），用以下代码添加到functions.php里即可；
//*给products文章类型附加Featured Galleries属性
function add_featured_galleries_to_ctp( $post_types ) {
array_push($post_types, ‘products’);
return $post_types;
}
add_filter(‘fg_post_types’, ‘add_featured_galleries_to_ctp’ );
6，使用Toolset插件View功能，创建产品列表Products list，这里采用简单的li展示左边显示Featured Image，右边显示文章标题和内容；
.yb-products-list {margin-top:20px;}
.yb-products-list li {list-style:none; margin:15px 0; padding-bottom:15px;border-bottom:1px dashed #ccc;}
.yb-products-list li:last-child {border-bottom:none;}
.yb-products-list li img { float:left; padding:3px;border:1px solid #ccc; margin-right:5px;}
.yb-products-list h2 {font-size:14px; font-weight:bold;margin:0 0 5px 0;}
7，复制主题的single.php至子主题下，并改名为single-products.php；
7-1，使用TOOLSET给PRODUCTS添加文章字段brief-desc；
7-2，由于TOOLSET里无法执行PHP代码，而FEATURED GALLERIES目前找不到合适的办法将其PHP写成短代码，所以只好将TOOLSET里brief-desc短代码写入single-products.php内；
1
<?php echo do_shortcode(‘【types field=”brief-desc”】【/types】’); ?>
7-3，将相册功能和视频弹出功能写入single-products.php内；
A，引入IMAGEZOOM的CSS和JS文件；（由于主题引入JQUERY版本过低，需再次引入）
B，引入Magnific Popup的CSS和JS文件；（A已引入，此处不需再引入）
<!–引入IMAGEZOOM的CSS和JS文件 开始–>
<link rel=”stylesheet” href=”http://demo3.yobots.cn/wp-content/themes/udesign-child/css/imagezoom.css” />
<link rel=”stylesheet” href=”http://demo3.yobots.cn/wp-content/themes/udesign-child/css/es-cus.css” />
<script type=”text/javascript” src=”http://demo1.yobots.cn/wp-content/themes/udesign-child/js/jquery-1.8.3.min.js”></script>
<script type=”text/javascript” src=”http://demo3.yobots.cn/wp-content/themes/udesign-child/js/jquery.imagezoom.min.js”></script>
<script type=”text/javascript” src=”http://demo3.yobots.cn/wp-content/themes/udesign-child/js/modernizr.custom.17475.js”></script>
<script type=”text/javascript” src=”http://demo3.yobots.cn/wp-content/themes/udesign-child/js/jquery.elastislide.js”></script>
<!–引入IMAGEZOOM的CSS和JS文件 结束–>
<!–引入Magnific Popup的文件 开始–>
<link rel=”stylesheet” href=”http://demo3.yobots.cn/wp-content/themes/udesign-child/css/magnific-popup.css” />
<script type=”text/javascript” src=”http://demo3.yobots.cn/wp-content/themes/udesign-child/js/jquery.magnific-popup.min.js”></script>
<!–引入Magnific Popup的文件 结束–>
C，整个代码块如下：
<!–KALATED BEGIN–>
<script type=”text/javascript”>
$(function(){
//yb_products_gallery standard mode
var carsousel = $(‘#yb_products_gallery_carousel’).elastislide({start:0,minItems:4,
onClick:function( el, pos, evt ) {
el.siblings().removeClass(“active”);
el.addClass(“active”);
carsousel.setCurrent( pos );
evt.preventDefault();
// for imagezoom to change image
var yb_products_gallery_obj = $(‘#yb_products_gallery’).data(‘imagezoom’);
yb_products_gallery_obj.changeImage(el.find(‘img’).attr(‘src’),el.find(‘img’).data(‘largeimg’));
},
onReady:function(){
//init imagezoom with many options
$(‘#yb_products_gallery’).ImageZoom({type:’standard’,zoomSize:[480,300],bigImageSrc:'<?php $galleryArray = get_post_gallery_ids($post->ID);echo wp_get_attachment_url( $galleryArray[1] );?>’,offset:[10,-4],zoomViewerClass:’standardViewer’,onShow:function(obj){obj.$viewer.hide().fadeIn(500);},onHide:function(obj){obj.$viewer.show().fadeOut(500);}});
$(‘#yb_products_gallery_carousel li:eq(1)’).addClass(‘active’);
// change zoomview size when window resize
$(window).resize(function(){
var yb_products_gallery_obj = $(‘#yb_products_gallery’).data(‘imagezoom’);
winWidth = $(window).width();
if(winWidth>900)
{
yb_products_gallery_obj.changeZoomSize(480,300);
}
else
{
yb_products_gallery_obj.changeZoomSize( winWidth*0.4,winWidth*0.4*0.625);
}
});
}
});
});
</script><!–end imagezoom script–>
<script type=”text/javascript”>
$(document).ready(function() {
$(‘.popup-youtube’).magnificPopup({
disableOn: 700,
type: ‘iframe’,
mainClass: ‘mfp-fade’,
removalDelay: 160,
preloader: false,
fixedContentPos: false
});
});
</script>
<div class=”yb_box”>
<span class=”yb_products_gallery_wrap”><img id=”yb_products_gallery” src=”<?php echo wp_get_attachment_url( $galleryArray[1] );?>” /></span>
<ul id=”yb_products_gallery_carousel” class=”elastislide-list”>
<?php $have_youtube_url = do_shortcode(‘【types field=”youtube-url”】【/types】’); ?>
<li>
<a href=”<?php echo $have_youtube_url; ?>” <?php if($have_youtube_url!=”#”) { echo ” class=’popup-youtube'”; } ?>>
<img src=”<?php echo wp_get_attachment_url( $galleryArray[0] ); ?>” data-largeimg=”<?php echo wp_get_attachment_url( $galleryArray[0] ); ?>” />
<?php
if($have_youtube_url!=”#”) { echo “<img class=’yb_custom_video_play’ src=’http://demo3.yobots.cn/wp-content/themes/udesign-child/play.png’ />”; }
?>
</a></li>
<!–定义第一个为视频–>
<?php
unset($galleryArray[0]);
foreach ($galleryArray as $id) {
$image_alt = get_post_meta($id, ‘_wp_attachment_image_alt’, true);
echo “<li><a href=’#’><img src='”.wp_get_attachment_url( $id ).”‘ data-largeimg='”.wp_get_attachment_url( $id ).”‘ alt='”.$image_alt.”‘ /></a></li>”;
}
?><!–从第二个循环输出相册–>
</ul>
</div><!–end yb_box–>
<!–KALATED END–>
备忘：$have_youtube_url为TOOLSET创建的YOUTUBE URL文章字段（同上brief-desc），默认值为#，判断如果值不是#，则应该是填入了一个完整的YOUTUBE URL，所以输出URL，并打印class=’popup-youtube’和play.png图片
D，默认值的修改：Youtube Popup Script中的disableOn: 700，表示在屏幕小于700时，禁用视频弹出，如果希望在手机也弹出，可将数值改为100以下。
