NDym NDym - 1 month ago 7
CSS Question

Show specific responsive image only

I want to add that maybe my solution is not the best one...

I have a couple of responsive images tags over the one page(using Bootstrap-3.1.1)

<a><img src="" id="Id1" class="img-responsive" alt="" /></a>
<a><img src="" id="Id2" class="img-responsive" alt="" /></a>
<a><img src="" id="Id3" class="img-responsive" alt="" /></a>

I have also pagination on this page

<nav aria-label="Page navigation">
<ul class="pagination" id="pagination"></ul>
</nav>


On every click in paging im getting photos from database.Because my pagination is broken I have to hide every photo before the data from database is comes - i`m not sure how many photo are left in the database...And if there is not image lefts in the database there is an icon little icon that should be hide:

$('.img-responsive').attr('src', 'images/1px.png');


And here is comes the problem I want the first photo not to be hide and to be presented on every "page" and in the same time to be responsive

Please advise me how to handle it.

Answer Source

To target every .img-responsive except for the first one, you can use $.not() or :not with $.first() or :first. The shortest way is probably to use

$('.img-responsive:not(:first)').attr('src', 'images/1px.png');