我意识到这很疯狂,但我用流沙建立了一个过滤库,当你点击较小的图像时,它会拉入一个较大的图像、标题和描述,它以较大的形式显示数据img。下面是当前正在工作的代码。。。
<img src="<?php echo $large_image ?>" data-img="<?php echo $large_image ?>"
data-title="<?php echo get_the_title(); ?>"
data-description="<?php the_content();?>" alt="" class="superbox-img" />
我的客户回来问他们是否可以将开始从数据img属性提取的较大图像从静态图像更改为图库。。。因此,我安装了高级自定义字段插件,并在公文包帖子(自定义页面类型)中为短代码字段添加了一个WYSIWYG编辑器。我想导入一个royal滑块(
http://dimsemenov.com/plugins/royal-slider/) 将代码缩写为。我已经将代码从上面更改为以下内容。。。
<img src="<?php echo $large_image ?>"
data-img="<?php htmlentities(the_field(\'portfolio_galleries\')); ?>"
data-title="<?php echo get_the_title(); ?>"
data-description="<?php the_content();?>" alt="" class="superbox-img" />
这是抛出一个错误并弹出以下HTML。。。
<img src="http://localhost:8888/BVH/wp-content/uploads/2013/03/St-Francis-Assisi-Interior-6-.jpg"
data-img="<div id="new-royalslider-6" class="royalSlider new-royalslider-6 rsMinW rs-simple-vertical"
style="width:100%; height:500;">
<div class="rsContent">
<a class="rsImg" href="http://localhost:8888/BVH/wp-content/uploads/2013/03/test1-1024x437.png">test1</a>
<div class="rsTmb">test1</div>
</div><div class="rsContent">
<a class="rsImg" href="http://localhost:8888/BVH/wp-content/uploads/2013/03/test2-1024x437.png">test2</a>
<div class="rsTmb">test2</div></div>
<div class="rsContent">
<a class="rsImg" href="http://localhost:8888/BVH/wp-content/uploads/2013/03/test3-1024x437.png">test3</a>
<div class="rsTmb">test3</div></div></div>"
data-title="Doane" data-description="<p>testing1234</p>"
alt="" class="superbox-img" />
也许我走错了方向,但最初的图库工作得很好,我想知道如何解决这个问题。我知道,这可能是一个失败的原因,而我目前正试图实现这一点。:/
提前感谢。
更新时间:
data-img="<div id="new-royalslider-6"
class="royalSlider new-royalslider-6 rsMinW rs-simple-vertical"
style="width:100%; height:500;"><div
class="rsContent"> <a
class="rsImg" href="localhost:8888/BVH/wp-content/uploads/2013/03/…; <div`
SO网友:Jan Beck
the_field
在htmlentities()
期望返回值。尝试get_field
而是:
data-img="<?php echo htmlentities(get_field(\'portfolio_galleries\')); ?>"
更新时间:
不要将滑块的这一大块html添加到数据属性中,只需将其添加到图像之后即可:
<img src="<?php echo $large_image ?>"
data-title="<?php echo get_the_title(); ?>"
data-description="<?php the_content();?>" alt="<?php echo get_the_title(); // be nice ?>" class="superbox-img" />
the_field(\'portfolio_galleries\');
并用css隐藏它:
.portfolio-item .royalSlider { display: none; }
现在,当用户单击项目时,将html加载到superbox容器中,方法是将其编辑到
superbox.js 第36行附近:
superbox.find(\'.royalSlider\').remove(); // remove the slider from previous events
var imgData = currentimg.data();
var sliderData = currentimg.next(\'.royalSlider\'); // grab the slider html that we want to insert
superboximg.attr(\'src\', imgData.img);
if (sliderData) { // show the slider if there is one
superbox.clone().append(sliderData); // clone the element so we don\'t loose it for the next time the user clicks
} else { // if there is no slider proceed as before
if (imgData.title) {
superbox.append(\'<h3 class="title">\' + imgData.title + \'</h3>\');
}
if (imgData.description) {
superbox.append(\'<div class="description">\' + imgData.description + \'</div>\');
}
}
有更好的方法可以做到这一点,比如将滑块的URL回传到
<img />
属性,然后通过在这些URL中循环生成滑块html,但现在应该可以了。