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')
-
$('.colorbox-736[href="'+$('#product_image_736').attr('href')+'"]').hide();– adeneo Commented Sep 6, 2012 at 21:19 -
I confused
hrefwithsrc? – adeneo Commented Sep 6, 2012 at 21:31
9 Answers
Reset to default 3 +50I 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');