We Keep Coding

Numbered images selector

Good day!
First of all, I don't what is the right name or title for my question but that's what I think what I needed.
how can I make an image selector with numbered function like the image below? I am using html and jquery to select images but I don't know how to put and ordered numbers when selecting an images. My codes are like...
HTML:
<div class="photoList">
<label class="singlePhotoWrap relative">
<img src="images/previewDefaultImg.png" class="photo" alt="Image">
<img src="images/numberedIco.png" class="absolute numberedIcon" alt="Check Icon">
<span class="photoCounter">1</span>
<input type="checkbox" name="photoSelector" class="hidden" autocomplete="off">
</label>
...
Javascript:
$(document).ready(function(e){
$(".singlePhotoWrap").click(function() {
var current = document.getElementById("photoSelectedCounter").value;
if ($(this).find('input[name=photoSelector]:checked')){
var totalAdd = parseFloat(current) + .5;
$('#photoSelectedCounter').val(totalAdd);
$(this).find(".photoCounter").text(totalAdd);
}
if ($(this).find('input[name=photoSelector]:unchecked')) {
var totalAdd = parseFloat(current) - .5;
$('#photoSelectedCounter').val(totalAdd);
$(this).find(".photoCounter").text(totalAdd);
}
});
});
My javascript codes always returning as checked. It always adding to my span.
Here's the screenshot:
Numbered Image Selector Screenshot
How can I do that using javascript or jquery?

change image inside a div -- image ID array

How to change the image on the div when input image is clicked.
I tried this but nothing is working .. ?
control is not even entering the the if/else portion of each() loop.
My div is having a ID do i need ID for each image inside every div to change the image or ID of DIV is more than enough to change the image inside the div ?
javascript & Jquery code :--
var div_class_scrollable_Image = [
"Groung-Floor-Image" , "Floor-1-Image", "Floor-2-Image", "Floor-3-Image"
];
function show_area( parameter_image_array, parameter_image)
{
// set img src
// $("." + parameter_image_array[2]).attr('src', 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRXWRtwgI9heLVdQJhRcozi2XV3q5m2RTZwdrTuRGTcFfM708xyBQ');
//$('.Floor-3 img').attr('src', 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRXWRtwgI9heLVdQJhRcozi2XV3q5m2RTZwdrTuRGTcFfM708xyBQ');
$(parameter_image_array).each(function(index, element) {
if(element != parameter_image )
{
$(element).attr('src', 'http://ipadwisdom.com/wp-content/uploads/2014/02/NestThermostatAppIcon.png');
}
else
{
$(element).attr('src', 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRXWRtwgI9heLVdQJhRcozi2XV3q5m2RTZwdrTuRGTcFfM708xyBQ');
}
//alert("hellooooo");
});
}
Html code :---
<div id="images" class="scrollable">
<div id="Groung-Floor" class="input">
<input id="Groung-Floor-Image" type="image" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRXWRtwgI9heLVdQJhRcozi2XV3q5m2RTZwdrTuRGTcFfM708xyBQ" onclick="show_area( 'div_class_scrollable_Image', 'Groung-Floor-Image' )" />
<p >Groung-Floor</p>
<hr>
</div>
<div id="Floor-1" class="input">
<input id="Floor-1-Image" type="image" src="http://ipadwisdom.com/wp-content/uploads/2014/02/NestThermostatAppIcon.png" onclick="show_area('div_class_scrollable_Image', 'Floor-1-Image')" />
<p >1-Floor</p>
<hr>
</div>
<div id="Floor-2" class="input">
<input id="Floor-2-Image" type="image" src="http://ipadwisdom.com/wp-content/uploads/2014/02/NestThermostatAppIcon.png" onclick="show_area( 'div_class_scrollable_Image', 'Floor-2-Image')" />
<p >2-Floor</p>
<hr>
</div>
<div id="Floor-3" class="input">
<input id="Floor-3-Image" type="image" src="http://ipadwisdom.com/wp-content/uploads/2014/02/NestThermostatAppIcon.png" onclick="show_area( 'div_class_scrollable_Image', 'Floor-2-Image', )" />
<p >3-Floor</p>
<hr>
</div>
</div>
Please suggest

You also may use background-image:url("/path/image") for Div and later change it like document.getElementById(DivId).style.backgroundImage = "/path/new_image"
See to http://www.w3schools.com/css/css_background.asp

I'm sorry but your code is almost unreadable and... ugly ;-) I'll give you this code as an hint to improve yours:
HTML
<div>
<input type="image" src="foo.jpg" data-alt-src="bar.jpg" class="swap" />
</div>
JavaScript
$(".swap").click(function () {
$(".swap").each(function () {
var alt = $(this).data("alt-src");
$(this).attr("src", alt);
});
//do other work if needed...
});
As you can see I use the data- attribute to set an alternate image directly in the HTML tag, then I read it on click event and I replace the current src with the alternate image.

Thanks batu Zet or correcting array issue.
this link answered my question ...
Programmatically change the src of an img tag
This worked :--
$(parameter_image_array[2]).attr('src', 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRXWRtwgI9heLVdQJhRcozi2XV3q5m2RTZwdrTuRGTcFfM708xyBQ');
This also worked :---
$(parameter_image_array).each(function(index, element) {
if(element != parameter_image )
{
$("#" +element).attr('src', 'http://ipadwisdom.com/wp-content/uploads/2014/02/NestThermostatAppIcon.png');
}
else
{
$("#" + element).attr('src', 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRXWRtwgI9heLVdQJhRcozi2XV3q5m2RTZwdrTuRGTcFfM708xyBQ');
}
});

Using .next() and .replace() to view images that share similar classes

UPDATE: Here's a jsFiddle, so maybe you can see what I'm trying to accomplish here. I don't think I'm great at explaining myself. http://jsfiddle.net/dh4qx/
I have images in a slideshow I want to be able to view one-by-one using a next or previous button. I can't for the life of me figure out why this function isn't working, or how to make one that does work.
Here's the JS function I'm trying to call when div.next is clicked:
function resNextClick(){
var m = $('#slideshow2 img:visible').attr('class').replace(/\d+/, "");
var $curr = $('#slideshow2 img:visible');
var $next = $curr.next('img.' + m + '/\d+/');
$curr.fadeOut(200);
$next.fadeIn(200);
};
I'm trying to fade the visible image out, and bring up the next image which shares the same class minus the digit. Hope that makes sense.
Here's the HTML:
<div id="slideshow2">
<img class="oc1" src="/Users/justin/Desktop/res-links/oconner1.jpg" />
<img class="oc2" src="/Users/justin/Desktop/res-links/oconner2.jpg" />
<img class="oc3" src="/Users/justin/Desktop/res-links/oconner3.jpg" />
<img class="oc4" src="/Users/justin/Desktop/res-links/oconner4.jpg" />
<img class="el1" src="/Users/justin/Desktop/res-links/salinas1.jpg" />
<img class="el2" src="/Users/justin/Desktop/res-links/salinas2.jpg" />
<img class="el3" src="/Users/justin/Desktop/res-links/salinas3.jpg" />
<img class="el4" src="/Users/justin/Desktop/res-links/salinas4.jpg" />
<img class="el5" src="/Users/justin/Desktop/res-links/salinas5.jpg" />
<img class="el6" src="/Users/justin/Desktop/res-links/salinas6.jpg" />
<img class="el7" src="/Users/justin/Desktop/res-links/salinas7.jpg" />
<img class="el8" src="/Users/justin/Desktop/res-links/salinas8.jpg" />
<img class="ng1" src="/Users/justin/Desktop/res-links/nguyen1.jpg" />
<img class="ng2" src="/Users/justin/Desktop/res-links/nguyen2.jpg" />
<img class="ng3" src="/Users/justin/Desktop/res-links/nguyen3.jpg" />
<div class="img-close">x</div>
<div class="next">next</div>
<div class="prev">prev</div>
</div>
<div class="oc hide">
<div class="desc">
<h3>project: O'CONNER RESIDENCE</h3><br>
<h3>civil engineer: BAI</h3><br>
<h3>project location: CARMEL VALLEY, CALIFORNIA</h3><br>
<h3>dates of my involvement: 06/2006-01/2007</h3><br>
<h3>software: AUTODESK AUTOCAD 2007</h3><br>
<p>This project is typical of the residential projects that I was involved with at BAI. The client was architect IDG of Pacific Grove and BAI provided civil engineering services and project permitting. As drafter and designer, I designed the grading, drainage, erosion control, retaining walls, and underground utilities. The lead engineer approved my design and I then executed about half the drafting, with the balance drawn by others to my redmarks. Following submittal and initial plan check, I also wrote responses to comments from Monterey County Planning, the local fire protection and watershed management districts, the California Department of Water Resources, and the California Coastal Commission.</p><br>
<p>The civil planset as reproduced here was drawn in 09/2006 and submitted for permit in 01/2007.</p>
</div>
<div class="images">
<a href="#">
<div class="back">
BACK
</div>
</a>
<table>
<tr>
<td><img class="oc1" src="/Users/justin/Desktop/res-links/oconner1.jpg" /></td>
<td><img class="oc2" src="/Users/justin/Desktop/res-links/oconner2.jpg" /></td>
<td><img class="oc3" src="/Users/justin/Desktop/res-links/oconner3.jpg" /></td>
<td><img class="oc4" src="/Users/justin/Desktop/res-links/oconner4.jpg" /></td>
</tr>
</table>
</div>
As always, I appreciate all help and feedback.

You are passing RegEx to selector. That is not valid to do!
Try this:
function resNextClick(){
var m = $('#slideshow2 img:visible').attr('class').replace(/\d+/, "");
var $curr = $('#slideshow2 img:visible');
var $next = $curr.next('img[class^="' + m + '"]');
$curr.fadeOut(200);
$next.fadeIn(200);
};

You are doing it wrong, you should use a class for each group of related pictures
<div id="slideshow2">
<img class="oc" src="/Users/justin/Desktop/res-links/oconner1.jpg" />
<img class="oc" src="/Users/justin/Desktop/res-links/oconner2.jpg" />
<img class="oc" src="/Users/justin/Desktop/res-links/oconner3.jpg" />
<img class="oc" src="/Users/justin/Desktop/res-links/oconner4.jpg" />
<img class="el" src="/Users/justin/Desktop/res-links/salinas1.jpg" />
<img class="el" src="/Users/justin/Desktop/res-links/salinas2.jpg" />
<img class="ng" src="/Users/justin/Desktop/res-links/nguyen1.jpg" />
<img class="ng" src="/Users/justin/Desktop/res-links/nguyen2.jpg" />
</div>
And then something like this
function resNextClick(){
var $curr = $('#slideshow2 img:visible'),
cls = $curr.attr('class');
var $next = $curr.next();
// Toggle if next is the same class as this one
if ($next.attr('class') === cls) {
$curr.fadeOut(200);
$next.fadeIn(200);
}
}

You'll need to do an "attribute starts selector"
$curr.next($('*[class^="' + cls.trim() + '"]'))
That should give you the next item that has the same class prefix. I also trimmed the class string due to the extra space.
If the length of the final selector is zero, then you're at the end and should just get the first.

I made simple version of your slideshow (used code form ikaros45 answer as well)
You should be able to use it in your code and I hope it will help you.
Btw I am not sure is it correct way of doing it :)
HTML
<div class="img">
<div class="ox0">1</div>
<div class="ox1">2</div>
<div class="ox2">3</div>
<div class="ox3">4</div>
</div>
jQuery
$(".img div").click(function(){
var selected_img = $(this).attr( "class" ); //get class of clicked element
var group = selected_img.substring(0, selected_img.length - 1);
var set_img = $("#slideshow ."+group);
selected_img = selected_img.substring(2);
var showed = $('#slideshow img:visible');
showed.hide();
$(set_img[selected_img]).show();
$("#slideshow").slideDown();
/*
* for example you clicked on "ox1",
* var group - getting just text part of the class "ox"
* var selected_img - getting just number from class"1"
* var set_img - getting all elements in #slideshow with class "ox"
* $(set_img[selected_img]) - points which big img to open (ox[1])
*/
});
$("#img-next").click(function(){
var curr = $('#slideshow img:visible');
var cls = curr.attr("class")
var next = curr.next();
if (next.attr('class') === cls) {
curr.fadeOut(200);
next.fadeIn(200);
}
else{
var first_img = $("#slideshow ."+cls);
curr.fadeOut(200);
$(first_img[0]).fadeIn();
/*
* getting all elements with same class,
* and showing first
*/
}
});
http://jsfiddle.net/dh4qx/6/

Using the .map function to create an array of image alt text inside a specific div?

I have a page I'm using to grab image alt text from a slider. Each image has a different alt text, and I'm trying to pull it into an array and then loop through it to display it.
However when I implement it, it only adds one object to the array as opposed to how ever many it may ACTUALLY have inside the div.
$(document).ready(function () {
var tn_array = $("#rightSlider img").map(function () {
return $(this).attr("alt");
});
for (var i = 0; i < tn_array.length; i++) {
alert(tn_array[i]);
$('#links').append('<a href="#" title="' + tn_array[i] + '" >' + tn_array[i] + '</a><br />');
}
});
Here is the main page that the code grabs the alt text from:
<div id="rightSlider">
<div>
<img src="images/adptvtch_s1_1.jpg" alt="Hearing Aid On A Female's Ear" width="330" height="215" />
</div>
<div>
<img src="images/adptvtch_s1_2.jpg" alt="Hands Reading Braille Book" width="330" height="215" />
</div>
<div>
<img src="images/adptvtch_s1_3.jpg" alt="Man In Wheelchair Reading" width="330" height="215" />
</div>
</div>
I've tried other things such as .each and I can't seem to pinpoint why it's only adding the first alt text and not the other ones. If you guys can help me figure it out, I'd be greatly appreciative.

You don't need additional iteration and an unnecessary array manipulation.
Try this,
var xEle = $('#links');
$("#rightSlider img").each(function() {
xEle.append('<a href="#" title="'+ $(this).attr("alt") +'" >'+ $(this).attr("alt") +'</a><br />');
});
DEMO

Toggling the background image of div on click using Javascript

Hi there I am trying to use Javascript to toggle the background image of a div when clicked
This is what I have done to try and achieve this:
My code is as follows
HTML:
<div id="AccordionContainer" class="AccordionContainer">
<div onclick="runAccordion(1);">
<div class="AccordionTitle" id="Accordion1Title" onselectstart="return false;" onclick="changeArrow(1);" >
Instructions
</div>
</div>
<div id="Accordion1Content" class="AccordionContent">
<p>Enter in your search parameters by clicking on the title of... </p>
</div>
<div onclick="runAccordion(2);">
<div class="AccordionTitle" id="Accordion2Title" onselectstart="return false;" onclick="changeArrow(2);" >
Colour
</div>
</div>
<div id="Accordion2Content" class="AccordionContent">
[wpv-control field="cultivar-category" type="checkboxes" values="Dark Red" url_param="cultivar-category"]
</div>
</div>
</div>
Javascript:
function changeArrow(index)
{
var arrowID = "Accordian" + index + "Title";
document.getElementById(arrowID).style.background="url(./img/accordian-title-up.png) no-repeat scroll 0 0 transparent";
}
However nothing happens when I click on a div that contains onclick="runAccordion(index);"
What am I missing here?

runAccordion is maybe overriding or blocking changeArrow, depending on the structure of your HTML. Try combining them in the same onclick listener (runAccordion(1);changeArrow(1);) and see what happens there.
Also, if you've fixed this, check your image path.
EDIT
You have a typo:
var arrowID = "Accordian" + index + "Title";
should be:
var arrowID = "Accordion" + index + "Title";