I need to grab an id, but it is in a slider and the only click event I get access to is the arrows, but they cannot take the unique id of the image. I know there must be a way traverse to the div but that is a little out of my league right now. I did try anything that I found or that came to me but have been unsuccessful so far.
The code for the slider
<div id="myCarousel" class="carousel slide fluid col-md-6 col-md-offset-3" data-ride="carousel" style="height:95%;background-color: #000;">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active" style="border:1px solid #febe27;margin-bottom:125px;"></li>
{% for storyItem in craft.entries.section('stories').find() %}
{% for previewImage in storyItem.slideshowImage %}
<li data-target="#myCarousel" data-slide-to="1" style="border:1px solid #febe27;margin-bottom:125px;"></li>
{% endfor %}
{%endfor%}
</ol>
<div class="carousel-inner" role="listbox" style="height:87%;position:relative;">
<div class="item active">
{% for storyItem in craft.entries.section('stories').limit(1) %}
{% for previewImage in storyItem.slideshowImage %}
<div id="{{storyItem.id}}" class="imgContentWrapper 1" data-id="{{storyItem.id}}"><a href="#"><img src="{{ previewImage.url('slideshowImage') }}" alt="" border="0" /></a>
</div>
{% endfor %}
{%endfor%}
</div>
{% for storyItem in craft.entries.section('stories').offset(1) %}
{% for previewImage in storyItem.slideshowImage %}
<div class="item ">
<div id="{{storyItem.id}}" class="imgContentWrapper" data-id="{{storyItem.id}}"><a href="#"><img src="{{ previewImage.url('slideshowImage') }}" alt="" border="0" /></a>
</div>
</div>
{% endfor %}
{%endfor%}
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true" style="margin-left:-25px;"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true" style="margin-right:-25px;"></span>
<span class="sr-only">Next</span>
</a>
I am trying to grab the {{ storyItem.id }} in the divs (there is two the active and the regular item) on the glyphicon 'click'.
Any help is greatly appreciated.
This should do the trick mate...
$('.glyphicon-chevron-left, .glyphicon-chevron-right').on('click', function() {
var id = $('.carousel-inner').find('item.active').find('.imgContentWrapper').data('id');
});
I suppose that a.carousel-control
are in the same #myCarousel
div as your images. If so you can traverse to the parent and find the image you want like this:
$('.carousel-control').on('click', function() {
var imageId = $(this).parent().find('#your_image_selector');
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.