Hey ya'll I have these 3 images thumbnails here...

<div class="wpcart_gallery" style="text-align:center; padding-top:5px;">

<a class="thickbox cboxElement" title="DSC_0118" href="/wp-content/uploads/2012/07/DSC_0118.jpg" rel="Teardrop Druzy Amethyst Ring" rev="/wp-content/uploads/2012/07/DSC_0118.jpg">
<img class="attachment-gold-thumbnails colorbox-736" width="50" height="50" title="DSC_0118" alt="DSC_0118" src="/wp-content/uploads/2012/07/DSC_0118-50x50.jpg">
</a>

<a class="thickbox cboxElement" title="P7230376" href="/wp-content/uploads/2012/07/P7230376.jpg" rel="Teardrop Druzy Amethyst Ring" rev="/wp-content/uploads/2012/07/P7230376.jpg">
<img class="attachment-gold-thumbnails colorbox-736" width="50" height="50" title="P7230376" alt="P7230376" src="/wp-content/uploads/2012/07/P7230376-50x50.jpg">
</a>

<a class="thickbox cboxElement" title="P7230378" href="/wp-content/uploads/2012/07/P7230378.jpg" rel="Teardrop Druzy Amethyst Ring" rev="/wp-content/uploads/2012/07/P7230378.jpg">
<img class="attachment-gold-thumbnails colorbox-736" width="50" height="50" title="P7230378" alt="P7230378" src="/wp-content/uploads/2012/07/P7230378-50x50.jpg">
</a>
</div>

What I am trying to do is e up with a jquery code that would remove the cboxElement from the first image when the page loads and if I click on one of the images to remove cboxElement and place cboxElement to the images that does not have cboxElement class..

Hope this make sense, I have tried all of the answers I was provided and nothing worked :(

This worked for the first part....remove cboxElement from first link

<script type="text/javascript">
    jQuery('document').ready(function($){
        $(".wpcart_gallery a:first").removeClass("cboxElement");
        $('.thickbox').click(function(){
            $('.thickbox').each(function(obj){
                if(!$(this).hasClass("cboxElement")){
                    $(this).addClass("cboxElement");
                }
            })
            $(this).removeClass("cboxElement");
        })

    });
</script>

The click function does not work at all :( this is a wordpress site so I had to put jQuery('document') instead of $('document')

Hey ya'll I have these 3 images thumbnails here...

<div class="wpcart_gallery" style="text-align:center; padding-top:5px;">

<a class="thickbox cboxElement" title="DSC_0118" href="/wp-content/uploads/2012/07/DSC_0118.jpg" rel="Teardrop Druzy Amethyst Ring" rev="/wp-content/uploads/2012/07/DSC_0118.jpg">
<img class="attachment-gold-thumbnails colorbox-736" width="50" height="50" title="DSC_0118" alt="DSC_0118" src="/wp-content/uploads/2012/07/DSC_0118-50x50.jpg">
</a>

<a class="thickbox cboxElement" title="P7230376" href="/wp-content/uploads/2012/07/P7230376.jpg" rel="Teardrop Druzy Amethyst Ring" rev="/wp-content/uploads/2012/07/P7230376.jpg">
<img class="attachment-gold-thumbnails colorbox-736" width="50" height="50" title="P7230376" alt="P7230376" src="/wp-content/uploads/2012/07/P7230376-50x50.jpg">
</a>

<a class="thickbox cboxElement" title="P7230378" href="/wp-content/uploads/2012/07/P7230378.jpg" rel="Teardrop Druzy Amethyst Ring" rev="/wp-content/uploads/2012/07/P7230378.jpg">
<img class="attachment-gold-thumbnails colorbox-736" width="50" height="50" title="P7230378" alt="P7230378" src="/wp-content/uploads/2012/07/P7230378-50x50.jpg">
</a>
</div>

What I am trying to do is e up with a jquery code that would remove the cboxElement from the first image when the page loads and if I click on one of the images to remove cboxElement and place cboxElement to the images that does not have cboxElement class..

Hope this make sense, I have tried all of the answers I was provided and nothing worked :(

This worked for the first part....remove cboxElement from first link

<script type="text/javascript">
    jQuery('document').ready(function($){
        $(".wpcart_gallery a:first").removeClass("cboxElement");
        $('.thickbox').click(function(){
            $('.thickbox').each(function(obj){
                if(!$(this).hasClass("cboxElement")){
                    $(this).addClass("cboxElement");
                }
            })
            $(this).removeClass("cboxElement");
        })

    });
</script>

The click function does not work at all :( this is a wordpress site so I had to put jQuery('document') instead of $('document')

• javascript
• jquery

Share Improve this question Follow edited Feb 27, 2013 at 7:10 user1269625 asked Sep 6, 2012 at 21:17 user1269625user1269625 3,2192626 gold badges8282 silver badges114114 bronze badges 2

• $('.colorbox-736[href="'+$('#product_image_736').attr('href')+'"]').hide(); – adeneo Commented Sep 6, 2012 at 21:19
• I confused href with src ? – adeneo Commented Sep 6, 2012 at 21:31

Add a ment  | 

9 Answers 9

Sorted by: Reset to default 3 +50

I had the same issue....

jQuery('document').ready(function($){
$(".wpcart_gallery a:first").removeClass("cboxElement");
jQuery(".wpcart_gallery img").click(function($){
jQuery(".wpcart_gallery a").addClass('cboxElement');
jQuery(this).closest('a').removeClass('cboxElement');
});
}); 

This will work :)

jQuery( function(){
    var images = jQuery("#wpcart_gallery").on("click","a", function(e){
        e.preventDefault();
        images.addClass("cboxElement");
        jQuery(this).removeClass("cboxElement");
    });
    images.eq(0).removeClass("cboxElement");
});

try this one

 $(function(){
       $("a:first").removeClass("cboxElement");
        $('.thickbox').click(function(){
            $('.thickbox').each(function(obj){
                if(!$(this).hasClass("cboxElement")){
                    $(this).addClass("cboxElement");
                }
            })
            $(this).removeClass("cboxElement");
        })
    })

Not tested, but:

$("#wpcart_callery img").click(function(){

    // strip the class from all of them
    $("#wpcart_gallery img").removeClass("cboxElement");

    // add it to the clicked one
    $(this).addClass("cboxElement");

});

(function ($) {
    $(function () {
        $('.cboxElement').click(function () {
            $(this).removeClass('cboxElement').siblings().addClass('cboxElement');
        });
    });
})(jQuery);

I'm assuming that you want to have the first image "selected" on the page by not having the class, then subsequently changing classes to indicate selection by not having .cboxElement

$(function() {
  var list = $('.wpcart_gallery .cboxElement').click(function() {
    list.not('.cboxElement').addClass('cboxElement');
    $(this).removeClass('cboxElement');
  });
  list.first().click();
});

JsFiddle of the above.

$(document).ready(function(){

   $(".wpcart_gallery").filter("a:first").removeClass("cBoxElement");      
   $(".wpcart_gallery").on("click", "a", function(){
       $(".wpcart_gallery a").addClass("cBoxElement");
       $(this).removeClass("cBoxElement");   

}

Try this.. It should work

Is it because you are simply missing some semicolons? What error are you seeing in the console window?

<script type="text/javascript">
    jQuery('document').ready(function($){
        $(".wpcart_gallery a:first").removeClass("cboxElement");
        $('.thickbox').click(function(){
            $('.thickbox').each(function(obj){
                if(!$(this).hasClass("cboxElement")){
                    $(this).addClass("cboxElement");
                }
            });  //<-- semi-colon added here
            $(this).removeClass("cboxElement");
        });  //<-- semi-colon added here
    });
</script>

Not sure if this is the best way or not, but this works (a more detailed explanation below):

var elements = new Array();
jQuery(document).ready(function() {
    $('.cboxElement').each(function() {
        var element = $(this);
        element.attr('href', '#');
        element.click(function() {
            for (var i in elements) {
                elements[i].addClass('cboxElement');
            }
            $(this).removeClass('cboxElement');
         });
        elements.push(element);
    });
    $('.cboxElement:first').removeClass('cboxElement');
});

You can see a live example here.

Keep a list of all the .cboxElement elements on the page:

var elements = new Array();

Then on page load, we are going to find all of the .cboxElements and do three things: 1. remove their regular <a> tag behavior by setting the href attribute to '#' 2. set click listeners on each of the elements (that adds the cboxElement class to all original elements, and then remove cboxElement from one that was just clicked). 3. populate our list of all the elements

$('.cboxElement').each(function() {
    var element = $(this);
    // 1. remove <a> tag behavior
    element.attr('href', '#');
    // 2. set click listener
    element.click(function() {
        for (var i in elements) {
            elements[i].addClass('cboxElement');
        }
        $(this).removeClass('cboxElement');
     });
    // 3. keep track of all the .cboxElements
    elements.push(element);
});

Then once we're ready, remove cboxElement from the first one.

    $('.cboxElement:first').removeClass('cboxElement');