问题
I have a jcarousel using in Expression Engine. The code is as below
<div id="carousela" class="jcarousel image-cell">
<ul>
{exp:cg_industry_data:images vehicle_id="{id}" size="large"}
<li {if {index} == {segment_3}} class="active"{/if}><a href="car-gallery/{id}/{index}" onclick="return false" class="noevents"><img src="{img_url}" alt="" /></a> </li>
{/exp:cg_industry_data:images}
</ul>
</div>
The carousel works just fine.
Now I want a text something like below Picture xxx of {imageCount} .I need to make it such that it displays in which image currently being viewed. The imageCount works just fine. Can someone please help me on that/? Or maybe atleast if possible when jcarousel is used how to determine which image being currently displayed?The rendered html looks like below
<div class="index">Picture 1 of 15</div>
<div id="carousela" class="jcarousel image-cell">
<ul>
<li class="active"><a href="car-gallery/D_2650745/1" onclick="return false" class="noevents"><img src="/0265/0745/2014_hyundai_i30_stock_2650745_1_l.jpg" alt="" /></a> </li>
<li ><a href="car-gallery/D_2650745/2" onclick="return false" class="noevents"><img src="/0265/0745/2014_hyundai_i30_stock_2650745_2_l.jpg" alt="" /></a> </li>
<li ><a href="car-gallery/D_2650745/3" onclick="return false" class="noevents"><img src="/0265/0745/2014_hyundai_i30_stock_2650745_3_l.jpg" alt="" /></a> </li>
<li ><a href="car-gallery/D_2650745/4" onclick="return false" class="noevents"><img src="/0265/0745/2014_hyundai_i30_stock_2650745_4_l.jpg" alt="" /></a> </li>
<li ><a href="car-gallery/D_2650745/5" onclick="return false" class="noevents"><img src="/0265/0745/2014_hyundai_i30_stock_2650745_5_l.jpg" alt="" /></a> </li>
<li ><a href="car-gallery/D_2650745/6" onclick="return false" class="noevents"><img src="/0265/0745/2014_hyundai_i30_stock_2650745_6_l.jpg" alt="" /></a> </li>
<li ><a href="car-gallery/D_2650745/7" onclick="return false" class="noevents"><img src="/0265/0745/2014_hyundai_i30_stock_2650745_7_l.jpg" alt="" /></a> </li>
<li ><a href="car-gallery/D_2650745/8" onclick="return false" class="noevents"><img src="/0265/0745/2014_hyundai_i30_stock_2650745_8_l.jpg" alt="" /></a> </li>
<li ><a href="car-gallery/D_2650745/9" onclick="return false" class="noevents"><img src="/0265/0745/2014_hyundai_i30_stock_2650745_9_l.jpg" alt="" /></a> </li>
<li ><a href="car-gallery/D_2650745/10" onclick="return false" class="noevents"><img src="/0265/0745/2014_hyundai_i30_stock_2650745_10_l.jpg" alt="" /></a> </li>
<li ><a href="car-gallery/D_2650745/11" onclick="return false" class="noevents"><img src="/0265/0745/2014_hyundai_i30_stock_2650745_11_l.jpg" alt="" /></a> </li>
<li ><a href="car-gallery/D_2650745/12" onclick="return false" class="noevents"><img src="/0265/0745/2014_hyundai_i30_stock_2650745_12_l.jpg" alt="" /></a> </li>
<li ><a href="car-gallery/D_2650745/13" onclick="return false" class="noevents"><img src="/0265/0745/2014_hyundai_i30_stock_2650745_13_l.jpg" alt="" /></a> </li>
<li ><a href="car-gallery/D_2650745/14" onclick="return false" class="noevents"><img src="/0265/0745/2014_hyundai_i30_stock_2650745_14_l.jpg" alt="" /></a> </li>
<li ><a href="car-gallery/D_2650745/15" onclick="return false" class="noevents"><img src="/0265/0745/2014_hyundai_i30_stock_2650745_15_l.jpg" alt="" /></a> </li>
</ul>
</div>
<div id="navigation" class="clearfix">
<span class="button prevPage"></span>
<div id="carousel">
<ul>
<li class="active"><a href="car-gallery/D_2650745/1"><span class="img" style="background:url(/0265/0745/2014_hyundai_i30_stock_2650745_1_t.jpg) center;"></span></a></li>
<li ><a href="car-gallery/D_2650745/2"><span class="img" style="background:url(/0265/0745/2014_hyundai_i30_stock_2650745_2_t.jpg) center;"></span></a></li>
<li ><a href="car-gallery/D_2650745/3"><span class="img" style="background:url(/0265/0745/2014_hyundai_i30_stock_2650745_3_t.jpg) center;"></span></a></li>
<li ><a href="car-gallery/D_2650745/4"><span class="img" style="background:url(/0265/0745/2014_hyundai_i30_stock_2650745_4_t.jpg) center;"></span></a></li>
<li ><a href="car-gallery/D_2650745/5"><span class="img" style="background:url(/0265/0745/2014_hyundai_i30_stock_2650745_5_t.jpg) center;"></span></a></li>
<li ><a href="car-gallery/D_2650745/6"><span class="img" style="background:url(/0265/0745/2014_hyundai_i30_stock_2650745_6_t.jpg) center;"></span></a></li>
<li ><a href="car-gallery/D_2650745/7"><span class="img" style="background:url(/0265/0745/2014_hyundai_i30_stock_2650745_7_t.jpg) center;"></span></a></li>
<li ><a href="car-gallery/D_2650745/8"><span class="img" style="background:url(/0265/0745/2014_hyundai_i30_stock_2650745_8_t.jpg) center;"></span></a></li>
<li ><a href="car-gallery/D_2650745/9"><span class="img" style="background:url(/0265/0745/2014_hyundai_i30_stock_2650745_9_t.jpg) center;"></span></a></li>
<li ><a href="car-gallery/D_2650745/10"><span class="img" style="background:url(/0265/0745/2014_hyundai_i30_stock_2650745_10_t.jpg) center;"></span></a></li>
<li ><a href="car-gallery/D_2650745/11"><span class="img" style="background:url(/0265/0745/2014_hyundai_i30_stock_2650745_11_t.jpg) center;"></span></a></li>
<li ><a href="car-gallery/D_2650745/12"><span class="img" style="background:url(/0265/0745/2014_hyundai_i30_stock_2650745_12_t.jpg) center;"></span></a></li>
<li ><a href="car-gallery/D_2650745/13"><span class="img" style="background:url(/0265/0745/2014_hyundai_i30_stock_2650745_13_t.jpg) center;"></span></a></li>
<li ><a href="car-gallery/D_2650745/14"><span class="img" style="background:url(/0265/0745/2014_hyundai_i30_stock_2650745_14_t.jpg) center;"></span></a></li>
<li ><a href="car-gallery/D_2650745/15"><span class="img" style="background:url(/0265/0745/2014_hyundai_i30_stock_2650745_15_t.jpg) center;"></span></a></li>
</ul>
</div>
<span class="button nextPage" ></span>
回答1:
This is largely pseudo-code, but upon initial inspection of the plugin, you need to hook in to the plugins jcarousel:targetin event. This mean when the carousel image is switched it will do something. As such, we will change the basic markup to:
<div class="jcarousel">
<ul>
<li><img src="img1.jpg" alt=""><p>HERP</p></li>
<li><img src="img2.jpg" alt=""><p>DERP</p></li>
<li><img src="img3.jpg" alt=""><p>HERPDERP</p></li>
</ul>
</div>
<div class="comment"></div>
Where .comment represents where the comments will go.
Then, when you instantiate the plugin, do something like the following:
$(function() {
$('.jcarousel').on('jcarousel:targetin', 'li', function(event, carousel) {
var comment = $(this).find('p').html();
if(comment) $('.comment').html(comment);
});
$('.jcarousel').jcarousel();
});
NOTE: Make sure the .on comes before the .jcarousel or the carousel won't know to catch the initial "change" on load and the first slide will not add its comment.
This makes it so whenever a new <li> becomes the focus (aka: clicking forward/back), it will search that li for a p grab it's html and set the html of .comment to it.
This should cover your needs, but you will need to modify it accordingly and possibly add some CSS to the p's so they don't show up.
来源：https://stackoverflow.com/questions/23001325/i-need-text-concering-the-picture-number-to-change-in-jcarousel