Simplify my jQuery code, which is growing huge and redundant - javascript

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;
})
})

Related

sorting array of images by value in ascending order

cardShop is a div with children -> (images with different ID's and values)
every card value looks like this 2000,500 or this 1500,200
I want to sort the images by value in ascending order by the first number in the array.
The function is called by the blue button in the right corner.
Here is what I have done so far.
HTML DOC
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="script.js"></script>
<style>
#toSort{
background-color: #3b5998;
width:50px;
height:50px;
float:right;
}</style>
</head>
<body>
<div id = "cardShop" style="overflow:scroll">
<div id ="toSort" onclick="sorting()"></div>
<img id="card" height="400" width="250" src="./cardImages/blueEyes.jpg" value = 3000,2500>
<img id="card2" height="400" width="250" src="./cardImages/blue.jpg" value = 1400,1200>
<img id="card3" height="400" width="250" src="./cardImages/orange.jpg" value = 1200,700>
<img id="card4" height="400" width="250" src="./cardImages/blackDrag.jpg" value = 3200,2500>
<img id="card5" height="400" width="250" src="./cardImages/spider.jpg" value = 2500,2100>
<img id="card6" height="400" width="250" src="./cardImages/dark.jpg" value = 2500,2100>
<img id="card7" height="400" width="250" src="./cardImages/grill.jpg" value = 2000,1700>
<img id="card8" height="400" width="250" src="./cardImages/gaia.jpg" value = 2300,2100>
<img id="card9" height="400" width="250" src="./cardImages/redEyes.jpg" value = 2400,2000>
<img id="card10" height="400" width="250" src="./cardImages/flamee.jpg" value = 1800,1600>
<img id="card11" height="400" width="250" src="./cardImages/curse.jpg" value = 2800,2200>
<img id="card12" height="400" width="250" src="./cardImages/tripple.jpg" value = 4500,3800>
</div>
</body>
</html>
JavaScript file
function sorting() {
let deck = [].slice.call(document.getElementById("cardShop").children)
for (let i = 2; i < deck.length; i++) {
let elementValue = deck[i].getAttribute('value').split(",").map(Number);
}
}

const sorting = () => {
const images = document.getElementsByTagName('img');
const deck = [].slice.call(images);
const container = document.getElementById('cardShop');
const deckSorted = deck.sort((a, b) => {
const aToSort = a.getAttribute('value').split(',')[0];
const bToSort = b.getAttribute('value').split(',')[0];
return aToSort - bToSort;
});
for(let i = 0; i < deck.length; i++) {
deck[i].parentNode.removeChild(deck[i]);
container.append(deckSorted[i]);
}
}
<div id="cardShop" style="overflow:scroll">
<div id ="toSort" onclick="sorting()">Sort</div>
<img id="card" height="400" width="250" src="./cardImages/blueEyes.jpg" value = 3000,2500>
<img id="card2" height="400" width="250" src="./cardImages/blue.jpg" value = 1400,1200>
<img id="card3" height="400" width="250" src="./cardImages/orange.jpg" value = 1200,700>
<img id="card4" height="400" width="250" src="./cardImages/blackDrag.jpg" value = 3200,2500>
<img id="card5" height="400" width="250" src="./cardImages/spider.jpg" value = 2500,2100>
<img id="card6" height="400" width="250" src="./cardImages/dark.jpg" value = 2500,2100>
<img id="card7" height="400" width="250" src="./cardImages/grill.jpg" value = 2000,1700>
<img id="card8" height="400" width="250" src="./cardImages/gaia.jpg" value = 2300,2100>
<img id="card9" height="400" width="250" src="./cardImages/redEyes.jpg" value = 2400,2000>
<img id="card10" height="400" width="250" src="./cardImages/flamee.jpg" value = 1800,1600>
<img id="card11" height="400" width="250" src="./cardImages/curse.jpg" value = 2800,2200>
<img id="card12" height="400" width="250" src="./cardImages/tripple.jpg" value = 4500,3800>
</div>
You can do it using sort and after that just remove the old element and append the new element, like this.

You are on the right track,I finished the code for you.
The code pushes all the images to an array with json elements that contains the element and the value (the left one). It then sorts them in the right order, removes all the images and inserts them again in the correct order.
Working example:
https://playcode.io/537993
function sorting() {
let deck = [].slice.call(document.getElementById("cardShop").children)
let images = []
let button = document.getElementById('toSort');
for (let i = 1; i < deck.length; i++) {
let elementValue = deck[i].getAttribute('value').split(",").map(Number);
// add all values to a array with json info about the element
images.push({
'element': deck[i],
'value': elementValue[0]
});
}
// sort them on the value
images.sort((a, b) => {
return a.value - b.value;
})
// remove all elements in the div
document.getElementById('cardShop').innerHTML = '';
// add the button again
document.getElementById('cardShop').appendChild(button);
// Add the images again
images.forEach(image => {
document.getElementById('cardShop').appendChild(image.element)
})
}

const setup = () => {
const toSort = document.querySelector('#toSort');
toSort.addEventListener('click', sorting);
};
const sorting = () => {
let cardShop = document.querySelector('#cardShop');
let dek = [...cardShop.querySelectorAll('img')]
.sort((a,b) => {
let valuesA = a.getAttribute('value').split(',');
let valuesB = b.getAttribute('value').split(',');
let comparer = valuesA[0].localeCompare(valuesB[0]);
if(comparer === 0)
comparer = valuesA[1].localeCompare(valuesB[1]);
return comparer;
})
.map(node=>cardShop.appendChild(node));
};
//load
window.addEventListener('load', setup);
#toSort{
background-color: #3b5998;
width:50px;
height:50px;
float:right;
}
<!DOCTYPE html>
<html lang="en">
<body>
<div id = "cardShop" style="overflow:scroll">
<div id ="toSort"></div>
<img id="card" height="400" width="250" src="./cardImages/blueEyes.jpg" value="3000,2500">
<img id="card2" height="400" width="250" src="./cardImages/blue.jpg" value="1400,1200">
<img id="card3" height="400" width="250" src="./cardImages/orange.jpg" value="1200,700">
<img id="card4" height="400" width="250" src="./cardImages/blackDrag.jpg" value="3200,2500">
<img id="card5" height="400" width="250" src="./cardImages/spider.jpg" value="2500,2100">
<img id="card6" height="400" width="250" src="./cardImages/dark.jpg" value="2500,2100">
<img id="card7" height="400" width="250" src="./cardImages/grill.jpg" value="2000,1700">
<img id="card8" height="400" width="250" src="./cardImages/gaia.jpg" value="2300,2100">
<img id="card9" height="400" width="250" src="./cardImages/redEyes.jpg" value="2400,2000">
<img id="card10" height="400" width="250" src="./cardImages/flamee.jpg" value="1800,1600">
<img id="card11" height="400" width="250" src="./cardImages/curse.jpg" value="2800,2200">
<img id="card12" height="400" width="250" src="./cardImages/tripple.jpg" value="4500,3800">
</div>
</body>
</html>

Your HTML markup was broken. Make sure you refactor it to <img ... value="1200,2500" /> instead of <img ... value=1 200,2500 />, because no Javascript will be able to handle it.
function sorting () {
const imgWrapper = document.getElementById('cardShop')
const deck = [].slice.call(imgWrapper.getElementsByTagName('img'))
deck.sort((currentImage, nextImage) => {
const currentImageValue = parseInt(currentImage.getAttribute('value').split(',')[0])
const nextImageValue = parseInt(nextImage.getAttribute('value').split(',')[0])
return currentImageValue - nextImageValue
})
// at this point the array has been sorted, but not the actual HTML!
console.log(deck)
// optional - if you want to redraw them with the new order in the HTML
const oldImgHTMLCollection = [].slice.call(imgWrapper.getElementsByTagName('img'))
oldImgHTMLCollection.forEach(oldImg => imgWrapper.removeChild(oldImg))
deck.forEach(newImg => imgWrapper.appendChild(newImg))
}
sorting()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="script.js"></script>
<style>
</style>
</head>
<body>
<div id="cardShop" style="overflow:scroll">
<div id="toClose"></div>
<div id="toSort"></div>
<img id="card" height="400" width="250" src="./cardImages/blueEyes.jpg" value="3000,2500">
<img id="card2" height="400" width="250" src="./cardImages/blue.jpg" value="1400,1200">
<img id="card3" height="400" width="250" src="./cardImages/orange.jpg" value="1200,700">
<img id="card4" height="400" width="250" src="./cardImages/blackDrag.jpg" value="3200,2500">
<img id="card5" height="400" width="250" src="./cardImages/spider.jpg" value="2500,2100">
<img id="card6" height="400" width="250" src="./cardImages/dark.jpg" value="2500,2100">
<img id="card7" height="400" width="250" src="./cardImages/grill.jpg" value="2000,1700">
<img id="card8" height="400" width="250" src="./cardImages/gaia.jpg" value="2300,2100">
<img id="card9" height="400" width="250" src="./cardImages/redEyes.jpg" value="2400,2000">
<img id="card10" height="400" width="250" src="./cardImages/flamee.jpg" value="1800,1600">
<img id="card11" height="400" width="250" src="./cardImages/curse.jpg" value="2800,2200">
<img id="card12" height="400" width="250" src="./cardImages/tripple.jpg" value="4500,3800">
</div>
</body>
</html>

How can I take value from star images in evaluation system for courses?

I want to make evaluation page that allow student to evaluate course:
Here jquery code that are used to change the color of the white images to yellow ones
<script type="text/javascript">
var clickedFlag = false;
$(".ratingStar").click(function () {
$(this).attr("src", "/Content/images/yellowstar.gif").prevAll("img.ratingStar").attr("src", "/Content/images/yellowstar.gif").attr("value",1);
});
$(".ratingStar, #radingDiv").mouseout(function () {
$(this).attr("src", "/Content/images/whitestar.gif");
});
$("#ratingDiv").mouseout(function () {
if (!clickedFlag) {
$(".ratingStar").attr("src", "/Content/images/whitestar.gif");
}
});
$(".ratingStar").click(function () {
clickedFlag = true;
$(".ratingStar").unbind("mouseout mouseover").css("cursor", "default");
var url = "/EvaluationQuestion/SendRating?r=" + $(this).attr("data-value") + "&s=5&id=#Model&url=#Url";
});
this is html code the display the images of stars
<div id="ratingDiv" class="smallText">
Poor
<img src="~/Content/images/whitestar.gif" alt="" class="ratingStar" data-value="1" />
<img src="~/Content/images/whitestar.gif" alt="" class="ratingStar" data-value="2" />
<img src="~/Content/images/whitestar.gif" alt="" class="ratingStar" data-value="3" />
<img src="~/Content/images/whitestar.gif" alt="" class="ratingStar" data-value="4" />
<img src="~/Content/images/whitestar.gif" alt="" class="ratingStar" data-value="5" />
Excellent
</div>
I want to receive the data value of these images in the action of this view

Crossfade a 6 images grid randomly, one by one

I've been trying since yesterday to do something a bit tricky (I guess).
I'm trying to do exactly what happens here: https://tympanus.net/Development/AnimatedResponsiveImageGrid/index2.html but this script is 8 years old and can't work with newer jQuery, anyway I wanted to redo it by myself.
What I need (well, what the marketing want me to do):
Having a 6 images grid which randomly crossfade to another image, but one by one. They should never repeat themselves.
So far I've done this, but all the crossfade are made 6 by 6. I want to do it, one by one, in a random order.
HTML
<div class="img-bank">
<img style="display:none" src="https://picsum.photos/210?image=0" />
<img style="display:none" src="https://picsum.photos/210?image=11" />
<img style="display:none" src="https://picsum.photos/210?image=21" />
<img style="display:none" src="https://picsum.photos/210?image=31" />
<img style="display:none" src="https://picsum.photos/210?image=41" />
<img style="display:none" src="https://picsum.photos/210?image=51" />
<img style="display:none" src="https://picsum.photos/210?image=61" />
<img style="display:none" src="https://picsum.photos/210?image=71" />
<img style="display:none" src="https://picsum.photos/210?image=81" />
<img style="display:none" src="https://picsum.photos/210?image=91" />
<img style="display:none" src="https://picsum.photos/210?image=101" />
<img style="display:none" src="https://picsum.photos/210?image=111" />
<img style="display:none" src="https://picsum.photos/210?image=121" />
<img style="display:none" src="https://picsum.photos/210?image=131" />
<img style="display:none" src="https://picsum.photos/210?image=141" />
<img style="display:none" src="https://picsum.photos/210?image=151" />
<img style="display:none" src="https://picsum.photos/210?image=161" />
<img style="display:none" src="https://picsum.photos/210?image=171" />
<img style="display:none" src="https://picsum.photos/210?image=181" />
<img style="display:none" src="https://picsum.photos/210?image=191" />
</div>
<div class="container galery">
<div class="row">
<div class="col-4">
<img class="img-fluid" src="https://placekitten.com/210/210?image=1" />
<img style="display:none;" class="img-fluid" src="" />
</div>
<div class="col-4">
<img class="img-fluid" src="https://placekitten.com/210/210?image=2" />
<img style="display:none;" class="img-fluid" src="" />
</div>
<div class="col-4">
<img class="img-fluid" src="https://placekitten.com/210/210?image=3" />
<img style="display:none;" class="img-fluid" src="" />
</div>
<div class="col-4">
<img class="img-fluid" src="https://placekitten.com/210/210?image=4" />
<img style="display:none;" class="img-fluid" src="" />
</div>
<div class="col-4">
<img class="img-fluid" src="https://placekitten.com/210/210?image=5" />
<img style="display:none;" class="img-fluid" src="" />
</div>
<div class="col-4">
<img class="img-fluid" src="https://placekitten.com/210/210?image=6" />
<img style="display:none;" class="img-fluid" src="" />
</div>
</div>
</div>
JS
$( document ).ready(function() {
var ids = [];
function initArray() {
$(".img-bank img").each(function() {
ids.push($(this).attr("src"));
})
}
function randomArray() {
// copie du tableau d'ids car il va etre modifié
var tempIds = ids.slice();
// init du tableau de resultat
var myIds = [];
for (var i = 0; i < 6; i++) {
// Recupere un int random
var randomId = (Math.floor(Math.random() * tempIds.length) + 1);
// Recupere la valeur random
var myId = tempIds[randomId - 1];
// Ajout de la valeur random au tableau de resultat
myIds.push(myId);
// Recupere l'index de la valeur random pour la suppression
var pos = tempIds.indexOf(myId);
// Suppression de la valeur choisie pour eviter de retomber dessus
tempIds.splice(pos, 1);
}
return myIds;
}
initArray();
function changeSrc() {
var result = randomArray();
$(".galery img:hidden").each(function(index) {
$(this).attr("src", result[index]);
});
$(".galery img").fadeToggle(1500);
}
setInterval(function() {
changeSrc();
}, 2000);
});
LESS
.galery {
margin-top: 30px;
.row > div {
position:relative;
height: 240px;
width: 240px;
img {
position: absolute;
top: 0;
left: 15;
}
}
}
https://jsfiddle.net/N_3G/ju0comn2/
Can someone help me with this please?

You can select a cell col-4 at random, then apply the logic to only the 2x img in that cell.
Without changing too much of your existing code, change to:
var cells = $(".galery .col-4");
var randomId = (Math.floor(Math.random() * cells.length));
var cell = cells.eq(randomId);
cell.find("img:hidden").each(function(index) {
$(this).attr("src", result[index]);
});
cell.find("img").fadeToggle(1500);
Updated fiddle: https://jsfiddle.net/ju0comn2/1/
Due to the nature of Math.random() you will notice it runs the same images in the same order - seed the random. You'll also get the same image replacing with the same image.
For a rudimentary fix for duplicated images, check if any of the visible images have the same src as the new src:
var result = randomArray();
var cells = $(".galery .col-4");
var randomId = (Math.floor(Math.random() * cells.length));
var newsrc = result[0];
if ($(".galery img[src='" + newsrc + "']:visible").length > 0) {
changeSrc();
}
else {
var cell = cells.eq(randomId);
cell.find("img:hidden").each(function(index) {
$(this).attr("src", result[index]);
});
cell.find("img").fadeToggle(1500);
}
This could be handled with a while loop to keep getting randomIds, but as long as you have more images than panels, the recursive call is unlikely to stack overflow.
Updated fiddle: https://jsfiddle.net/ju0comn2/2/

Method for randomly loading paired images

I've created a webpage with many (over 100) paired flash cards with Question (image) flipping to Answer (image) when clicked. If possible I would like to be able to randomise the order in which the question/answer pairs load with each page load/refresh.
<div class="content4Column gap">
<div class="card-container">
<div class="card click" data-direction="left">
<div class="front">
<img src="Intermolecular/Q1.png" width="100%" height="100%" alt="">
</div>
<div class="back">
<img src="Intermolecular/A1.png" width="100%" height="100%" alt="">
</div></div></div></div>

Try
var QAPairs = [];
var QATotal = 200; // total numbers of QA pairs
var QA = 20; //number of QA pairs you want. Set to QATotal to include all QA pairs
while(QAPairs.length != QA){
var rand = Math.floor(Math.random()*QATotal);
if(QAPairs.indexOf(rand) == -1){
QAPairs.push(rand);
// If you want to show them all at a time
document.getElementsByClassName("card click")[0].innerHTML = document.getElementsByClassName("card click")[0].innerHTML + '<div class="front">\
<img src="Intermolecular/Q' + QAPairs[i] + '.png" width="100%" height="100%" alt="" />\
</div>\
<div class="back">\
<img src="Intermolecular/A' + QAPairs[i] + '.png" width="100%" height="100%" alt="" />\
</div>';
}
}
// if you want to show them one at a time
var i = 0;
function updateCard(){
document.getElementsByClassName("card click")[0].innerHTML = '<div class="front">\
<img src="Intermolecular/Q' + QAPairs[i] + '.png" width="100%" height="100%" alt="" />\
</div>\
<div class="back">\
<img src="Intermolecular/A' + QAPairs[i] + '.png" width="100%" height="100%" alt="" />\
</div>';
i++;
}

jQuery How to apply custom loading for images?

I have this HTML:
<div class="page-loading-wrapper">
<div style="width: 168px" class="slide-content">
<div class="loading-panel" style="background-color: #dddddd; height: 120px; position: relative">
<div class="loading-text"><span class="loading-number">0</span>%</div>
<div class="loading-load">LOADING</div>
</div>
<img src="images/shkeer-loading.png" width="168" height="91" alt="" />
</div>
<div class="loading-bottom-line"></div>
</div>
<div id="maximage">
<div>
<img src="images/bg/bg.jpg" width="1580" height="889" alt="" />
</div>
<div>
<img src="images/bg/bg2.jpg" width="1352" height="748" alt="" />
</div>
<div>
<img src="images/bg/bg3.jpg" width="1285" height="803" alt="" />
</div>
<div>
<img src="images/bg/bg4.jpg" width="1290" height="807" alt="" />
</div>
<div>
<img src="images/bg/bg5.jpg" width="1295" height="921" alt="" />
</div>
<div>
<img src="images/bg/bg6.jpg" width="1280" height="750" alt="" />
</div>
<div>
<img src="images/bg/bg7.jpg" width="1280" height="750" alt="" />
</div>
</div>
and this Javascript code:
$('#maximage').maximage({
onImagesLoaded: function() {
$(".page-loading-wrapper").slideUp("slow");
},
cycleOptions: {
fx:'scrollHorz',
autostopCount: 1,
autostop: 1
}
});
and this code for loading:
function changeLoading() {
var height = parseInt($(".loading-panel").height()) + 5;
$(".loading-panel").css("height", height + "px");
if ( height == 325) {
clearInterval(t);
var t2 = setInterval(changeNum, 110);
}
}
function changeNum() {
var n = parseInt($(".loading-number").html()) + 1;
$(".loading-number").html(n);
if ( n == 100) {
clearInterval(t2);
}
}
var t = setInterval(changeLoading, 10);
I'm using MaxCycle (Fullscreen Slideshow for use with jQuery Cycle Plugin)
and I'm trying to display loading bar while loading all images because they're very big about 150kb for each image.
Demo
My loading bar is not fully functional as you can see. it just count until MaxCycle is loaded
onImagesLoaded: function() {
$(".page-loading-wrapper").slideUp("slow");
}
So how I can make this loading works 100% specially the percent number, to check each image is loaded or not?
Thank you very much.

Categories