将html实体和/或短码添加到数据属性中

时间:2013-03-27 作者:bryanlewis

我意识到这很疯狂,但我用流沙建立了一个过滤库,当你点击较小的图像时,它会拉入一个较大的图像、标题和描述,它以较大的形式显示数据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="&lt;div id=&quot;new-royalslider-6&quot; 
class=&quot;royalSlider new-royalslider-6 rsMinW rs-simple-vertical&quot;  
style=&quot;width:100%; height:500;&quot;&gt;&lt;div 
class=&quot;rsContent&quot;&gt; &lt;a 
class=&quot;rsImg&quot; href=&quot;localhost:8888/BVH/wp-content/uploads/2013/03/…; &lt;div` 

1 个回复
SO网友:Jan Beck

the_fieldhtmlentities() 期望返回值。尝试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,但现在应该可以了。

结束