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?
Related
I am attempting to use JQuery to make 3 thumbnails into buttons that each open up their own page element with details regarding the picture.
Right now I have succeeded in making it so that any thumbnail causes a page element (of the class "description") to scroll open and closed when any thumbnail (from the class "thumbnail") is clicked.
How do I check which thumbnail is clicked on so that I can open a different description corresponding to that specific thumbnail? (This is what I was attempting to do with the "select").
var main = function() {
$('.thumbnail').click(function(select) {
var description = $('.game-descriptions').children('.description');
if( description.is(":hidden")) {
description.slideDown("slow");
}
else
description.hide();
});
}
$(document).ready(main);
Use a data attribute to specify what the thumbnail click is targeting, example: data-target="#game-1", add IDs to your descriptions that match and use data() to use the attribute value of #game-1 a jQuery selector.
Here is a demo
JS
$('.thumbnail').click(function() {
var gameId = $(this).data('target');
$(gameId).slideToggle().siblings(':visible').slideToggle();
});
HTML
<img class="thumbnail" data-target="#game-1" />
<img class="thumbnail" data-target="#game-2" />
<div class="game-descriptions">
<div id="game-1" class="description"></div>
<div id="game-2" class="description"></div>
</div>
Any toggling like toggle(), slideToggle(), fadeToggle() handles the is hidden or is visible
jsFiddle
The parameter to the click function is a jQuery event object, which can be useful in adding some event handling logic. However, within the context of the handler, this refers to the element which triggered the click event, and is typically sufficient for any targeted logic.
Assuming the thumbnails and descriptions have similarly named IDs, for example, you can do something like this:
$(function () {
$('.thumbnail').click(function (event) {
var descId = this.id.replace("thumb", "desc");
var description = $('.game-descriptions').children('#' + descId);
// or simply $("#" + descId);
description.toggle("slow");
});
});
HTML
<div>
<div class="thumbnail" id="thumb-1">Thumb 1</div>
<div class="thumbnail" id="thumb-2">Thumb 2</div>
<div class="thumbnail" id="thumb-3">Thumb 3</div>
</div>
<div class="game-descriptions">
<div class="description" id="desc-1">Description One</div>
<div class="description" id="desc-2">Description Two</div>
<div class="description" id="desc-3">Description Three</div>
</div>
Your technique for targeting the correct 'description' will depend on your actual DOM structure, however.
Also note that I substituted the toggle method for your if statement, as the logic you have is equivalent to what it does (i.e. toggling object visibility).
I have a hidden div with the details of a thumbnail that is visible on the page. When you click on the thumbnail, it should fadein or slideup the div with details.
I have set with jquery incremented ID's to each ".portfolio-item-details" to identify each one and then have set with jquery the same ID's to the href of the thumbnail.
<section id="portfolio1" class="portfolio-item-details hidden">content</section>
<a class="open-portfolio-item-details" href="#portfolio1" title="">
<img src="thumbnail.jpg">
</a>
<section id="portfolio2" class="portfolio-item-details hidden">content</section>
<a class="open-portfolio-item-details" href="#portfolio2" title="">
<img src="thumbnail.jpg">
</a>
Since this is done dynamically, how can I with jquery fadeIn or slideUp the ".portfolio-item-details" if the href is equal to the ID. Basically thumbnail with "#portfolio1" should slide up the div with "#portfolio1" on click.
This is my jquery code which to add the IDs and HREF is working perfectly but not working to slideUp or fadeIn the div with the same ID.
$(document).ready(function () {
var i=0;
$(".portfolio-item-details").each(function(){
i++;
var newID="portfolio"+i;
$(this).attr("id",newID);
$(this).val(i);
});
var i=0;
$(".open-portfolio-item-details").each(function(){
i++;
var newReadMoreHREF="#portfolio"+i;
$(this).attr("href",newReadMoreHREF);
$(this).val(i);
if ($(".portfolio-item-details").attr("id") == "newReadMoreHREF") {
$(this).fadeIn();
}
});
});
SOLUTION
Thanks to Austin's code, I was able to modify it to work with mine.
Check here: http://jsfiddle.net/jdoimeadios23/xpsrLyLz/
You want something like this?
HTML
<div class="image" value="1">
<img src="thumbnail.jpg" />
</div>
<div id="portfolio1" class="details">details</div>
<div class="image" value="2">
<img src="thumbnail.jpg" />
</div>
<div id="portfolio2" class="details">more details</div>
JS
$(document).ready(function () {
$('.details').fadeOut(1);
$(".image").click(function () {
var num = $(this).attr("value");
$("#portfolio"+num).fadeIn(1000);
});
});
JSFiddle Demo
You don't even need to bother with ID's so long as the next div below each image is it's details.
The problem is in this block
if ($(".portfolio-item-details").attr("id") == "newReadMoreHREF") {
$(this).fadeIn();
}
Because you're having two errors, the first one is that newReadMoreHREF is a variable, not a string in your HTML or a value to any variable and so on.
Second thing is, that in the variable declaration you're using "#portfolio"+i;, which would be good if you were about to select an element. But using it in the jQuery iif statement with .attr('id') will again cause a havoc.
The thing that you need is something like this
$(".open-portfolio-item-details").each(function(){
i++;
var newReadMoreHREF="portfolio"+i; // removed #
$(this).attr("href",newReadMoreHREF);
$(this).val(i);
if ($(".portfolio-item-details a").attr("id") == newReadMoreHREF) {
// you need to access the hyperlink in the element, not
// the element itself. this portfolio1 ID is of a hyperlink
// again here, this is referencing the main iterator.
$(this).fadeIn();
// are you sure you want to fade the .open-portfolio-item-details?
}
});
Removed the hash sign and then called the variable value to check against. It would execute to be true if the condition is true.
Try this:
HTML:
content
<section id="portfolio2" class="portfolio-item-details hidden">content</section>
<a class="open-portfolio-item-details" href="#portfolio2" title="">
<img src="thumbnail.jpg">
</a>
<div id="portfolio1" class="portfolio" hidden>Portfolio 1</div>
<div id="portfolio2" class="portfolio" hidden>Portfolio 2</div>
Jquery:
$('a.open-portfolio-item-details').on('click', function (e) {
e.preventDefault();
var id = $(this).attr('href');
$('.portfolio').hide();
$('.portfolio' + id).fadeIn();
});
Couldn't get the fiddle link for some reason.
Edit:
I don't know the name of the class that shows the content you want displayed, so as an example I'm using portfolio. Try putting this code into a fiddle
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');
}
});
Okay, this is a really long post. I have a multiple DOM tree structure that I need to traverse through in order to insert an image. For the record, the image passes into PARAM fine. What I don't understand is why it's not posting. So, here is the code I am currently using.
function validateImage(event) {
var $input = $(this);
var width = 75;
var height = $input.closest('.logo-block').length > 0 ? 35: 75;
$input.animate({
'backgroundColor': '#999'
},
250);
$.get('/meta/thumbnail/' + $input.val() + '/' + height + '/' + width + '/',
function(result) {
$input.stop();
if (result != 'No Image Available') {
$input.css('background-color', '#55FF00');
var $block = $input.closest('div.thumb-image');
if ($block.closest('.center-callout-info').length > 0) {
// in center column, add image.
$input.val('');
$('<div class="thumb">' + result + '</div>').appendTo($block.closest('.image-container').not($block.closest('.more-images .image-container'))).find('img').addClass('selected');
$('.center-callout-info .block img.meta-thumb').click(bindImageSelection);
}
} else {
$input.css('background-color', '#FF0000');
$input.val('');
}
$input.animate({
backgroundColor: '#FCFCFD'
},
2000);
});
}
The HTML is as follows:
<fieldset class="collapsible collapsed">
<legend class="collapse">Image Management</legend>
<div class="fieldset-wrapper"><input type="button" value="Save Images" id="saveForm" class="submitButton" name="save" />
<div class="center-callout-info">
<div class="callout-images">
<div class="high-res block active-tab" id="46051">
<div class = "image-container">
<div class="thumb-image thumb selected" id="AVE_BOX_TOPS_EDUCATION_4C">
<img class="meta-thumb" height="" src="/thumbs/AVE_Box_Tops_Education_4C.png" title="AVE_BOX_TOPS_EDUCATION_4C" /></div>
<div class="thumb-image thumb selected" id="FEL_BANKERS_BOX_BLK">
<img class="meta-thumb" height="" src="/thumbs/FEL_BANKERS_BOX_BLK.png" title="FEL_BANKERS_BOX_BLK" /></div>
<div class="thumb-image thumb selected" id="FEL_BB_FOLDER_RAILS_BLK">
<img class="meta-thumb" height="" src="/thumbs/FEL_BB_Folder_Rails_BLK.png" title="FEL_BB_FOLDER_RAILS_BLK" /></div>
<div class="thumb-image thumb selected" id="FEL_SFI_BLK">
<img class="meta-thumb" height="" src="No Image Available" title="FEL_SFI_BLK" /></div>
<form action="/node/46051/edit" accept-charset="UTF-8" method="post" id="skuimage-get-more-form">
<div><div class="form-item" id="edit-new-high-res-wrapper">
<label for="edit-new-high-res">New: </label>
<input type="text" maxlength="128" name="new_high_res" id="edit-new-high-res" size="15" value="AVE_AVERY_BLK" class="form-text new-button" />
</div>
<input type="hidden" name="form_build_id" id="form-de9c77d3f4d32257a52dc609e6697769" value="form-de9c77d3f4d32257a52dc609e6697769" />
<input type="hidden" name="form_token" id="edit-skuimage-get-more-form-form-token" value="f7bb86ba8678fa2fb5b911f1df819bec" />
<input type="hidden" name="form_id" id="edit-skuimage-get-more-form" value="skuimage_get_more_form" />
</div></form>
</div></div></div></div></div></fieldset>
Now, I would like the <IMG> to appear with the other <IMG>'s, which are located inside of the div with class image-container.
I think I have everything in the message here. Any help would be great.
EDIT EDIT EDIT EDIT EDIT EDIT
Here is the answer:
Alright, here is what the answer was. Above you will see the following line of code:
var $block = $input.closest('div.thumb-image');
However, after traversing up the DOM Tree, I found out that I needed to set this to be the actual place I wanted to PUT the image. So, var $block actually is the following:
var $block = $input.closest('.image-container');
After that, I had to change the place where it put the image as well.
$('<div class="thumb">' + result + '</div>').appendTo($block).find('img').addClass('selected');
I am not very clear about your post. But if have understood a bit, it is about sending image and getting a response from the backend of the application.
I am sorry if I got it wrong, but if I am right. Then here is my answer --
You cannot upload file using ajax. That is you cannot send files in functions like $.ajax(), $.get(), $.post(), etc. as data.
6 years later, I'll answer my own question. LOL
Alright, here is what the answer was. Above you will see the following line of code:
var $block = $input.closest('div.thumb-image');
However, after traversing up the DOM Tree, I found out that I needed to set this to be the actual place I wanted to PUT the image. So, var $block actually is the following:
var $block = $input.closest('.image-container');
After that, I had to change the place where it put the image as well.
$('<div class="thumb">' + result + '</div>').appendTo($block).find('img').addClass('selected');
lets say i have this lump of HTML:
<div class="container">
<span class="title">Heading 1</span>
This is a description..<br />
This is the second line..
<div class="image"><img src="image.jpg" /></div>
</div>
What i want to do using jQuery/JavaScript is hide/remove all text and elements between <span class="title"> and <div class="image">.
I've looked all over and found pretty much nothing. Any ideas on how i could do this?
How about something like this? http://jsfiddle.net/ZW8q2/1
var foo = $('.container').children(':not(br)');
$('.container').html('').html(foo);
You could try:
var str = $('.container .title').text() + $('.container .image').html();
$('.container').html(str);
JS Fiddle.
Try this:
Place a tag around what you want to hide, give div an ID name. So in the end your will look like:
<div id = "hideMe" style ="display:block">...Your Content...</div>
Use this javascript:
function hide()
{
document.getElementById('hideMe').style.display = "none";
return;
}
Have the Javascript function called whenever you want to hide the stuff between the div from a button (or other control) like this:
<input type= "submit" onclick ="hide()">