Good day.

There is a set of mini pictures in the HTML document

<a href="javascript:void(0);"><img class="miniVert" src="images/do_prof.jpg" onclick="setBigImage(this);" oncontextmenu="return false;"></a>

By clicking on each, it is displayed in a larger size in the element:

 <div id="resimagewrapper"> <img id="bigCertVert" src="images/teach_ut.jpg" oncontextmenu="return false;" /> </div>

Using the function:

 function setBigImage(obj){ document.getElementById('bigCertVert').src = obj.src; }

All the pictures were of landscape orientation, so the dimensions of the #bigCertVert element were rigidly specified.
Now there are pictures of portrait orientation, created an output element in this orientation, it is required that the substitution function check the mini-image class and display a large size in the required element in accordance with it.
Need a solution on pure js . Thank you in advance.

  • Those. Do mini classes of album and book versions have different classes, so that by clicking on a mini picture it checks the class and changes the size of the big picture? - Yuri
  • it sounds weird to "change the id of the element by condition", although here we need to change the className - Sublihim
  • Yes, exactly. So that a large version also displays a portrait or landscape orientation, depending on the orientation of the mini-pictures. It occurred to me only to check the mini class and substitute the necessary big class. But maybe there are better options? - Tariel
  • @Tariel, can Jquery? Or just need pure javascript? - Yuri
  • I need clean js - Tariel

3 answers 3

 function setBigImage(obj){ document.getElementById('bigCertVert').src = obj.src; if(obj.classList.contains('type0')){ document.getElementById('bigCertVert').classList.add("type0"); document.getElementById('bigCertVert').classList.remove("type1"); }else if(obj.classList.contains('type1')){ document.getElementById('bigCertVert').classList.add("type1"); document.getElementById('bigCertVert').classList.remove("type0"); }; } 
 #resimagewrapper img.type0 {width:100px;height:50px} #resimagewrapper img.type1 {width:50px;height:50px} 
 <div class="list"> <a href="javascript:void(0);"><img class="miniVert type0" src="https://www.gravatar.com/avatar/0089b585f2499f09a32d95c06d545ba0?s=32&d=identicon&r=PG&f=1" onclick="setBigImage(this);" oncontextmenu="return false;"></a> <a href="javascript:void(0);"><img class="miniVert type1" src="https://www.gravatar.com/avatar/0089b585f2499f09a32d95c06d545ba0?s=32&d=identicon&r=PG&f=1" onclick="setBigImage(this);" oncontextmenu="return false;"></a> </div> <div id="resimagewrapper"> <img id="bigCertVert" class="type0" src="images/teach_ut.jpg" oncontextmenu="return false;" /> </div>

  • Thanks to all. Helped all the answers figured out. Can't mark the answer as useful, not enough reputation - Tariel

 function setBigImage(obj){ if (obj.className == "miniVert"){ document.getElementById('bigCertVert').src = obj.src; } else { document.getElementById('bigCertHoriz').src = obj.src; } } 
 .miniVert, .miniHoriz{ width: 200px; } 
 <a href="javascript:void(0);"><img class="miniVert" src="http://images6.fanpop.com/image/photos/33400000/NEKO-k-33431290-714-714.png" onclick="setBigImage(this);" oncontextmenu="return false;"></a> <a href="javascript:void(0);"><img class="miniHoriz" src="http://images.boomsbeat.com/data/images/full/24384/cat_4-jpg.jpg" onclick="setBigImage(this);" oncontextmenu="return false;"></a> <div id="resimagewrapper"> <img id="bigCertVert" src="images/teach_ut.jpg" oncontextmenu="return false;" /> <img id="bigCertHoriz" src="images/teach_ut.jpg" oncontextmenu="return false;" /> </div>

Like this.

     function setBigImage(obj){ if (obj.classList.contains("miniVert")) document.getElementById('bigCertVert').src = obj.src; else document.getElementById('bigCertHoriz').src = obj.src; }