I have some images which dynamically gets displayed on a web page.These images are clickable. When i click on one of the image I want to display another picture over the image that is clicked.If clicked again that picture needs to be removed.
Intially when the page loads the images will be displayed as shown below and when i click on these images another picture over the image which i have click should be displayed. As of now i am able to display the image on the side of the selected image. which is shown in the 2nd image
What you can do is just simply add two data attributes to your tr, so you can have data-image1 and data-image2 then simply change the img src when a mouse click happens.
Here is my jsFiddle : https://jsfiddle.net/wLvn8yzx/
Html
<img src="http://dreamatico.com/data_images/cat/cat-8.jpg"
id="imageSwap"
data-image1="http://dreamatico.com/data_images/cat/cat-8.jpg"
data-image2="http://dressacat.com/chat.png">
Javascript
document.getElementById("imageSwap").onclick = function (e) {
if (this.src == this.getAttribute("data-image1")) {
this.src = this.getAttribute("data-image2");
} else {
this.src = this.getAttribute("data-image1");
}
}
Or you could use classes and style them and set the background to the image. Here is another jsFiddle : https://jsfiddle.net/wLvn8yzx/1/
Html
<div id="imageSwap" class="image1"></div>
Css
div{
height:400px;
width:400px;
}
.image1{
background-image: url("http://dreamatico.com/data_images/cat/cat-8.jpg");
}
.image2{
background-image: url("http://dressacat.com/chat.png");
}
Javacript
document.getElementById("imageSwap").onclick = function (e) {
if (this.className == "image1") {
this.className = "image2";
} else {
this.className = "image1";
}
}
Update
I have created a new jsfiddle which uses a javascript function to hide and show the cross image.
jsFiddle : https://jsfiddle.net/wLvn8yzx/2/
Html
<img onclick="javascript:imageSwapper()" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Red.svg/120px-Red.svg.png" class="imageSwap image1">
<img onclick="javascript:imageSwapper()" src="https://upload.wikimedia.org/wikipedia/commons/thumb/archive/f/ff/20150316142725!Solid_blue.svg/120px-Solid_blue.svg.png" class="imageSwap image2">
<img onclick="javascript:imageSwapper()" src="https://s2.graphiq.com/sites/default/files/2307/media/images/t/Green-Yellow_429842_i0.png" class="imageSwap image3">
<img id="crossImage" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Red_Cross.svg/120px-Red_Cross.svg.png" class="hidden">
CSS
.hidden{
display: none;
}
.show{
display: inline;
}
Javascirpt
function imageSwapper() {
var crossImage = document.getElementById("crossImage");
if (crossImage.className == "hidden") {
crossImage.className = "show";
} else {
crossImage.className = "hidden"
}
}
You can try using jQuery, and you'll want all <td> to share the same class. In my example, I used "dynamic-image".
HTML:
<table>
<tr>
<td class="dynamic-image"></td>
</tr>
<tr>
<td class="dynamic-image"></td>
</tr>
<tr>
<td class="dynamic-image"></td>
</tr>
</table>
CSS:
.dynamic-image {
background-image: url('http://www.clker.com/cliparts/3/h/N/y/5/p/empty-check-box-hi.png');
background-size: contain;
position: relative;
height: 200px;
width: 200px;
content:" ";
}
.dynamic-image:before { content:" "; }
.dynamic-image.active:before {
background-image: url('http://www.clipartbest.com/cliparts/niX/yoA/niXyoAbiB.png');
background-size:contain;
height: 200px;
width: 200px;
position: absolute;
top: 0;
}
jQuery:
$('.dynamic-image').click(function()
{
$(this).toggleClass('active');
});
Check out my jsFiddle here: http://jsfiddle.net/mdeang2/eyts25nh/1/
Related
I have a web page where I need to show two iFrames side by side, and allow a user to resize them horizontally (so they can easily see the complete contents of either side).
My code looks like this:
<div style="padding:30px">
<table style="width:100%;border:0px;border-collapse:collapse;">
<tr>
<td class="cLeft cSide">
<iframe class="cFrame" src="{MyLeftPage}">
</iframe>
</td>
<td class="cRight cSide">
<iframe class="cFrame" src="{MyRightPage}">
</iframe>
</td>
</tr>
</table>
</div>
Finally managed it: jsFiddle
The problem with using the standard approaches as mentioned here (Thanks user!) is that when you have iFrames and you move the mouse over them, the $(document).mousemove() stops firing.
The trick is to have a column in the middle, and have a div that shows up when you click the column. Since the div is in the parent page, the mousemove event keeps firing, allowing you to easily resize it.
Here's what the final HTML looks like:
<div style="user-select:none;padding:30px">
<table style="width:100%;border:0px;border-collapse:collapse;">
<tr>
<td class="cLeft cSide">
<iframe class="cFrame" src="{MyLeftPage}">
</iframe>
</td>
<td class="resize-bar">
<div class="resize-panel"></div>
</td>
<td class="cRight cSide">
<iframe class="cFrame" src="{MyRightPage}">
</iframe>
</td>
</tr>
</table>
</div>
This is the CSS
.resize-bar {
width: 5px;
cursor: col-resize;
position:relative;
background-color: #AAA;
margin:20px;
}
.resize-panel {
height: 100%;
background-color: #DDDDDD00;
display: inline-block;
position: absolute;
top:0px;
left:-2px;
right:-2px;
cursor: col-resize;
}
.resize-panel.rx {
left:-400px;
right:-400px;
}
.cSide {
min-width:200px;
}
.cFrame {
width: 100%;
border: 1px solid #DDD;
height: calc(100vh - 170px);
overflow-x:scroll;
}
And this is the JavaScript:
$(function() {
var pressed = false;
$("table td").mousedown(function(e) {
pressed = true;
$(".resize-panel").addClass("rx");
e.stopPropagation();
});
$(".resize-panel").mousedown(function(e) {
pressed = false;
});
$(document).mousemove(function(e) {
if (e.which == 1 && pressed) {
var ww = $(window).width();
var cPos = e.pageX;
if (cPos < 0.20 * ww) cPos = 0.2 * ww;
if (cPos > 0.80 * ww) cPos = 0.8 * ww; {
$(".cLeft").width(cPos);
}
}
});
$(document).mouseup(function() {
if (pressed) {
$(".resize-panel").removeClass("rx");
pressed = false;
}
});
});
I am trying to open a URL link using DIV tags and nothing else.
So this is my HTML/JavaScript:
<div id="divs" onmouseover="newfunction2()"></div>
and this is the function:
function newfunction2(){
var txt = document.getElementById('divs');
if(document.body.scrollTop >= 0 || document.documentElement.scrollTop > 0){
txt.innerHTML = '<div id="divss"></div>';
} else {
txt.innerHTML = "";
}}
(the id="divs" just positions a display:block and so does id="divss"
I want to click the div id="divss" to open the link?
function newfunction2(){
var txt = document.getElementById('divs');
if(document.body.scrollTop >= 0 || document.documentElement.scrollTop > 0){
txt.innerHTML = '<div id="divss"></div>';
} else {
txt.innerHTML = "";
}}
#divs{
position:absolute;
left: 0;
top: 18px;
width:20px;
height: 20px;
background-color: red;
cursor: pointer;
opacity: 1;
z-index: 1;
}
a #divss{
height: 100%;
width: 100%;
display: inline-block;
}
<div id="divs" onmouseover="newfunction2()"></div>
If you want to keep your div empty, css can come to your rescue.
document.querySelector('#divs').addEventListener('click', e => {
window.open('http://www.bbc.com', '_blank');
});
#divs {
height: 200px;
width: 200px;
}
<div id="divs"/>
Try this updated code:
document.querySelector('#divs').addEventListener('click', function(e) {
window.open('http://www.bbc.com', '_blank');
});
Just use addEventListener to have your element listen for any click events. When a click is registered then navigate to the new URL:
document.querySelector('#divEl').addEventListener('click', redirect);
function redirect() {
console.log('Execute the following code:\nwindow.location.assign("http://www.mozilla.org");');
}
<div id="divEl">Go to URL</div>
I'm not doing the actual redirect in my example, but you just have to use the following line of code for the redirect: window.location.assign("http://www.mozilla.org"); (or whatever URL you want to direct to).
I want to click the div id="divss" to open the link?
add an event listener for the click on the div and use window.open (the second param '_blank' is optional to open the link in a new tab.)
<div id="divs">
</div>
document.querySelector('#divs').addEventListener('click', e => {
window.open('http://www.bbc.com', '_blank');
});
I think you can use anchor tag within the div and this will give you better way to redirect and also add bit css on the div
<div id="divs"></div>
css can be
#divs{
cursor:pointer;
}
I'm using fancybox (2.15) and elevatezoom (3.0.8) that come with Magento 1.9.2.4, to zoom the main image and create a fancybox gallery with the other images of the gallery. Fancybox is opened when clicking on the main image.
What i need, is to use the thumbnail helper to navigate the thumbnails while the fancybox is open, but the problem is that I'm not able to initialize it in the easiest and suggested way, like
$(selector).fancybox({config});
and the way i'm using has no effect on the fancybox appearance.
This is the code i'm using
js
$(document).ready(function() {
if($('.thumb-link').size() == 0){
var ez = $('.gallery-image.visible').first().data('zoom-image');
}else{
var ez = $(".thumb-link");
}
$.fancybox({
'width':400,
'height': 500,
helpers : {
title : {
type: 'outside'
},
thumbs : {
width : 50,
height : 50
}
}
});
$(".gallery-image.visible").bind("click", function(e) {
$.fancybox(ez);
return false;
});
});
where .gallery-image.visible is the main image and the .thumb-link are the thumbnails in my Html.
Following other questions like this one using fancybox set height and width
but I actually get not visible effect on the fancybox.
Is there a different way to re-initialize fancybox configurations before calling it effectively?
EDIT:
Actually I changed my code in this way:
var fancyConfig = {'width' : 200, 'height': 300,...};
$(".gallery-image.visible").bind("click", function(e) {
$.fancybox(ez, fancyConfig);
return false;
});
and I can see some effects but no trace of thumbs....I included and can see the proper libraries for fancybox thumbnails helper.
I think that this piece of code does not do anything, I do not see any selector or collection of objects here:
$.fancybox({
'width':400,
'height': 500,
helpers : {
title : {
type: 'outside'
},
thumbs : {
width : 50,
height : 50
}
}
});
I think you should replace $.fancybox(ez); with $.fancybox.open(ez, {config});
Actually I found out that using the libraries used in the fiddle and not the ones I was loading in my server, makes the scripts compatible and it works.
So in this way it works:
var fancyConfig = {
helpers : {
thumbs : {
width : 50,
height : 50
}
}
};
$(".gallery-image").click(function(e) {
$.fancybox(ez, fancyConfig);
return false;
});
and the fiddle
$(document).ready(function() {
if($('.thumb-link').size() == 0){
var ez = $('.gallery-image.visible').first().data('zoom-image');
}else{
var ez = $(".thumb-link");
}
var fancyConfig = {
'speedIn' : 1000,
'speedOut' : 1000,
helpers : {
title : {
type: 'outside'
},
thumbs : {
width : 50,
height : 50
}
}
};
$(".gallery-image.visible").bind("click", function(e) {
$.fancybox(ez, fancyConfig);
return false;
});
});
ul {
list-style: none;
margin: 0;
padding: 0;
}
.product-image-thumbs li:first-child {
margin-left: -1px;
}
.product-image-thumbs li{
display: inline-block;
margin-right: 2%;
}
.product-image-thumbs a {
display: inline-block;
border: 1px solid #cccccc;
overflow: hidden;
}
.product-image-thumbs a img{
width: 122px;
height: 122px;
overflow: hidden;
}
.product-image-gallery .gallery-image {
display: none;
}
.product-image-gallery .gallery-image.visible {
display: block;
}
.product-img-box .product-image img {
max-width: 100%;
max-height: 750px;
width: 500px;
max-width: 500px;
margin: 0px auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-thumbs.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-thumbs.css" rel="stylesheet"/>
<div class="product-img-box">
<div class="product-image product-image-zoom zoom-available">
<div class="product-image-gallery">
<img id="image-main"
class="gallery-image visible"
src="https://static.pexels.com/photos/111755/pexels-photo-111755.jpeg"
alt="custom-alt"
title="img-title"
data-zoom-image="https://static.pexels.com/photos/111755/pexels-photo-111755.jpeg" />
<img id="image-main"
class="gallery-image"
src="https://static.pexels.com/photos/111755/pexels-photo-111755.jpeg" />
<img id="image-0"
class="gallery-image"
src="https://static.pexels.com/photos/67832/sunrise-sky-blue-sunlight-67832.jpeg" />
<img id="image-1"
class="gallery-image"
src="https://media.istockphoto.com/photos/majestic-sunrise-over-the-mountains-picture-id185067762?k=6&m=185067762&s=612x612&w=0&h=QFGIsuncZGtiLeCQk6aMR14nOUrJNsFmXgpbT7oEU0c=" />
<img id="image-2"
class="gallery-image" src="https://static.pexels.com/photos/111755/pexels-photo-111755.jpeg" />
</div>
</div>
</div>
<div class="more-views">
<ul class="product-image-thumbs">
<li>
<a class="thumb-link" title="my-title" rel="fancybox-thumb" data-image-index="2" href="https://static.pexels.com/photos/111755/pexels-photo-111755.jpeg">
<img src="https://static.pexels.com/photos/111755/pexels-photo-111755.jpeg" alt="custom-alt" />
</a>
<a class="thumb-link" title="my-title" rel="fancybox-thumb" data-image-index="0" href="https://static.pexels.com/photos/67832/sunrise-sky-blue-sunlight-67832.jpeg">
<img src="https://static.pexels.com/photos/67832/sunrise-sky-blue-sunlight-67832.jpeg" alt="custom-alt" />
</a>
<a class="thumb-link" title="my-title" rel="fancybox-thumb" data-image-index="1" href="https://media.istockphoto.com/photos/majestic-sunrise-over-the-mountains-picture-id185067762?k=6&m=185067762&s=612x612&w=0&h=QFGIsuncZGtiLeCQk6aMR14nOUrJNsFmXgpbT7oEU0c=g">
<img src="https://media.istockphoto.com/photos/majestic-sunrise-over-the-mountains-picture-id185067762?k=6&m=185067762&s=612x612&w=0&h=QFGIsuncZGtiLeCQk6aMR14nOUrJNsFmXgpbT7oEU0c=" alt="custom-alt" />
</a>
</li>
</ul>
</div>
I am trying to move a image when OnClick on the image,
Here is the example:
http://coursesweb.net/javascript/move-image-from-element-another_s2#mjq
I want to have it like the link explains, for some reason it is not working here, Maybe someone here can help me, i've been googling for a couple of hours now.
Here is something I want to do: http://orakels.org/php/?m=wo_lonline
This is kinda the result I want ;')
Here my JsFiddle:
http://jsfiddle.net/3cv92hxy/3/
At the moment my code looks like this:
<body>
<div id="cardcontainer">
<div class="cards">
<img src="./img/kaart.png">
<img src="./img/kaart.png">
<img src="./img/kaart.png">
<img src="./img/kaart.png">
<img src="./img/kaart.png">
<img src="./img/kaart.png">
<img src="./img/kaart.png">
<img src="./img/kaart.png">
<img src="./img/kaart.png">
<img src="./img/kaart.png">
<img src="./img/kaart.png">
<img src="./img/kaart.png">
<img src="./img/kaart.png">
</div>
</div>
<div id="result">
Picture 1 | Picture 2 | Picture 3
</div>
<script type="text/javascript">
/*http://coursesweb.net/javascript/move-image-from-element-another_s2#mjq
Here add:
'image_path': ['id_elm1', 'id_elm2']
"id_elm1" is the ID of the tag where the image is initially displayed
"id_elm2" is the ID of the second tag, where the image is moved, when click on the first tag
*/
var obimids = {
'img/kaart.png': ['cards', 'result'],
/* 'imgs/girl.jpg': ['cards', 'result'],
'imgs/dog.jpg': ['dog1', 'dogto'] */
};
// function executed when click to move the image into the other tag
function whenAddImg() {
/* Here you can add a code to be executed when the images is added in the other tag */
return true;
}
/* From here no need to edit */
// create object that will contain functions to alternate image from a tag to another
var obaImg = new Object();
// http://coursesweb.net/javascript/
// put the image in element with ID from "ide"
obaImg.putImg = function(img, ide) {
if(document.getElementById(ide)) {
document.getElementById(ide).innerHTML = '<img src="'+ img+ '" />';
}
}
// empty the element with ID from "elmid", add image in the other element associated to "img"
obaImg.alternateImg = function(elmid) {
var img = obaImg.storeim[elmid];
var addimg = (elmid == obimids[img][0]) ? obimids[img][1] : obimids[img][0];
document.getElementById(elmid).innerHTML = '';
obaImg.putImg(img, addimg);
// function executed after the image is moved into "addimg"
whenAddImg();
}
obaImg.storeim = {}; // store /associate id_elm: image
// add 'image': 'id_elm1', and 'image': 'id_elm1' in "storeim"
// add the image in the first tag associated to image
// register 'onclick' to each element associated with images in "obimids"
obaImg.regOnclick = function() {
for(var im in obimids) {
obaImg.storeim[obimids[im][0]] = im;
obaImg.storeim[obimids[im][1]] = im;
obaImg.putImg(im, obimids[im][0]);
document.getElementById(obimids[im][0]).onclick = function(){ obaImg.alternateImg(this.id); };
document.getElementById(obimids[im][1]).onclick = function(){ obaImg.alternateImg(this.id); };
}
}
obaImg.regOnclick(); // to execute regOnclick()
</script>
</body>
The css:
body{
background-color:black;
}
#cardcontainer {
margin:10px;
padding:10px;
}
.cards {
width:960px;
margin: auto;
padding:15px;
margin-top:14px;
}
.cards img {
margin-left:-40px;
}
.cards img:hover, .cards img:focus, .cards img:active {
-webkit-transform: translate(0px -50px);
transform: translate(0px,-50px);
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
#result {
width:960px;
padding:20px;
margin:0 auto;
background-color:yellow;
}
When I change
var obimids = {
'img/kaart.png': ['cards', 'result'],
to
var obimids = {
'img/kaart.png': ['cardcontainer', 'result'],
it kinda works, but that's not how I want it, the problem must be because cards is a class, any idea how to fix?
Trying to figure out how to switch from one to two images then back to one with an onlick.
So far I have below which works no problem for switching to one image and back to original image. Ultimately I'm trying to get the first onclick event to be two images vertically and then click again back to the first single image.
var play = false;
function toggle() {
var image = document.getElementById('image')
var scan = document.getElementById('scan');
play = !play;
if (play) {
image.src = "pause.png";image.width="182";image.height="182";image.border="0";
scan.play();
}
else {
image.src = "play.png";image.width="182";image.height="182";image.border="0";
scan.pause();
}
}
and in body:
<img onclick="toggle()" id="image" src="play.png" alt="image" width="182" height="182" style="margin:auto; position:absolute; top: 0; right: 0; bottom: 0; left: 0; border: 0;">
This should work fine except, take out the width, height and border from the javascript, they're not changing so why have it there and risk some browsers freaking out on them?
I just put this together real quick to test and it works a treat.. I've commented out scan.play and pause of course but I'm assuming you've checked the console in your browser to see if those are throwing any errors?
I took the <a> out and used style cursor=pointer instead for the click-able element as well.. either way works but this is neater and works from ie6 I think, ie7+ definately.
edit: removed source block didn't achieve goal of question
After discussion in comment there's heaps of ways to do it, and I'd probably use jQuery but since you're not here's one not
<!doctype html>
<html>
<head>
<script type="text/javascript">
var play = true;
function toggle() {
//var scan = document.getElementById('scan');
var playpause = document.getElementById('playpause');
var btnplay = playpause.getElementsByClassName('play');
var btnpause = playpause.getElementsByClassName('pause');
play = !play;
if (play) {
btnplay[0].className = 'btn play active';
btnpause[0].className = 'btn pause';
//scan.play();
}
else {
btnplay[0].className = 'btn play';
btnpause[0].className = 'btn pause active';
//scan.pause();
}
}
</script>
<style>
.btn {
width: 182px;
height: 182px;
cursor: pointer;
position: absolute;
visibility: hidden;
}
.btn.active { visibility: visible; }
.btn.play { background: url('play.png') no-repeat 0 0; }
.btn.pause {
background: url('pause.png') no-repeat 0 0;
padding: 182px 0 0 0;
}
</style>
</head>
<body>
<div id="playpause">
<div class="btn play active" onclick="toggle()">
</div>
<div class="btn pause" onclick="toggle()">
<img src="other.png" alt="other" />
</div>
</body>
</html>