How to unify jQuery image script?

Question

my english langueage is not good. sorry!

i want to have one script for all images in body.

my scripts is clone images to figure and clone "image alt" to figcaption.

this is two script for two image. and i want one script for all any images.

I hope to have written it correctly and i hope fixed my problem.

I want unify = 1.ins,inm,.. 2.#fig 3.#figcapt

thanks

$("img").removeAttr("height");
$('.ins, .inm, .inl, .outs, .outm, .outl').each(function(i) {
 var $this = $(this);
 var newClass = "i" + i++;    
    $this.addClass(newClass);
});

// i want unify The following two scripts :

// SCRIPT 1:

$('.ins.i0, .inm.i0, .inl.i0, .outs.i0, .outm.i0, .outl.i0').each(function() {
 var $repi = $(this);
 var repicl = $(this).attr("class");
  $repi.after("");
  $('#fig0').addClass(repicl);
  $repi.clone().appendTo("#fig0");
  $("#fig0").append("");
 var $alti =  $(this).attr('alt');
 $("#fcapt0").html($alti);
 $(this).remove();
 return false;

});

// SCRIPT 2:

$('.ins.i1, .inm.i1, .inl.i1, .outs.i1, .outm.i1, .outl.i1').each(function() {
 var $repi = $(this);
 var repicl = $(this).attr("class");
  $repi.after("");
  $('#fig1').addClass(repicl);
  $repi.clone().appendTo("#fig1");
  $("#fig1").append("");
 var $alti =  $(this).attr('alt');
 $("#fcapt1").html($alti);

 $(this).remove();
 return false;

});

figure{
 margin: auto;
 padding:auto; 
 float: inherit;
 height:auto !important;
 position: relative;
 
}
figure.inm{
 width:50% !important;
 margin:0;
 padding:0; 
}
figure.inl{
 width:75% !important;
 margin:0;
 padding:0; 
}
figure.ins img, figure.inm img, figure.inl img{
 width:100% !important;
 margin:0;
 padding:0; 
}
figure.ins{
 width:33.3% !important;
 margin:0;
 padding:0; 
}
figure.size-full{
 margin:10px 10px 0px 10px !important;
 padding:0 !important;

}
figure.alignnone, figure.alignright  {
 float: right;
 margin:0;
 padding:0;
}
figure.alignleft   {
 float: left;
 margin:0;
 padding:0;
}
figure figcaption{
 position: absolute;
 background-color: #000;
 color: #fff;
 opacity: 0.5;
 width: 97%;
 bottom: 13px;
 right: 0;
 height: auto;
 padding:0 1.5% 0 1.5%;
 line-height: 180%;
 font-size: 9pt;
 margin: 0;
 text-align: right;

}

figure:hover figcaption{
 display: none
}
body img{
 max-width:100% !important;
}


aaaaaaa

cccccccccc
ddddddddd

ffffffff
gggggggggg
hhhhhhhhhhhh

user_4540183 · Answer

You can use i as class, then do all actions dynamically based on i like below. Also I optimize your code and removed some extra. Also I used wrap instead of clone and remove elements.

$('.inm').each(function(i) {

  var $this = $(this);
  $this.addClass("i" + i);
    
  var repicl = $this.attr("class");
  var $alti = $this.attr('alt');

  $this.wrap("");
  $("#fig" + i).append(""+$alti+"");
  
});

figure {
  margin: auto;
  padding: auto;
  float: inherit;
  height: auto !important;
  position: relative;
}

figure.inm {
  width: 50% !important;
  margin: 0;
  padding: 0;
}

figure.inl {
  width: 75% !important;
  margin: 0;
  padding: 0;
}

figure.ins img,
figure.inm img,
figure.inl img {
  width: 100% !important;
  margin: 0;
  padding: 0;
}

figure.ins {
  width: 33.3% !important;
  margin: 0;
  padding: 0;
}

figure.size-full {
  margin: 10px 10px 0px 10px !important;
  padding: 0 !important;
}

figure.alignnone,
figure.alignright {
  float: right;
  margin: 0;
  padding: 0;
}

figure.alignleft {
  float: left;
  margin: 0;
  padding: 0;
}

figure figcaption {
  position: absolute;
  background-color: #000;
  color: #fff;
  opacity: 0.5;
  width: 97%;
  bottom: 13px;
  right: 0;
  height: auto;
  padding: 0 1.5% 0 1.5%;
  line-height: 180%;
  font-size: 9pt;
  margin: 0;
  text-align: right;
}

figure:hover figcaption {
  display: none
}

body img {
  max-width: 100% !important;
}

How to unify jQuery image script?

1 Answers