Changing image on click of text - javascript

I'm having some problems getting a different image to display on click of some text. I have a red button which on click of the text should change to a green button, but the way I have it set up it doesn't work. Any help would be appreciated. Below is my code:
<script>
$(document).ready(function() {
$(".note").click(function(){
// get the search values
var id = $(this).attr('id')
var id_array = id.split('_')
var note_num = id_array[1]
if($(this).hasClass('hide'))
{
$(this).removeClass('hide').addClass('show')
$("#note_details_"+note_num).slideDown()
if($(this).hasClass('new_note')){
$(this).removeClass('new_note')
$("#note_indicator_"+note_num).this.src='images/buttons/green_icon.png';
}
}
else
{
$(this).removeClass('show').addClass('hide')
$("#note_details_"+note_num).slideUp()
}
})
});
</script>
This is in my page
<?
if(!empty($notes)):
foreach($notes as $note):
?>
<div id="hdr_active">
<input type="checkbox"/></label>
<div style='display:inline-block;' id='note_<?=$note->note_id?>' class="note new_note hide"><span id='note_indicator_<?=$note->note_id?>'><img src="images/buttons/red_icon.png" class="note_indicator" width="6" height="6" /></span><?=$note->title?></div>
<div id='note_details_<?=$note->note_id?>' class="details" style="display: none">
<p><?=$note->details?></p>
</div>
</div>
<?
endforeach;
endif;
?>

Replace:
<div style='display:inline-block;' id='note_<?=$note->note_id?>' class="note new_note hide"><span id='note_indicator_<?=$note->note_id?>'><img src="images/buttons/red_icon.png" class="note_indicator" width="6" height="6" /></span><?=$note->title?></div>
by:
<div style='display:inline-block;' id='note_<?=$note->note_id?>' class="note new_note hide"><img src="images/buttons/red_icon.png" id='note_indicator_<?=$note->note_id?>' width="6" height="6" /
<?=$note->title?>
</div>
then replace in your jquery:
$("#note_indicator_"+note_num).this.src='images/buttons/green_icon.png';
by:
$(".note_indicator").attr("src","images/buttons/green_icon.png");
I think this is what you want to do.

Here is your code, you are mistaking ids, also the split element you need is the second.
jsfiddle.net/RLJFL/4/
I can't make a comment but your solutions wont work. Because this code
var id_array = id.split('_')
var note_num = id_array[1]
id_array[1] - will get indecator, you must change it to id_array[2] in order to get the proper note_num

Related

How to make image give her name to text field then edit the name and save it? Plus delete button should remove picture

This one is very tricky and I cant imagine how to solve it... Request was "Double click on picture, then you get picture name in to text field. There you can change name and save it with button. Also there's another button which clicked you delete the picture."
At this moment I dont have much, it's just a guess what it should look like..
function rodytiViduryje(pav){
var paveikslas=document.getElementById("jap");
paveikslas.src=pav.src;
var aprasymas=document.getElementById("apr");
aprasymas.value=pav.title;
lastph=pav;
}
function keistiAprasyma(){
var NA=document.getElementById("apr");
lastph.title=NA.value;
}
function trintiPaveiskla(){
lastph.remove();
}
<div class="ketvirtas">
<!-- THIS PICTURE -->
<img id="jap" src="https://media.cntraveler.com/photos/60596b398f4452dac88c59f8/16:9/w_3999,h_2249,c_limit/MtFuji-GettyImages-959111140.jpg" alt=japonija class="b" style="width:780px;height:480px">
</div>
<div class="penktas">
<div class="aprasymas"> <!-- Buttons-->
<label for="tekstas">
<b>Paveikslo aprasymas</b>
</label><br/>
<input type="text" id="apr" />
<button id="saugoti" onclick="keistiAprasyma()">Išsaugoti aprašymą</button><br/>
<br>
<button onclick="trintiPaveiksla()">Trinti iš galerijos</button><br/>
</div>
</div>
Please share your ideas! :)
JS could be something like this (also made small changes to HTML):
document.addEventListener("DOMContentLoaded", function(event) {
let img = document.querySelector('#jap');
let descriptionInput = document.querySelector('#apr');
let saveButton = document.querySelector('#saugoti');
let deleteButton = document.querySelector('#trinti');
img.addEventListener('dblclick', function (e){
console.log
descriptionInput.value = this.alt;
});
saveButton.addEventListener('click', function(){
img.alt = descriptionInput.value;
});
deleteButton.addEventListener('click', function(){
img.remove();
});
});
<div class="ketvirtas">
<!-- THIS PICTURE -->
<img id="jap" src="https://media.cntraveler.com/photos/60596b398f4452dac88c59f8/16:9/w_3999,h_2249,c_limit/MtFuji-GettyImages-959111140.jpg" alt="japonija" class="b" style="width:780px;height:480px" />
</div>
<div class="penktas">
<div class="aprasymas"> <!-- Buttons-->
<label for="tekstas">
<b>Paveikslo aprasymas</b>
</label><br/>
<input type="text" id="apr" />
<button id="saugoti">Išsaugoti aprašymą</button><br/>
<br>
<button id="trinti">Trinti iš galerijos</button><br/>
</div>
</div>
My advice for future endeavours: scale your tasks to smaller ones. This will give you more valid results. Also you'll be able to learn while combining those multiple solutions to the one you need. I.e., your searches for this task could be:
Javascript double click event
Javascript get images' alt value
Javascript set images' alt value
Javascript remove DOM element

subimage shows when mainimage is clicked

i want to make a toggle image like when i clicked the image the sub image will show up something like that... this is the image that has a toggle function..
<?php
include('../includes/inc.php');
$user_id =json_decode($user->user_id);
$albumname='';
$album = $carousel->get_album($user_id);
foreach ($album as $key => $myalbum) {
$albumname = $myalbum['album_name'];
?>
<div class="portfolio-image">
<div class="img-thumbnail img-responsive" style="display: inline-block;vertical-align: top;">
<img src="../assets/img/gallery/event-image3.jpg" style="display: block;margin: 0 auto; height:150px;width:200px;" data-id="<?php echo $myalbum['album_name']?>">
<p style="text-align: center;"><strong><?php echo $myalbum['album_name'];?></strong></p>
</div>
<p></p>
</div>
<?php
}
?>
this is where my function goes..
<script type="text/javascript">
$(document).on('click', 'img[data-id]', function () {
var selected = $(this).attr('data-id');
$ss = $('[data-id="' + selected +'"]').next('.picforalbum').toggle();
});
</script>
this is where the sub image will show up. once that i clicked the image..
<div class="col-md-12 picforalbum">
<?php
include('../includes/inc.php');
$user_id =json_decode($user->user_id);
$album = $carousel->get_photoINalbum($albumname,$user_id);
foreach ($album as $key => $pic) {
?>
<div class="portfolio-image">
<div class="img-thumbnail img-responsive" style="display: inline-block;vertical-align: top;">
<img src="<?php echo $pic['photo'];?>" style="display: block;margin: 0 auto; height:150px;width:200px;" >
</div>
<p></p>
</div>
<?php
}
?>
</div>
but the problem is when i tried to click the toggle image nothing happens...
Assuming that you want a toggle function for your image, I went ahead and built a simple JSfiddle. (As the picture takes a bit of time to load based on your net connection, please wait for a few seconds after clicking the image.)
What you need to do is basically call a function through onclick() on your image which changes the src attribute of your img tag. Thus if you maintain a boolean variable, you can easily alternate between true and false to change your image. So for true you'd have link1 and for false you'd have link2.
EDIT : Since you said that the image should act as a toggle for "sub" images, I have edited the code wherein an image acts as a toggle for another image beside it. Check out the updated fiddle and code snippet below.
Here is a simple example.
var toggle = false;
function toggle_img() {
if (toggle) {
document.getElementById("toggle_image").style.opacity = 0;
toggle = false;
} else {
document.getElementById("toggle_image").style.opacity = 1;
toggle = true;
}
}
<img id="toggle" src="https://s19.postimg.org/an381cz4j/470766057_3f1e9a3933_b.jpg" alt="jungle" width="75vw" height="50vw" onclick="toggle_img()" />
<img id="toggle_image" src="https://s19.postimg.org/klo6nu8k3/sumatrantiger-002.jpg" alt="tiger" width="75vw" height="50vw" onclick="toggle_img()" style="opacity:0"/>

How to dynamically swap images without reloading the page

I want to create a scroll horizontal for my product page, I have done it in the past, so i have an idea on how to proceed, but this time I want the image clicked to be a bigger size for example 600x600 while all the other images on the bottom of that one with the size 100x100. Have an arrow left right on the side of the big image, and if the arrow is pressed left/right swap that big picture with the previous/next one from the ones in the small size 100x100. Those images are set using php as they are in the server, this is the part that im finding hard aswell I dont know how I would use javascript to alter the images from the php file.
PHP code to get the images
$imgSet = "<img src='../ProductImages/$pID.jpg' class='image' onclick='openNav()'>";
$imgZoom = "<img src='../ProductImages/$pID.jpg' width='600px' height='600px'>";
$pInfo = "nothing for now";
$pDetails = $row['PROD_DETAILS'];
$sql = ("SELECT * FROM CHILD_IMG WHERE PROD_ID = '$pID';");
$getQuery = $connection->query($sql);
while($row = $getQuery->fetch_array()){
$childID = $row['ID'];
$parentID = $row['PROD_ID'];
$childName = $parentID . "_".$childID.".jpg";
$childImg .= "<img src='../ProductImages
/ChildImages/$childName' class='imgBotSize' onclick='openNav()'>";
Child images all the ones on the bottom of the big image
}
Javascript
function openNav() {
document.getElementById("flow").style.height = "100%";
}
function closeNav() {
document.getElementById("flow").style.height = "0%";
}
HTML
<div id="flow" class="overlayImgContainer">
<a class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-img-content">
<a><?php echo $imgZoom;?></a>
<div class="imgSlideGroup">
<a><?php echo $childImg;?></a>
</div>
</div>
<div class="arrowBtn" style="right: 40px">
<img src="../arrow-right-white.png" width="70px" height="120px">
</div>
<div class="arrowBtn" style="left: 40px">
<img src="../arrow-left-white.png" width="70px" height="120px">
</div>
</div>
If you have HTML like below
<div class="leftArrow"></div>
<div>
<img src="../smaller.jpg" class="selectedImage">
</div>
<div class="rightArrow"></div>
And in JS you can select the clicked image and reset the url to bigger image and change the style of the image as below.
var selectedImage = document.querySelector('.selectedImage');
selectedImage.onclick = function(){
selectedImage.src = '../bigger/jpg';
selectedImage.style.height = '400px';
selectedImage.style.width = '300px';
}
Hope this sample code will give some hint

Why is jQuery(document).ready not working? / How do I add CSS to an element in jQuery?

I'm new to jQuery and I'm having problem with a piece of code.
I'm trying to add Image Power Zoomer v1.2 to my website, which works on the main image, but not the rollover image! The rollover image changes, but power zoomer only shows the loading image.
This is an example URL: Example1
This is my code:
<script type="text/javascript">
var bufferImage = new Array();
function Buffer(filename) {
var i = bufferImage.length;
bufferImage[i] = new Image();
bufferImage[i].src = filename;
}
function showImage(filename) {
document.images[Image_Name].src = filename;
}
Image_Name = "image_pal";
Buffer("thumbnail.php?pic=<? echo $image_pal['media_url'];? >&w=600&sq=Y");
jQuery(document).ready(function($){ //fire on DOM ready
$('#myimage').addpowerzoom({
powerrange: [2,8],
largeimage: null,
magnifiersize: [200,200] //<--no comma following last option!
})
})
</script>
<? $sql_image_pal=$db->query("SELECT media_url FROM " . DB_PREFIX . "auction_media WHERE auction_id='" . $item_details['auction_id']."'AND media_type=1 ORDER BY media_id ASC ");
$image_pal=$db->fetch_array($sql_image_pal);
$sql_image=$db->query("SELECT media_url FROM " . DB_PREFIX . "auction_media WHERE auction_id='" . $item_details['auction_id']."'AND media_type=1 ORDER BY media_id ASC ");?>
<div align="center" class="image_pal">
<? if (empty($image_pal['media_url'])) {?>
<img src="themes/<?=$setts['default_theme'];?>/img/system/noimg.gif" name="image_pal" width="600" />
<? } else {?>
<img id="myimage" src="thumbnail.php?pic=<?=$image_pal['media_url'];?>&w=600&sq=N" border="0" alt="<?=$item_details['name'];?>" name="image_pal" />
<? }?>
</div>
<div class="list_carousel_img" align="center">
<ul id="small_img">
<? while($image=mysql_fetch_array($sql_image)){?>
<? $ad_img=$image['media_url'];?>
<li class="small_img">
<a href="thumbnail.php?pic=<? echo $ad_img;?>" onmouseover="showImage('thumbnail.php?pic=<?=$image['media_url'];?>&w=600&sq=Y')"class="lightbox" rel="thumbnail_images" ><img src="thumbnail.php?pic=<?=$image['media_url'];?>&w=60&sq=Y" border="0" alt="<?=$item_details['name'];?>"/></a>
</li>
<? } ?>
</ul>
<div class="clearfix"></div>
<a id="prev_img" class="prev_img" href="#"></a>
<a id="next_img" class="next_img" href="#"></a>
<? if ($setts['lfb_enabled'] && $setts['lfb_auction']) { ?>
<div><img src="themes/<?=$setts['default_theme'];?>/img/pixel.gif" width="1" height="5"></div>
<? include("scripts/scroller/show_rep_details.php"); ?>
<? } ?>
I'm having trouble with jQuery Selectors. I have looked all over the web, spent many hours, but with no joy.
This is the site i got the Image Power Zoomer v1.2 from:
dynamicdrive.com
Question #2
Like i said im a newbie but i think my problems here jQuery selector these are some examples but i do not know what i need to add from my code
<script type="text/javascript">
jQuery(document).ready(function($){ //fire on DOM ready
$('img.showcase').addpowerzoom() //add zoom effect to images with CSS class "showcase"
$('#gallerydiv img').addpowerzoom() //add zoom effect to all images inside DIV with ID "gallerydiv"
})
</script>
What do i need to add here
$('????????????').addpowerzoom()
Thanks For all your help
jQuery(document).ready(function($){ //fire on DOM ready
==>
$(document).ready(function(){ //fire on DOM ready
Unless you changed your jQuery selector, this is the default
Because you asked another question in the answers (and even got an upvote?)
What do i need to add here
$('????????????').addpowerzoom()
This is my answer to that question:
$("img").each(function(){
$(this).addpowerzoom();
});
like in this demo: http://jsfiddle.net/u7w0ppq9/ with adding class instead of powerzoom (I do not have that library so, but it's basically the same)

How to use localstorage to remember appended items

Here's an Example in which images and hidden inputs get added to the div container #area on click. I want to use localstorage to remember the appended items on page load, but it isn't working with this line
localStorage.setItem("imagecookie",$('#area').find('div:empty:first').append(img).append(input));
...
localStorage.getItem("imagecookie");
Could anyone show me how to get it to work?
HTML:
<div class="box">
<img data-term="A" src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/5d/Crystal_Clear_action_run.png/40px-Crystal_Clear_action_run.png"/>
<input data-term="A" class="compare" type="checkbox"/>
</div>
<div class="box">
<img data-term="B" src="http://upload.wikimedia.org/wikipedia/en/thumb/9/99/Question_book-new.svg/50px-Question_book-new.svg.png"/>
<input data-term="B" class="compare" type="checkbox"/>
</div>
<div class="box">
<img data-term="C" src="http://upload.wikimedia.org/wikipedia/en/thumb/4/4a/Commons-logo.svg/30px-Commons-logo.svg.png"/>
<input data-term="C" class="compare" type="checkbox"/>
</div>
<div id="area"><div></div><div></div><div></div></div>
Code:
$('.compare').change(function(){
if($(this).is(':checked')){
var img = $('<img>'),
findimg = $(this).closest('.box').find('img'),
data_term = findimg.data('term');
img.attr('src', findimg.attr('src'));
img.attr('data-term',data_term);
var input = '<input type="hidden" name="imagecompare" value="'+data_term+'">';
localStorage.setItem("imagecookie",$('#area').find('div:empty:first').append(img).append(input));
}
else{
var term = $(this).data('term'),
findboximage = $('#area > div > img[data-term='+term+']')
findboximage.parent('div').empty();
}
});
$(document).on('click','#area > div',function(){
$(this).empty();
localStorage.clear();
});
localStorage.getItem("imagecookie");
Demo Fiddle : Store the contents; Retrieve back on page reload.
Demo : Just store the contents - Check the console to verify.
Storing HTML content would be a better option.
$('#area').find('div:empty:first').append(img).append(input)
localStorage.setItem("imagecookie",$('#area').html());

Categories

Resources