jQuery Toggle Main Image from 6 "toggle" Divs

Question

So I am a bit new to jQuery - I understand the basics but my mastery is low.

I essentially have 2 rows of three col-md-4 bootstrap divs that are each linked to an image.

The jQuery I have written is absolutely so bloated but I am unsure of a way to do it better. I looked into toggleclass, toggle, hover, etc. but none achieved what I wanted.

The way I have written it has an active class on the one of the six divs with a corresponding image being "shown". I basically just add or remove the class to display:none or display:block based on whatever is being mouseovered until another div is hovered over.

This is the code, and it is basically repeated 6 times.

jQuery('.seoblock').mouseover(function() {
        jQuery('.seoimage').addClass('todisplay');
        jQuery('.brandingimage').removeClass('todisplay');
        jQuery('.mobileimage').removeClass('todisplay');
        jQuery('.optimizationimage').removeClass('todisplay');
        jQuery('.supportimage').removeClass('todisplay');
        jQuery('.commerceimage').removeClass('todisplay');
        jQuery('.seoblock').addClass('todisplayblock');
        jQuery('.brandingblock').removeClass('todisplayblock');
        jQuery('.mobileblock').removeClass('todisplayblock');
        jQuery('.optimizationblock').removeClass('todisplayblock');
        jQuery('.supportblock').removeClass('todisplayblock');
        jQuery('.commerceblock').removeClass('todisplayblock');
});

All the images are in one row and initially not shown. I have the first image displayed by using addClass.

Can you guys point me in the right conceptual direction? I tried to think of a way to achieve it with the "this" command but since the class is not added to the div on which it is hovered over, I cannot figure out how to achieve this affect.

Or maybe this code is fine to use? The only problem is I would like to have it fade in and out between images which is the only thing it does not do right now.

Here is a picture. click

Here is a fiddle.

Thanks so much!

can you edit [this fiddle](http://jsfiddle.net/arunpjohny/o0h668e9/1/) to create a demo — Arun P Johny, Sep 15 '14 at 02:38
Thanks for the link - should have done that anyways. http://jsfiddle.net/o0h668e9/4/ — , Sep 15 '14 at 03:50
Use the Arun answer and add this css: .block-trigger:hover {background:#f7f7f7;cursor:default} to your css. — Christina, Sep 15 '14 at 04:24

score 1 · Accepted Answer · answered Sep 15 '14 at 04:09

You can try something like

<!-- Add a class images -->
<div class="col-lg-12 images">
    <img src="http://www.clker.com/cliparts/N/y/j/v/U/T/green-a-md.png" class="img-responsive supportimage displaynone" />
    <img src="https://www.havefunteaching.com/wp-content/uploads/2013/06/letter-a.png" class="img-responsive seoimage displaynone" />
    <img src="http://www.runlounge.com/wp-content/uploads/2014/08/A.jpg" class="img-responsive brandingimage displaynone" />
    <img src="http://3.bp.blogspot.com/-3aPQIa6qALA/TZXW_YdmWTI/AAAAAAAAX7E/RNAMMoj05fs/s400/A.jpg" class="img-responsive mobileimage displaynone" />
    <img src="http://www.askingmatters.com/wp-content/uploads/2012/07/1242257617140579084NYCS-bull-trans-A.svg_.med_.png" class="img-responsive optimizationimage displaynone" />
    <img src="http://englishschooljapan.com/wp-content/uploads/2013/04/a_clipart.jpg" class="img-responsive commerceimage displaynone" />
</div>

then

<!-- Add a class `block-trigger` and attribute `data-img`(this will have the class for the image to be displayed)-->
<div class="col-lg-4 brandingblock hoverwhite hoveractive block-trigger" data-img=".brandingimage">
    ...
</div>

then

jQuery(function($) {
    $('.brandingimage').addClass('todisplay');
    var $imgs = $('.images img');
    $('.block-trigger').mouseover(function() {
        var $img = $($(this).data('img')).addClass('todisplay');
        $imgs.not($img).removeClass('todisplay');
    });
});

Demo: Fiddle

Wow! Thanks so much Arun! Would there be a simple way to add a fade function or is that opening a whole different can of worms? Is it too hard to setup because I have it setup to add class or remove class based on mouseover? — , Sep 15 '14 at 04:54
you can have a look at css 3 animations(I'm not an expert in that)... http://stackoverflow.com/questions/3331353/transitions-on-the-display-property — Arun P Johny, Sep 15 '14 at 04:58
Thanks! I'll take a look at that. If I wanted to avoid CSS3 to save older browsers, would there be a way to modify the code above using fadeIn and fadeOut? — , Sep 15 '14 at 05:20
it can be done... something like http://jsfiddle.net/arunpjohny/tmpLzyed/4/ - but it is not complete... — Arun P Johny, Sep 15 '14 at 05:34

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

The selected answer is great and Arun is a rock star with jQuery, I am not. However, this script I made for swapping videos from youtube and vimeo I modified for images and it uses click on touch devices and mouseover on non-touch. Hover on touch devices is not reliable since there is no hover with a finger, so different devices behave differently. On Windows you have to add aria-haspopup="true".

I wish I knew how to make functions better so I didn't have to repeat, but it's not too shabby otherwise. You don't need to load but one image, the default image, then you put the relative urls on in the data-src. Really simple, IM0. The touch detection works on IOS, android, and IE mobile.

Demo: http://jsbin.com/zaleq/1/

Edit/See Code: http://jsbin.com/zaleq/1/edit

/* ====== SUPPORTS TOUCH OR NOT ====== */
/*! Detects touch support and adds appropriate classes to html and returns a JS object  |  Copyright (c) 2013 Izilla Partners Pty Ltd  | http://www.izilla.com.au / Licensed under the MIT license  |  https://coderwall.com/p/egbgdw */
var supports=(function(){var d=document.documentElement,c="ontouchstart" in window||navigator.msMaxTouchPoints;if(c){d.className+=" touch";return{touch:true}}else{d.className+=" no-touch";return{touch:false}}})();

/* ====== PRELOAD IMAGES ====== */
// http://css-tricks.com/snippets/jquery/image-preloader/
$.preloadImages = function() {
  for (var i = 0; i < arguments.length; i++) {
    $("<img />").attr("src", arguments[i]);
  }
}

$.preloadImages(
  "http://lorempixel.com/200/200/food/",
  "http://lorempixel.com/200/200/sports/",     
  "http://lorempixel.com/200/200/city/"
);

/* ====== HIDE SHOW IMAGES ON CLICK FOR TOUCH DEVICES ON HOVER FOR NON-TOUCH ====== */
 $(window).load(function() {
    if ($('html').hasClass('no-touch')) {
        $('.image-toggle').bind('mouseover', function(z) {
            z.preventDefault();
            var URL = $(this).attr('data-src');
            var htm = '<img src="' + URL + '" class="img-responsive fademe">';
            $('.image-space').html(htm);
            $('img.fademe').fadeIn(1000).css('display', 'block');
            $(this).addClass('active').siblings('.active').removeClass('active');
        });
    } else {
        $('.image-toggle').bind('click', function(z) {
            z.preventDefault();
            var URL = $(this).attr('data-src');
            var htm = '<img src="' + URL + '" class="img-responsive fademe">';
            $('.image-space').html(htm);
            $('img.fademe').fadeIn(1000).css('display', 'block');
            $(this).addClass('active').siblings('.active').removeClass('active');
            //return false; -- if using an <a href=...
        });
    }
});

CSS:

.image-toggle.active {background:red;color:#fff}

.image-space {margin:3% 0;padding:10px;background:#000}

.image-toggle {padding-top:20px;padding-bottom:20px;;cursor:pointer}

.fademe {display:none;}
        
.image-space img {margin:0 auto;}

General HTML Structure:

  <div class="container">
     <div class="image-space">
        <img src="http://lorempixel.com/200/200/food/" class="img-responsive">
     </div>
     <div class="row">
        <div class="col-sm-4 image-toggle active" data-src="http://lorempixel.com/200/200/food/">
           <p>Image One</p>
        </div>
        <div class="col-sm-4 image-toggle" data-src="http://lorempixel.com/200/200/sports/">
           <p>Image Two</p>
        </div>
        <div class="col-sm-4 image-toggle " data-src="http://lorempixel.com/200/200/city/">
           <p>Image 3</p>
        </div>
     </div>
     <!-- .row -->
  </div>
  <!-- .container -->

jQuery Toggle Main Image from 6 "toggle" Divs

2 Answers2

Demo: http://jsbin.com/zaleq/1/