blocking specific links with jquery

Question

In a gallery I want to block certain thumbnails from expanding their original picture via lightbox. The images don't have an ID, just a class. All of the links are read from a table in a database.

$(document).ready(function(){
            if($('.product-image').attr('target', 'blockedpath')) {
                $('.product-image').click(function(e) {
                    e.preventDefault();
                    return false;
                });
            }
        }); 


<li class="product">
            <div class="productInfo">
                <h3>@i.ToString()</h3>
                <a href="@Href("~/Images/2013/" + i.ToString() + ".jpg")" rel="lightbox" class="link">
                    <img class="product-image" src="@Href("~/Images/2013/Thumbnails/" + i.ToString() + ".jpg")" alt="foto" />
                </a>
            </div>
        </li>

If I use this, all thumbnails get blocked. How can I prevent just the blocked pictures and avoid blocking the thumbnails. Would it be possible, to save all images which should be blocked in an array and loop through that array to block those thumbnails?

By using this code actually you are forcefully setting target to blockedpath for all .product-image' — Peeyush
– Peeyush, Commented Mar 7, 2013 at 10:20

Michael Robinson · Accepted Answer · 2013-03-07 09:57:05Z

5

You are first checking whether any images exist with target = blockedpath, then blocking all images.

You could use something like this:

$(document).ready(function(){
    // Select elements with the product-images class, that also 
    // have a target attribute with a value equal to 'blockedpath'
    // Bind a click event to the matched elements
    $('.product-image[target="blockedpath"]').click(function(event) {
        event.preventDefault();
        return false;
    });
});

answered Mar 7, 2013 at 9:57

Michael Robinson

29.6k12 gold badges109 silver badges131 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Marco Over a year ago

It somehow does not work. I'd like to post my Razer Markup, but the editor swallows it all except 1 line of c#-code. Every picture stay clickable

Marco Over a year ago

I was lazy and just implemented an if-clause with an foreach loop, iterating through all filenames to filter them out, before creating the mark up.

Roko C. Buljan · Accepted Answer · 2013-03-07 09:58:16Z

1

$('[target=blockedpath]').click(function( e ){
  e.preventDeault();
});

or the opposite:

$('.product-image').not('[target=blockedpath]').click(function(){
  alert('hi!');
});

http://api.jquery.com/event.preventDefault/

answered Mar 7, 2013 at 9:58

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Collectives™ on Stack Overflow

blocking specific links with jquery

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related