Preventing other controls other than links.

[kamalraturi]

Hi, In blueimp gallery, is there a way to prevent some particular links that can navigate to some other url(webpage)? Currently When I click anywhere (on any control like button) on Thumbnail image area, its starting show the slides. I also used adding class to some specific anchor links(and in options) but its also not working. Any Help with example Please? Thanks!

[blueimp]

I guess you're using the following snippet to open the links in the Gallery:

<script>
document.getElementById('links').onclick = function (event) {
    event = event || window.event;
    var target = event.target || event.srcElement,
        link = target.src ? target.parentNode : target,
        options = {index: link, event: event},
        links = this.getElementsByTagName('a');
    blueimp.Gallery(links, options);
};
</script>

It's just an example implementation and not part of the Gallery library, therefore easy to adjust.

If you are not familiar with writing JavaScript, I suggest you use the jQuery version instead, which is easier to setup.

[kamalraturi]

Thanks for replying. Yes, you are correct. But I want to use it with existing code. I used same code, but used 7th line like this:

<script>
        document.getElementById('links').onclick = function (event) {
            event = event || window.event;
            var target = event.target || event.srcElement,
                link = target.src ? target.parentNode : target,
                options = { index: link, event: event, carousel: true },
                links = this.getElementsByClassName('catchthisclassonly'); //7th line
            blueimp.Gallery(links, options);
        };
    </script>

In div:

<div id="links" class="links">
<div class="col-md-2">
<a href="imgurl" class="catchthisclassonly"></a>
<a href="/Records/delete/id=3" class="donotcatchit"></a>  //here it is problem, Behaves like above link.
</div>
<div class="col-md-2">
<a href="imgurl" class="catchthisclassonly"></a>
<a href="/Records/delete/id=3" class="donotcatchit"></a>  //here it is problem, Behaves like above link.
</div>
<div class="col-md-2">
<a href="imgurl" class="catchthisclassonly"></a>
<a href="/Records/delete/id=3" class="donotcatchit"></a>  //here it is problem, Behaves like above link.
</div>
</div>

[syphon1c]

I know its bringing up a "closed" issue, but I got a little further'er as I have the same issue:

I have the following script:

<script>
$(document).ready(function() {
    $(".blah").click(function(event){
        event = event || window.event;
        var target = event.target || event.srcElement,
        link = target.src ? target.parentNode : target,
        options = {index: link, event: event}//, useBootstrapModal: false },
        links = this.getElementsByTagName('a');

    blueimp.Gallery(links, options);
    });
</pre></code>
});
<script>

Then I dynamically generate my list of images into the following format (just a sample):

<div class="col-lg-3">
    <div class="LikeButton"">Like</div>
    <div class="blah" >
        <div id='links'><a href='img1.jpg' title='Title">
            <img src="img1.jpg" class="img-responsive img-thumbnail" alt="image" >
       </div></a>
    </div>

So now it almost works as expected, my "like" buttons next to the images work, and dont render the gallery and then clicking on the gallery opens the gallery, HOWEVER, I cant play the gallery its locked only to that specific image I click and its not "seeing" the rest of the gallery...and my javascripting as you can see above is non-exisiting (: maybe just a pointer?