We Keep Coding

Append 2 json objects per div

I am trying to append two different JSON items per div. I empty the div before looping through the json and then append the objects.
But I need to append two per div and each item has to be different.
Eg. div1 has img1 & img2, div2 has img3 & img4 etc.
This is the result I am getting -
<div class="gallery-sub-slider">
<div>
<img class="img1">
<img class="img2">
<img class="img3">
<img class="img4">
<img class="img5">
</div>
<div>
<img class="img1">
<img class="img2">
<img class="img3">
<img class="img4">
<img class="img5">
</div>
</div>
But this is the result that I need -
<div class="gallery-sub-slider">
<div>
<img class="img1">
<img class="img2">
</div>
<div>
<img class="img3">
<img class="img4">
</div>
<div>
<img class="img5">
<img class="img6">
</div>
</div>
$.each(data.carImages, function(i){
counter++;
imgLink = data.carImages[i].imgLink;
console.log(counter);
$('.gallery-slider').append('<div><img src="' + imgLink + '" class="gallery-img" data-tag="' + i + '"></div>');
$('.gallery-sub-slider').append('<div class="sub-gallery-item" data-index="' + i + '"></div>');
$('.gallery-sub-slider div').append('<img src="' + imgLink + '" class="sub-gallery-img" data-tag="1"><img src="' + imgLink + '" class="sub-gallery-img">');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Rather than looping through each data.carImage, you can consider first calculating the number of divs you will require:
var divCount = Math.ceil(data.carImages.length / 2)
And loop through those:
for (var i = 0; i < divCount; i++) {
var firstImgIndex = i*2;
var secondImgIndex = firstImgIndex + 1;
var firstImg = data.carImages[firstImgIndex];
var secondImg = data.carImages[secondImgIndex];
// create your div now, with your first and second img, but you might have to check that secondImg !== null or undefined
}

Function not loading quickly enough

I have an each function that determines when a link is clicked within an ID. Once the click has happened, it takes the relevant attributes and associates them to the main image.
This functionality can also include a video, so if the html contains an id called #video it takes the video attribute and sticks it in the predefined <video>.
When you first initially load the everything and quickly click on the number 5, the overlay of the elevateZoom happens on top of video. Even thought i have a if statement that determines it.
What would be the best way to overcome this on when a user clicks it very quickly.
Trial it here: http://s.codepen.io/jagmitg/debug/jPXzzz?
Actual codepen: http://codepen.io/jagmitg/pen/jPXzzz
$('#product-gallery-super').children().click(function(e) {
e.preventDefault();
var prodImg = $(this).attr('data-image');
var imgSrc = $(this).children().attr('src')
var vidCheck = false;
var mainImg = $('.main-image');
if (imgSrc != 'http://yi.yoga/images/cs.jpg') {
$(this).addClass("active-thumbnail").siblings().removeClass("active-thumbnail");
if ($(this).attr('id') == 'video') {
$('.main-image').hide();
if (!$('.product-video').hasClass('product-video')) {
var videoLink = $(this).attr('href');
var videoImg = $(this).find('img').attr('src');
var video = '<div class="video-container"> <video class="flat-video product-video" bgcolor="#FFFFFF" id="mainVideo" poster="' + videoImg + '" autoplay autobuffer width="100px" height="100px"> <source src="' + videoLink + '"> <object type="application/x-shockwave-flash" data="http://vjs.zencdn.net/c/video-js.swf" width="100%" height="auto"> <param name="allowfullscreen" value="false"> <param name="allowscriptaccess" value="always"> <param name="flashvars" value="file=' + videoLink + '"> <!--[if IE]><param name="movie" value="http://vjs.zencdn.net/c/video-js.swf"><![endif]--> <img src="' + videoImg + '" width="100%" height="auto" alt="Video"></object> </video> <span class="playPause icon-play off"></span> <div class="controls-bar off"> <div class="duration"> <div class="duration-amount"></div> </div> </div> <div class="top-controls-bar off"> <div class="info"> </div> </div> </div>';
$('.container').prepend(video);
// START VIDEO FUNCTION videoInitate();
}
} else {
mainDestroy()
$('.video-container').remove();
$('.main-image').show();
$('.main-image').attr('src', prodImg);
$('.product-zoom').elevateZoom({
cursor: 'pointer',
zoomType: "window",
zoomWindowFadeIn: 500,
zoomWindowFadeOut: 750,
responsive: true,
borderSize: 1,
borderColour: '#DDDDDD',
lensBorder: 1,
lensSize: 200,
scrollZoom: false,
zoomWindowFadeOut: 1,
});
}
}
});
function mainDestroy() {
$('.zoomContainer').remove();
$('.product-zoom').removeData('elevateZoom');
$('.product-zoom').removeData('zoomImage');
}
.active-thumbnail {
display: inline-block;
border: 1px solid black;
}
#product-gallery-super img {
width: 61px;
height: 79px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<div class="container">
<img class="main-image image-resize product-zoom" src="http://placehold.it/300x400?text=1" data-zoom-image="http://placehold.it/1000x2000?text=1" onerror="comingSoonMain(this)">
<div id="product-gallery-super">
<a href="#" class="product-zoom-gallery active-thumbnail" data-image="http://placehold.it/300x400?text=1">
<img src="http://placehold.it/61x79?text=1">
</a>
<a href="#" class="product-zoom-gallery" data-image="http://placehold.it/300x400?text=2">
<img src="http://yi.yoga/images/cs.jpg">
</a>
<a href="#" class="product-zoom-gallery" data-image="http://placehold.it/300x400?text=3">
<img src="http://placehold.it/61x79?text=3">
</a>
<a href="#" class="product-zoom-gallery" data-image="http://placehold.it/300x400?text=4">
<img src="http://placehold.it/61x79?text=4">
</a>
<a href="http://simplypx.com/images/Prometheus.mp4" id="video" class="product-zoom-gallery" data-image="http://placehold.it/300x400?text=VID">
<img src="http://placehold.it/61x79?text=5">
</a>
<a href="#" class="product-zoom-gallery" data-image="http://placehold.it/300x400?text=6">
<img src="http://placehold.it/61x79?text=6">
</a>
</div>
</div>

Using sketch.js I want to download more of the produced data

When I press the download key on it does not download the quote that is present. Is there a way to change this? I tried playing around with the "data-" tag but can get nothing to work.
Here is the code
<title>SNUGGLETOOTH</title>
</head>
<body>
<nav>
<div id="SketchTools">
<!-- Basic tools -->
<img src="img/black_icon.png" alt="Black"/>
<img src="img/red_icon.png" alt="Red"/>
<img src="img/green_icon.png" alt="Green"/>
<img src="img/blue_icon.png" alt="Blue"/>
<img src="img/yellow_icon.png" alt="Yellow"/>
<img src="img/cyan_icon.png" alt="Cyan"/>
<!-- Advanced colors -->
<img src="img/alizarin_icon.png" alt="Alizarin"/>
<img src="img/pomegrante_icon.png" alt="Pomegrante"/>
<img src="img/emerald_icon.png" alt="Emerald"/>
<img src="img/torquoise_icon.png" alt="Torquoise"/>
<img src="img/peterriver_icon.png" alt="Peter River"/>
<img src="img/amethyst_icon.png" alt="Amethyst"/>
<img src="img/sunflower_icon.png" alt="Sun Flower"/>
<img src="img/orange_icon.png" alt="Orange"/>
<img src="img/clouds_icon.png" alt="Clouds"/>
<img src="img/silver_icon.png" alt="Silver"/>
<img src="img/asbestos_icon.png" alt="Asbestos"/>
<img src="img/wetasphalt_icon.png" alt="Wet Asphalt"/>
</br> <img src="img/eraser_icon.png" alt="Eraser"/>
<!-- Size options -->
<img src="img/pencil_icon.png" alt="Pencil"/>
<img src="img/pen_icon.png" alt="Pen"/>
<img src="img/stick_icon.png" alt="Stick"/>
<img src="img/smallbrush_icon.png" alt="Small brush"/>
<img src="img/mediumbrush_icon.png" alt="Medium brush"/>
<img src="img/bigbrush_icon.png" alt="Big brush"/>
<img src="img/bucket_icon.png" alt="Huge bucket"/>
Download
<br/>
</div>
<div class="links">
<ul>
<li><img src="ficon.png" alt="Facebook"></li>
<li><img src="igramicon.png" alt="Instagram"></li>
<li><img src="picon.png" alt="Pinterest"></li>
<li><img src="mcicon.png" alt="Mixcloud"></li>
<li><img src="twicon.png" alt="Twitter"></li>
</ul>
</div>
<div class="message">
<div data id="quote"></div>
<script>
(function() {
var quotes = [
{ text: "Snuggletooth likes pancakes"},
{ text: "Would you like Snuggletooth to tuck you in?"},
{ text: " Snuggletooth loves you"},
{ text: "Snuggletooth is here for you"},
{ text: "Did you know that Snuggletooth </br>can be in 2 places at once?"},
{ text: "Heyyyy!<br> I was just thinking about you </br>Love Snuggletooth" },
{ text: "Wanna Sandwich??</br>xSnuggletooth"},
{ text: "Want some breakfast???</br> ;) Snuggletooth"},
{ text: "Snuggletooth-a-riffic!!!"},
{ text: "Snuggletooth makes great popcorn!"},
{ text: "Come over to Snuggletooth's! He makes a great guacamole!"},
{ text: "Snuggletooth likes his bubblebaths to smell like bubblegum"},
{ text: "Snuggletooth wants to know what are you up to later?"},
{ text: "Snuggletooth-a-licious!!!"},
];
var quote = quotes[Math.floor(Math.random() * quotes.length)];
document.getElementById("quote").innerHTML =
'<p>' + quote.text + '</p>' +
'' + '';
})();
</script>
</div>
</nav>
<canvas id="SketchPad" width="1125" height="600">
</canvas>
</div>
<script type="text/javascript">
$(function() {
$('#SketchPad').sketch();
});
</script>

Try utilizing window.URL.createObjectURL , also adding style element to exported objectURL . See Drawing DOM objects into a canvas
$(function() {
$('#SketchPad').sketch();
$("#DownloadPng").on("click", function(e) {
e.preventDefault();
var canvas = document.getElementById('SketchPad');
var ctx = canvas.getContext('2d');
var style = $("style");
var data = '<svg xmlns="http://www.w3.org/2000/svg" width="1125" height="600">'
+ '<foreignObject width="100%" height="100%">'
+ '<div xmlns="http://www.w3.org/1999/xhtml">'
+ $(".message")[0].outerHTML
+ '</div>'
+ '<style xmlns="http://www.w3.org/1999/xhtml">'
+ style[0].innerHTML + '</style>'
+ '</foreignObject>'
+ '</svg>';
var DOMURL = window.URL || window.webkitURL || window;
var svg = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
var url = DOMURL.createObjectURL(svg);
var popup = window.open(url, "popup")
})
});
jsfiddle http://jsfiddle.net/e1ovm9mn/1/

How to load images using web worker?

I am trying to load images using webworker api. I have large images in my html page its takes 5 mins to load all images therefore i am using webworker to load images.
here is technique..
I am keeping src attribute of all img tag empty in html page.
All images have unique id for each img e.g id = events_all_1_01 meaning image src will be "pictures/keywords/events/all/1/01.jpg". i.e last part events/all/1/01.jpg is id.
Main.html file
<body>
<script src="js/modernizr.custom.js"></script>
<script language="javascript">
window.onload = function(){
if (Modernizr.webworkers) {
var worker = new Worker('js/webworker/test_ww_23_04.js');
worker.onmessage = function(event) {
var url = event.data.replace(/_/g, "/");
var image_src = "pictures/keywords/"+url+".jpg";
var img = new Image();
img.src = image_src;
img.onload = function(){
// do stuff when your image is loaded
document.getElementById(event.data).src = image_src;
}
};
worker.onerror = function(e) {
alert('Error: Line ' + e.lineno + ' in ' + e.filename + ': ' + e.message);
};
var img_container = document.getElementById("wrapper");
var image_array = img_container.getElementsByTagName('img');
for(var i=0;i<image_array.length;i++){
var img_id = image_array[i].id;
console.log(img_id); // http://jsfiddle.net/5vyseob7/
postMessage(img_id); // http://jsfiddle.net/k04t6760/ here i am passing id one by one to webworker..
}
} // end of if condition
} // end of window.onload()
</script>
<div id="wrapper" style="height: 500px;width: 200px;overflow-y: auto;border: 1px solid gray;">
<div id="pictures1">
<div class="effect-1">
<div><img src="" id="events_all_1_01" width="150" height="100"></div>
<div><img src="" id="events_all_1_02" width="150" height="100"></div>
<div><img src="" id="events_all_1_03" width="150" height="100"></div>
<div><img src="" id="events_all_1_04" width="150" height="100"></div>
</div>
<hr/>
<div class="effect-2">
<div><img src="" id="events_all_2_01" width="150" height="100"></div>
<div><img src="" id="events_all_2_02" width="150" height="100"></div>
<div><img src="" id="events_all_2_03" width="150" height="100"></div>
<div><img src="" id="events_all_2_04" width="150" height="100"></div>
</div>
<hr/>
<div class="effect-3">
<div><img src="" id="events_all_3_01" width="150" height="100"></div>
<div><img src="" id="events_all_3_02" width="150" height="100"></div>
<div><img src="" id="events_all_3_03" width="150" height="100"></div>
<div><img src="" id="events_all_3_04" width="150" height="100"></div>
</div>
<hr/>
<div class="effect-4">
<div><img src="" id="events_all_4_01" width="150" height="100"></div>
<div><img src="" id="events_all_4_02" width="150" height="100"></div>
<div><img src="" id="events_all_4_03" width="150" height="100"></div>
<div><img src="" id="events_all_4_04" width="150" height="100"></div>
</div>
</div>
</div>
</body>
webworker code.
//var src = 'pictures/keywords/events/all/1/01.jpg';
//var id = src.substring(src.substring(0,18).length).split('.')[0].replace(/\//g, "_"); // Creating id here......events_all_1_01
//var fst = id.substring(0, id.lastIndexOf("_")+1); // get first part.... events_all_1
//var lst = parseInt(id.substr(id.lastIndexOf("_")+1)); // get last part i.e imagename ..01,02,03 etc....... and convert it to int
function LoadImages(currID) {
setTimeout(function() {
postMessage(currID);
}, 100);
}
self.onmessage = function(event) {
var currID = event.data;
LoadImages(currID);
};
I am getting following error :
Uncaught SyntaxError: Failed to execute 'postMessage' on 'Window': Invalid target origin '' in a call to 'postMessage'.

Typo error:
...
worker.onmessage = function(event) {
var url = e.data.replace(/_/g, "/");
e is not defined ... you probably meant function(e) or event.data.replace
UPDATE
Window don't have the postMessage method ... you need to use the worker method worker.postMessage

Simplify my jQuery code, which is growing huge and redundant

I am no jQuery expert, but I'm learning. I'm using a bit (growing to a LOT) of jQuery to hide some images and show a single image when a thumb is clicked. While this bit of jQuery works, it's horribly inefficient but I am unsure of how to simplify this to something that works on more of a universal level.
<script>
$(document).ready(function () {
// Changing the Materials
$("a#shirtred").click(function () {
$("#selectMaterials img").removeClass("visible");
$("img.selectShirtRed").addClass("visible");
});
$("a#shirtgrey").click(function () {
$("#selectMaterials img").removeClass("visible");
$("img.selectShirtGrey").addClass("visible");
});
$("a#shirtgreen").click(function () {
$("#selectMaterials img").removeClass("visible");
$("img.selectShirtGreen").addClass("visible");
});
$("a#shirtblue").click(function () {
$("#selectMaterials img").removeClass("visible");
$("img.selectShirtBlue").addClass("visible");
});
// Changing the Collars
$("a#collarred").click(function () {
$("#selectCollar img").removeClass("visible");
$("img.selectCollarRed").addClass("visible");
});
$("a#collargrey").click(function () {
$("#selectCollar img").removeClass("visible");
$("img.selectCollarGrey").addClass("visible");
});
$("a#collargreen").click(function () {
$("#selectCollar img").removeClass("visible");
$("img.selectCollarGreen").addClass("visible");
});
$("a#collarblue").click(function () {
$("#selectCollar img").removeClass("visible");
$("img.selectCollarBlue").addClass("visible");
});
// Changing the Cuffs
$("a#cuffred").click(function () {
$("#selectCuff img").removeClass("visible");
$("img.selectCuffRed").addClass("visible");
});
$("a#cuffgrey").click(function () {
$("#selectCuff img").removeClass("visible");
$("img.selectCuffGrey").addClass("visible");
});
$("a#cuffblue").click(function () {
$("#selectCuff img").removeClass("visible");
$("img.selectCuffBlue").addClass("visible");
});
$("a#cuffgreen").click(function () {
$("#selectCuff img").removeClass("visible");
$("img.selectCuffGreen").addClass("visible");
});
// Changing the Pockets
$("a#pocketred").click(function () {
$("#selectPocket img").removeClass("visible");
$("img.selectPocketRed").addClass("visible");
});
$("a#pocketgrey").click(function () {
$("#selectPocket img").removeClass("visible");
$("img.selectPocketGrey").addClass("visible");
});
$("a#pocketblue").click(function () {
$("#selectPocket img").removeClass("visible");
$("img.selectPocketBlue").addClass("visible");
});
$("a#pocketgreen").click(function () {
$("#selectPocket img").removeClass("visible");
$("img.selectPocketGreen").addClass("visible");
});
});
</scrip>
<!-- Thumbnails which can be clicked on to toggle the larger preview image -->
<div class="materials">
<img src="/grey_shirt.png" height="122" width="122" />
<img src="red_shirt.png" height="122" width="122" />
<img src="hblue_shirt.png" height="122" width="122" />
<img src="green_shirt.png" height="122" width="122" />
</div>
<div class="collars">
<img src="grey_collar.png" height="122" width="122" />
<img src="red_collar.png" height="122" width="122" />
<img src="blue_collar.png" height="122" width="122" />
<img src="green_collar.png" height="122" width="122" />
</div>
<div class="cuffs">
<img src="grey_cuff.png" height="122" width="122" />
<img src="red_cuff.png" height="122" width="122" />
<img src="blue_cuff.png" height="122" width="122" />
<img src="/green_cuff.png" height="122" width="122" />
</div>
<div class="pockets">
<img src="grey_pocket.png" height="122" width="122" />
<img src=".png" height="122" width="122" />
<img src="blue_pocket.png" height="122" width="122" />
<img src="green_pocket.png" height="122" width="122" />
</div>
<!-- The larger images where one from each set should be viewable at one time, triggered by the thumb clicked above -->
<div class="selectionimg">
<div id="selectShirt">
<img src="grey_shirt.png" height="250" width="250" class="selectShirtGrey show" />
<img src="red_shirt.png" height="250" width="250" class="selectShirtRed hide" />
<img src="blue_shirt.png" height="250" width="250" class="selectShirtBlue hide" />
<img src="green_shirt.png" height="250" width="250" class="selectShirtGreen hide" /> </div>
<div id="selectCollar">
<img src="grey_collar.png" height="250" width="250" class="selectCollarGrey show" />
<img src="red_collar.png" height="250" width="250" class="selectCollarRed hide" />
<img src="blue_collar.png" height="250" width="250" class="selectCollarBlue hide" />
<img src="green_collar.png" height="250" width="250" class="selectCollarGreen hide" /> </div>
<div id="selectCuff">
<img src="grey_cuff.png" height="250" width="250" class="selectCuffGrey show" />
<img src="red_cuff.png" height="250" width="250" class="selectCuffRed hide" />
<img src="blue_cuff.png" height="250" width="250" class="selectCuffBlue hide" />
<img src="green_cuff.png" height="250" width="250" class="selectCuffGreen hide" /> </div>
<div id="selectPocket">
<img src="grey_pocket.png" height="250" width="250" class="selectPocketGrey show" />
<img src="hred_pocket.png" height="250" width="250" class="selectPocketRed hide" />
<img src="blue_pocket.png" height="250" width="250" class="selectPocketBlue hide" />
<img src="green_pocket.png" height="250" width="250" class="selectPocketGreen hide" />
</div> </div>

$("a[color]").each(function() {
$(this).click(function () {
var color = $(this).attr('color');
$("#selectCuff img").removeClass("visible");
$("img[color="+color+"]").addClass("visible");
});
});
like that?
Also you can play with context css classes like that
#select img {
display:none;
}
#select.red img.red{
display:inline;
}
and add/remove color class on #select div
I've just realize that you don't even need 'each' here
$("a[color]").click(function() {
var color = $(this).attr('color');
$("#selectCuff img").removeClass("visible");
$("img[color="+color+"]").addClass("visible");
});
in markup
show grey
<div id="select">
<img src="grey_collar.png" height="250" width="250" color="grey" />
<img src="red_collar.png" height="250" width="250" color="red" />
</div>

You could do something like this? (check for corrct case etc..not tested)
<script>
function setupMaterialsClick(name)
{
$("a#" + name).click(function () {
$("#selectMaterials img").removeClass("visible");
$("img.select" + name).addClass("visible");
});
}
$(document).ready(function ()
{
// Changing the Materials
setupMaterialsClick("shirtred");
// etc
// Other bits
});
});
</script>

Change your classes to match the case of the ids of the links, then do something like:
$('materials a').bind(changeSelection);
$('collars a').bind(changeSelection);
$('cuffs a').bind(changeSelection);
$('pockets a').bind(changeSelection);
function changeSelection()
{
var id = $(this).attr('id');
var selectClass = 'img.select'+id;
$("#selectPocket img").removeClass("visible");
$(selectClass).addClass("visible");
}

$("a").each(function() {
$(this).click(function() {
var src = $(this).children("img").attr("src");
var img = $(".selectionimg").find("img[src$='"+src+"']");
img.addClass("visible").siblings().removeClass("visible");
return false;
});
});
This assumes, that the selected images are the same src as the corresponding clickable images.

I haven't had a chance to test this with images, but you can shorten your HTML and script as follows:
$(document).ready(function(){
/* names in the materials variable must match the image file name */
/* the script will form the filename as follows: grey_shirt.png */
var materials = {
'shirt' : ["grey", "red", "blue", "green"],
'collar' : ["grey", "red", "blue", "green"],
'cuff' : ["grey", "red", "blue", "green"],
'pocket' : ["grey", "red", "blue", "green"]
}
/* Set up Content */
var i, c = '', s = '<div class="selectionimg">';
$.each(materials, function(key, value){
c += '<div class="' + key + '">';
s += '<div class="select' + key + '">';
for (i=0; i<value.length; i++) {
c += '<img class="thumb" src="' + value[i] + '_' + key + '.png">';
s += '<img src="' + value[i] + '_' + key + '.png" height="250" width="250" class="large-img select' + value[i];
s += (i==0) ? ' show" />' : ' hide" />'; // add show class only the first selection
}
c += '</div>';
s += '</div>';
})
$('#content').html(c + s + '</div>');
/* Set up scripting */
$('#content a').click(function(){
var type = $(this).parent().attr('class');
var color = $(this).attr('rel');
$('.select' + type).find('img').removeClass('visible').end()
.find('img.select' + color).addClass('visible');
return false;
})
})