Using any method (jQuery, javaScript, CSS, HTML, exclude php), how to add new HTML structure to <img/> on post entry, if there is more than one <img/> ?
Blog platfrom: Blogger.com
If there is only one <img/> the post entry. No additions or changes in the structure of HTML.
But if there is more than one <img/> (example below),
<div class="summary post-body entry-content">
<img src="http://2.bp.blogspot.com/-RiUUAdlHMSE/TehdEWtMyCI/AAAAAAAAASA/AXMQng9etR8/s1600/nemo.jpg"/>
<img src="http://1.bp.blogspot.com/-mUIbhIqAyw4/Tehc-zbmK_I/AAAAAAAAAR8/MlPQb_D5P_A/s1600/walle.jpg"/>
<img src="http://1.bp.blogspot.com/-BRh1P_3XyDo/Tehc9UlYh0I/AAAAAAAAAR4/6TKLJs25ecg/s1600/up.jpg"/>
<img src="http://3.bp.blogspot.com/-R_jrCzUDe-g/TehdHXDrK8I/AAAAAAAAASE/fW_-YGhHx20/s1600/toystory.jpg"/>
<!-- end summary post-body entry-content --></div>
How to transform it as HTML below (automaticly),
<div class="summary post-body entry-content">
<!-- start te-container --><div class="te-container">
<div class="te-controls">
<select id="type">
<option value="te-flip1">Flip 1</option>
<option value="te-flip2">Flip 2</option>
<option value="te-flip3">Flip 3</option>
<option value="te-flip4">Flip 4</option>
</select>
<a id="te-next" href="#" class="te-next">next</a>
<div class="te-shadow"></div>
</div>
<!-- start-wrapper --><div id="te-wrapper" class="te-wrapper">
<div class="te-images">
<img src="http://2.bp.blogspot.com/-RiUUAdlHMSE/TehdEWtMyCI/AAAAAAAAASA/AXMQng9etR8/s1600/nemo.jpg"/>
<img src="http://1.bp.blogspot.com/-mUIbhIqAyw4/Tehc-zbmK_I/AAAAAAAAAR8/MlPQb_D5P_A/s1600/walle.jpg"/>
<img src="http://1.bp.blogspot.com/-BRh1P_3XyDo/Tehc9UlYh0I/AAAAAAAAAR4/6TKLJs25ecg/s1600/up.jpg"/>
<img src="http://3.bp.blogspot.com/-R_jrCzUDe-g/TehdHXDrK8I/AAAAAAAAASE/fW_-YGhHx20/s1600/toystory.jpg"/>
</div>
<div class="te-cover">
<!-- HOW TO DO AUTOMATICLY, FISRT <img/> located at here --><img src="http://2.bp.blogspot.com/-RiUUAdlHMSE/TehdEWtMyCI/AAAAAAAAASA/AXMQng9etR8/s1600/nemo.jpg"/>
</div>
<div class="te-transition">
<div class="te-card">
<div class="te-front"></div>
<div class="te-back"></div>
</div>
</div>
<!-- end te-wrapper --></div>
<!-- end te-container --></div>
<!-- end summary post-body entry-content --></div>
So here's a way to solve your problem,
First to be clear as you wanted to add certain markup directly inside your code, I put those inside a variable. Kept the child node in another variable, appended that with existing markup and updated certain elements as asked for.And I would surely ask for a better solution if available.
Here's the script for your scenario,
$(document).ready(function(){
//checks if no. of image is > 1
if($(".summary").children().length > 1){
// gets all elements inside that div
var images = $(".summary").children();
//makes that div empty
$(".summary").empty();
//kept whole markup inside a variable
var newLayout = "<div class='te-container'> <div class='te-controls'><select id='type'><option value='te-flip1'>Flip 1</option><option value='te-flip2'>Flip 2</option><option value='te-flip3'>Flip 3</option><option value='te-flip4'>Flip 4</option></select><a id='te-next' href='#' class='te-next'>next</a><div class='te-shadow'></div></div><div id='te-wrapper' class='te-wrapper'><div class='te-images'></div><div class='te-cover'></div><div class='te-transition'><div class='te-card'><div class='te-front'></div><div class='te-back'></div></div></div></div></div>";
//appends the layout inside .summary div
$(".summary").append(newLayout);
//adds the images inside new div
$(images).clone().appendTo(".te-images");
//gets first child image of .te-images
var firstImagePath = $(".te-images img:first-child").attr("src");
//adds first child image of .te-images inside .te-cover div
$(".te-cover").append("<img src="+ firstImagePath + " />");
}
});