subimage shows when mainimage is clicked - javascript

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"/>

Related

Multiple image hidding if one image is available

I have a page where needs to be displayed only one image, but the image can be from different sources.
I've put all the possible sources and onerror, if the image is not from that source it is hidden.
The problem is that sometimes the same image can be found in 2 or even 3 srcs so the onerror function is not runned and on the page the same image is displayed 2 or 3 times (the same image but different source)
What i need is a js script that hides the rest of the images if one of them is working, but there are a lot of possibilites like: img_01 to be shown with img_4 or img_2 with img_3 or img_01 with img_2 and img_3. I don't know how to cover all this possibilites so that is why i need your help.
I hope u understood my problem
Thanks! :)
<div class="col-md-12" style="padding: 0px; margin-bottom: 20px;">
<img id="img_01" src="im/wall/<?php
if(isset($_GET['i']) && strlen($_GET['i']) > 0){
echo $_GET['i'];
}?>.jpg"
onerror="this.style.display='none'"/>
<img id="img_2" src="im/ceiling/<?php
if(isset($_GET['i']) && strlen($_GET['i']) > 0){
echo $_GET['i'];
}?>.jpg"
onerror="this.style.display='none'"/>
<img id="img_3" src="im/floor/<?php
if(isset($_GET['i']) && strlen($_GET['i']) > 0){
echo $_GET['i'];
}?>.jpg"
onerror="this.style.display='none'"/>
<img id="img_4" src="im/collections/<?php
if(isset($_GET['i']) && strlen($_GET['i']) > 0){
echo $_GET['i'];
}?>.jpg"
onerror="this.style.display='none'"/>
</div>
i've used something like this and i even tried to put it in an if for all the images
$('#img_01').on('load', function(){
// hide/remove the loading image
$('#img_2, #img_3, #img_4').hide();
const my_imgs = document.getElementsByClassName('my_img');
const handler = function(e){
remove_handler();
e.target.classList.remove('hidden');
}
const remove_handler = function(){
for(let i=my_imgs.length; i--; ) {
my_imgs[i].removeEventListener('load', handler);
}
}
for(let i=my_imgs.length; i--;){
my_imgs[i].addEventListener('load', handler);
}
.my_img {
width:200px;
}
.hidden {
display:none;
}
<div class="container">
<img class="my_img hidden" src="https://cdn.stocksnap.io/img-thumbs/960w/TWTNM0XMX9.jpg">
<img class="my_img hidden" src="https://cdn.stocksnap.io/img-thumbs/960w/L6QLZEGPXB.jpg">
<img class="my_img hidden" src="https://cdn.stocksnap.io/img-thumbs/960w/FH3TLO40EI.jpg">
</div>

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

JQuery cycle plugin within ajax content

I am trying to make a slideshow using the jquery cycle plugin (http://jquery.malsup.com/cycle/) on my wordpress site.
The way it works is, when the page loads, I click a button named ".submit" and then ajax content comes up on the screen and a div named '.modal' changes its visibility from hidden (display:none) to visible and inside, it has a container that shows a slideshow from the div #slideshow.
I tried to make it that when the ajax content changes visibility, the cycle plugin will then load.
When I do this I get no error messages but the slideshow doesn't work.
Here is my code:
jQuery(document).ready(function() {
jQuery('.submit').click(function(e) {
e.preventDefault();
var mod_shadow = jQuery('#modal_shadow');
var container = jQuery('.modal');
mod_shadow.show();
container.show();
var data = {
'action': 'modal_ajax',
'nonce': '<?php echo $ajax_nonce; ?>'
};
jQuery.post('<?php echo admin_url('admin - ajax.php '); ?>', data, function(response) {
container.replaceWith(response);
});
});
});
jQuery('.modal').on('show', function() {
jQuery('#slideshow').cycle({
fx: 'scrollLeft'
});
});
<?php
// ...
add_action( 'wp_footer', 'modal_init');
function modal_init() {
if (!bp_is_user() || !is_user_logged_in()) {
return;
}
$ajax_nonce=w p_create_nonce( "nonce");
}
?>
<div id="modal_shadow" style="display: none;"></div>
<div class="modal" style="display: none;">
<div class="modal-content-wrap">
<div class="modal-title comp-loading-icon">
<div class="bp-loading-icon"></div>
</div>
</div>
</div>
<div class=".modal-content">
<div style="width: 250px">
<div id="slideshow">
<div style="width:250px; height:150px; background:red;"></div>
<div style="width:250px; height:150px; background:blue;"></div>
<div style="width:250px; height:150px; background:green;"></div>
<div style="width:250px; height:150px; background:yellow;"></div>
</div>
<div id="prev" style="float:left;">PREV</div>
<div id="next" style="float:right;">NEXT</div>
</div>
</div>

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)

Changing image on click of text

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

Categories

Resources