binding a click event to jqzoom to launch fancybox - javascript

So I've been playing around with this for a while, but cannot get the binded click event to fire from a jqzoomed element.
HTML:
<div class="product-clicktozoom-image">
<div class="product-clicktozoom-image-main">
<img itemprop="image" id="mainimage" src="http://exampe.com/image.jpg" alt="Image" title="Image"/>
</div>
</div>
JS:
jQuery(document).load(function() {
jQuery('#mainimage').bind('click',function(){
var fancyImage = jQuery('#mainimage').attr('src');
jQuery.fancybox.open(fancyImage);
});
});
jqzoom creates a couple of extra div's so the final page structure actually looks like this:
<div class="product-clicktozoom-image-main">
<a href="example.com/image.jpg" class="jqzoom" title="" rel="gall" style="outline-style: none; text-decoration: none;">
<div class="zoomPad">
<img itemprop="image" id="mainimage" src="http://example.com/image.jpg" alt="Image" title="Image" style="opacity: 1;">
<div class="zoomPup" style="display: none; top: 105px; left: 145px; width: 126px; height: 126px; position: absolute; border-width: 1px;"></div>
<div class="zoomWindow" style="position: absolute; z-index: 5001; cursor: default; left: 0px; top: 0px; display: none;">
<div class="zoomWrapper" style="border-width: 1px; width: 355px; cursor: crosshair;">
<div class="zoomWrapperTitle" style="width: 100%; position: absolute; display: none;"></div>
<div class="zoomWrapperImage" style="width: 100%; height: 355px;">
<img src="http://example.com/image.jpg" style="position: absolute; border: 0px; display: block; left: -411.26760563380276px; top: -298.5915492957746px;">
</div>
</div>
</div>
<div class="zoomPreload" style="visibility: hidden; top: 156px; left: 132.5px; position: absolute;">Loading zoom</div>
</div>
</a>
</div>
I have tried binding the click event to the #mainimage, along with the zoomPad class and also the img within the zoomWrapperImage element as this appears to be the top element when you mouseover the image.
All I want to do is open the full image in a fancybox if they click on the zoom (currently the zoom happens on mouseover). I know the fancybox.open(fancyImage); works, I can run the code in the click function directly in the console successfully, I just can't get it to fire from the click event itself.
Help!

This turned out to be pretty simple in the end, the click event needs to bind on the .zoomPad, and I used window.load in place of (document).ready as that ensures all the elements have loaded.
Final JS:
jQuery(window).load(function() {
jQuery('.zoomPad').bind('click',function(){
var fancyImage = jQuery('.zoomWrapperImage img').attr('src');
jQuery.fancybox.open([{href : fancyImage}], {closeClick : true});
});
});

Related

Binding input to an image

I have an image to which I need to glue an input field. There will be several input fields and each of them should always be in its place, namely on a certain part of the image.
.input-circle {
border-radius: 50%;
width: 70px;
height: 70px;
}
<img class="figure-img img-fluid rounded" src="123.png"/>
<input class="form-control input-circle">
I need to do as shown in gif
perfect result
how can i bind input fields to image like that?
Or maybe I need to use a completely different concept?
Thanks in advance for your help!
Use position relative and absolute to achieve this. A little example:
.body_wrapper {
position: relative;
height: 100%;
width: 100%;
}
.input_wrapper {
position: absolute;
border-radius: 50%;
width: 70px;
height: 70px;
overflow: hidden;
top: 100px;
left: 100px;
}
.input_wrapper .input-circle{
height: 100%;
}
<div class="body_wrapper">
<div class="image_wrapper">
<img src="https://cdn.britannica.com/s:800x450,c:crop/96/177096-138-2CB46AEC/discussion-organ-systems-human-body-another-influence.jpg" alt="">
</div>
<div class="input_wrapper">
<input class="form-control input-circle">
</div>
</div>
Working fiddle

Laravel & JQuery : Get the correct positions of draggables in a droppable image

Hello I'm implementing a basic esignature for our client using documents from their users, and i'm trying to use jquery UI draggable over an image. Here are my sample code
<style>
h5 {
border: 2px solid gray;
border-radius: 5px;
padding: 5px;
white-space: nowrap;
z-index: 2;
}
img {
width: 100%;
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
<body>
<div>
<div class="container-fluid" style="position: absolute;bottom: 0px;left: 0px;right: 0px;top: 0px;">
<h1>ProClient ESignature</h1>
<div class="row" style="height: 100%;margin-left: -15px;margin-right: -15px;position: relative;">
<div class="col-xs-1" style="position:absolute; height: 100%; width: 25%; position: absolute; top:0px; bottom: 0px; left: 0px;">
<h5 class="draggable">Signature</h5>
<h5 class="draggable">Date</h5>
<h5 class="draggable">Name</h5>
</div>
<div class="col-xs-11 droppable" style="height: 100%; width: 75%; position: absolute; top:0px; bottom: 0px; right: 0px">
<img id="imagesrc" src="{{ url($files[0]) }}" width="100%" style="padding:0px; margin:0px">
</div>
</div>
</div>
</div>
</body>
<script>
$('.draggable').draggable({
revert: "invalid",
stack: ".draggable"
}).resizable();
$('.droppable').droppable({
accept: ".draggable",
});
</script>
Yes I'm able to drag and simulate a signature box, and I know that droppable has an api DROP function that has event and ui parameters where I can get the position object with X and Y coordinates. However it seems that these coordinates as specifically for the image container that contains the image not relative to the image itself. Is there a way to get it correctly or I need to compute for it given the values that I have ? also if I scaled the image to a lower version then will the coordinates need to be multiplied by the scale value/percentage ?

Changing slider image on mouseover of a div

I need advice on the following issue:
We are using wordpress as backend for a website and a theme that comes with a slider. I use that slider with some css to let divs slide up and show hidden content on mouseover (divs are displayed in front of a background image). This works great so far after searching for it here in stackoverflow.
What I would need now is a functionality that changes the image of the slider on mouseover of a div that is inside the slider-div.
HTML looks like this (extremely simplified):
<div class="ls-wp-fullwidth-container" style="height: 692px;">
<div class="ls-wp-fullwidth-helper" style="height: 692px; width: 1383px; left: 0px;">
<div id="layerslider_3" class="ls-wp-container ls-container ls-fullwidth" style="margin: 0px auto; visibility: visible; width: 1383px; height: 691.5px;">
<div class="ls-webkit-hack">
</div>
<div class="ls-inner" style="width: 1383px; height: 692px;">
<div class="ls-layer ls-active" style="left: auto; right: 0px; top: 0px; bottom: auto; width: 1383px; height: 692px; display: none; visibility: visible;">
<img src="http://bauer-bauer.at.w0126e5a.kasserver.com/wordpress/wordpress/wp-content/uploads/2015/05/Siebdruck-Werkstatt-Winterthur-Zürich.jpg" class="ls-bg" alt="Slide background" style="padding: 0px; border-width: 0px; width: 1660px; height: 922px; margin-left: -830px; margin-top: -461px;">
<div class="ls-s-1 Highlight1" style="position: absolute; color: rgb(0, 111, 0); border-radius: 20px; white-space: nowrap; opacity: 1; transform: rotate(0deg) scale(1, 1); display: block; visibility: visible; margin-left: 0px; margin-top: 0px; width: 253.55px; height: auto; font-size: 23.05px; line-height: 23.05px; padding: 0px; border-width: 0px; left: 138.3px; top: 507.1px; background: rgb(255, 255, 255);">
<div id="parent">
<center>
<br>
<br>
<h1>Siebdruck</h1>
<ul>
<li>Content</li>
</ul>
</center>
<br>
<br>
<div id="hover-content">
<center>
<ul>
<li>Content shown on hover</li>
</ul>
<br>
<br>
</center>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
What I want to do now is to change the image within the
<div class="ls-layer ls-active>
<img src="...">
</div>"
I figured out this would only be possible by using javascript so I tried the following:
Using this code in a header file:
var elem = document.getElementById("parent");
elem.addEventListener("mouseover",mouseOver);
elem.addEventListener("mouseout",mouseOut);
function mouseOver() {
document.getElementByClassName("ls-layer ls- active").style.backgroundImage="url(http://bauer-bauer.at.w0126e5a.kasserver.com/wordpress/wordpress/wp-content/uploads/2015/04/slider_stockfoto_3.jpg)";
}
function mouseOut() {
document.getElementByClassName("ls-layer ls-active").style.backgroundImage = "url(http://bauer-bauer.at.w0126e5a.kasserver.com/wordpress/wordpress/wp-content/uploads/2015/05/Siebdruck-Werkstatt-Winterthur-Z%C3%BCrich.jpg)";
}
Didn't work, so I tried this:
function MouseIn() {
document.getElementByClassName("ls-layer ls-active").style.backgroundImage = "url(img/http://bauer-bauer.at.w0126e5a.kasserver.com/wordpress/wordpress/wp-content/uploads/2015/04/slider_stockfoto_3.jpg) no-repeat";
}
function MouseOut() {
document.getElementByClassName("ls-layer ls-active").style.backgroundImage = "url(img/http://bauer-bauer.at.w0126e5a.kasserver.com/wordpress/wordpress/wp-content/uploads/2015/05/Siebdruck-Werkstatt-Winterthur-Z%C3%BCrich.jpg) no-repeat";
}
Didn't work as well, so I messed around with names and ids but couldn't figure out what I am doing wrong.
So, long story short: Is it possible to change the image within the structure stated above (<div class="ls-layer ls-active><img src="..."></div>") when hovering <div id="parent"></div>? And if so, what am I obviously doing wrong?
As mentioned before, transitions created using css are working perfectly fine...
I hope you can help me, I'm growing more and more desperate about this.
Just try this:
$("#parent").on({
"mouseover" : function() {
$( ".ls-bg" ).attr( "src", "http://placehold.it/350x150" );
},
"mouseout" : function() {
$( ".ls-bg" ).attr( "src", "http://placehold.it/950x150" );
}
});
HTML:
<div id="parent">
<img src="http://placehold.it/950x150" class="ls-bg" alt="Slide background">
</div>
UPDATE ---
Looking at your question I modified my code. I think this is what you want:
JSFIDDLE

jquery onclick fadein effect

I am just starting to learn jquery with very little JS knowledge (long story short - I'm told it helps provide shortcuts - if I had time I would learn JS properly).
With that out of the way, I am trying to essentially create a scrolling marquee or multi-frame hero banner, whatever you want to call it. I don't want any automation, I am looking specifically for the end user to click a button/image to change the marquee image.
I am having issues with my jquery as is AND I'd like to ask for assistance on another piece I am struggling with, which is hiding the image that is currently showing.
what is wrong with my current jquery that it will not work appropriately?
a. file is loaded at top of the page
b. when I execute this ($("#imgd2").fadeIn;) part of the jquery it works in firebug, but within the click function it does not...
how could I go about looking to see what image is currently showing, hide that and fade in the appropriate image. For example, img1 is displayed by default, if i click on img3, how can I hide image 1 before fading in marquee 3?
//html - forgive the laziness
//I am showing the first image by default and hiding the other two images on the page.
<div style="width: 100%; height: 450px;" id="img-container">
<div id="imgd1" style="width: 432px; height: 398px; position: absolute; background-image: url(img1.jpg); background-size: cover;"></div>
<div id="imgd2" style="width: 432px; height: 398px; position: absolute; display: none; background-image: url(img2.jpg); background-size: cover;"></div>
<div id="imgd3" style="width: 432px; height: 398px; position: absolute; display: none; background-image: url(img3.jpg); background-size: cover;"></div>
<div style="position: absolute; top: 438px; left: 322px;" id="bttns">
<img id="img1" src="active.png">
<img id="img2" src="active.png">
<img id="img3" src="active.png">
</div>
</div>
//jquery
//On click of a particular button, I want to fadein the appropriate image
$("#img1").click(function () {
$("#imgd1").fadeIn;
});
$("#img2").click(function () {
$("#imgd2").fadeIn;
});
$("#img3").click(function () {
$("#imgd3").fadeIn;
});
thanks in advance!
it must have a parenthesis :-)
$("#imgd5").fadeIn();
for question #2..heres my fiddle http://jsfiddle.net/5PP4z/2/
fadeIn is a function, you need to invoke it
$("#imgd3").fadeIn();
Instead of writing a click handler for each of the imgd elements, you can target all of them(by adding a class imgd) and use a data-* attribute to specify the image(data-target attribute with the id of the image) to be displayed. Also add a class img to all the images so that we can hide it easily.
<div style="width: 100%; height: 450px;" id="img-container">
<div id="imgd1" class="imgd" style="width: 432px; height: 398px; position: absolute; background-image: url(//placehold.it/432x398/ff0000); background-size: cover;"></div>
<div id="imgd2" class="imgd" data-target="#img2" style="width: 432px; height: 398px; position: absolute; display: none; background-image: url(//placehold.it/432x398/00ff00); background-size: cover;"></div>
<div id="imgd3" class="imgd" data-target="#img3" style="width: 432px; height: 398px; position: absolute; display: none; background-image: url(//placehold.it/432x398/0000ff); background-size: cover;"></div>
<div style="position: absolute; top: 438px; left: 322px;" id="bttns">
<img id="img1" class="img" data-target="#imgd1" src="//placehold.it/32/ff0000" />
<img id="img2" class="img" data-target="#imgd2" src="//placehold.it/32/00ff00" />
<img id="img3" class="img" data-target="#imgd3" src="//placehold.it/32/0000ff" />
</div>
</div>
then
jQuery(function ($) {
var $imgds = $('.imgd');
$('.img').click(function () {
var $target = $($(this).data('target'));
$imgds.not($target).hide();
$target.stop(true, true).fadeIn();
})
});
Demo: Fiddle

Change the div content of an html from another html through jquery

I'm using iframe tags in my index.html. Below is the code
<iframe src="header.html" height="100px" scrolling="no" width="1335px"
style="position: absolute; top: 0px;"></iframe>
<iframe src="menu.html" height="500px" scrolling="no" width="250px"
style="position: absolute; top: 103px;"></iframe>
<iframe src="body.html" height="500px" scrolling="no" width="1083px"
style="position: absolute; top: 103px; left: 260px"></iframe>
<iframe src="footer.html" height="100px" scrolling="no" width="1335px"
style="position: absolute; top: 605px;"></iframe>
My Login div is in menu.html and logout is in footer.html. I want to show logout when login div is hidden(after login) and when i click Logout i want my logout link to be hidden and login div to be displayed. Since both of them are in differnet html's so i want to know how we can do this simultaneaously. Right now this functionality is working but i need to refresh the page.
Also window.location.reload is not useful.
Is there any easier way to perform hide/show operations in multiple html's concurrently.
If you really must keep this content in separate files and are intent on making separate calls for each, try this:
<div id="header" style="height: 100px; width 1335px; overflow: hidden; position: absolute; top: 0px;"></div>
<div id="menu" style="height: 500px; width 250px; overflow: hidden; position: absolute; top: 103px;"></div>
<div id="body" style="height: 500px; width: 1083; overflow: hidden; position: absolute; top: 103px; left: 260px;"></div>
<div id="footer" style="height: 100px; weight:1335px; overflow: hidden; position: absolute; top: 605px;"></div>
And some jQuery like so:
<script>
$(document).ready(function() {
$("#header").load("header.html");
$("#menu").load("menu.html");
$("#body").load("body.html");
$("#footer").load("footer.html");
});
</script>
Now that you have all your markup in the same window, use jQuery to do whatever you want with it.

Categories