Im trying to create a zoom effect like this http://jsfiddle.net/SWDhG/
But I'm trying to open the <a href="imglink"> link not the <img src=""> tag, so i need som help with jquery.
html:
<div class="images">
<a href="http://us.123rf.com/400wm/400/400/teddy2007b/teddy2007b0903/
teddy2007b090300008/4539531-cup-and-bouquet-of-flowers-decorative-floral-
background-for-banner-vector.jpg" class="zoom" title="">
<img src="http://3.bp.blogspot.com/-BKBDFTVyTVs/TdmU9SuHU5I/AAAAAAAAASk/
e7oUIN34cc4/s320/blue+salvia.jpg" class="attachment-shop_single wp-post-image"/>
</a>
</div>
This is the original code
$(function() {
$('li a').click(function() {
$('div img').attr('src', $(this).find('img').attr('src'));
$('div').show();
return false;
});
$('div').mousemove(function(e){
var h = $(this).find('img').height();
var vptHeight = $(document).height();
var y = -((h - vptHeight)/vptHeight) * e.pageY;
$('div img').css('top', y + "px");
});
$('div').click(function(){
$('div').hide();
});
});
http://jsfiddle.net/SWDhG/36/
Here's a fiddle that does what you want.
$(function() {
$('li a').click(function() {
//here's the change -->
$('div img').attr('src', $(this).attr('href'));
// we change the information we take from the element to the
// href attribute of the element, $(this), which is assigned
// to the element that caused the event, the anchor tag
$('div').show();
return false;
});
$('div').mousemove(function(e){
var h = $(this).find('img').height();
var vptHeight = $(document).height();
var y = -((h - vptHeight)/vptHeight) * e.pageY;
$('div img').css('top', y + "px");
});
$('div').click(function(){
$('div').hide();
});
});
I used my own demo image href attribute for the sake of brevity.
To get the hyperlink address:
$('li a').click(function() {
var link = $(this).attr('href');
// do something with it
return false;
});
Related
I am trying to set an element to relative onclick. The code I have works in setting my div to relative, but I need to reset the other divs back to being positioned absolute. So far I have ...
<div class="case-studies">
<section class="pagination">
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>
</section>
<div class="case-study" style="background:blue;"></div>
<div class="case-study" style="background:green;"></div>
<div class="case-study" style="background:orange;"></div>
<div class="case-study" style="background:pink;"></div>
</div>
$('.pagination div:first-of-type').on('click', function() {
$('.case-study:first-of-type').css("position", "relative");
});
$('.pagination div:nth-of-type(2)').on('click', function() {
$('.case-study:nth-of-type(2)').css("position", "relative");
});
$('.pagination div:nth-of-type(3)').on('click', function() {
$('.case-study:nth-of-type(3)').css("position", "relative");
});
$('.pagination div:last-of-type').on('click', function() {
$('.case-study:last-of-type').css("position", "relative");
});
You dont need to have multiple events for each element. you can use index of clicked element to filter from .case-study set:
var $caseStudies = $('.case-study');
$('.pagination div').on('click', function() {
$caseStudies.css("position", "absolute");
$caseStudies.eq($(this).index()).css("position", "relative");
});
You can also narrow down the code to:
$caseStudies.css("position", "absolute").eq($(this).index()).css("position", "relative");
Vanilla JS:
let section = YourSection
section.onclick = event=>{
if (event.target.nodeName.tolowerCase() !== yourChildNodesName) return false
Array.from(event.target.parentNode.children).forEach(node=>{
node.style.position = node === event.target ? 'relative' : 'absolute'
})
}
I have been using this script to show modal popup window on my site with some QR code inside and it works on single pages but on category pages its called multiple times and because of that it shows 10 times the same window. How can I limit this to be showed only once on the nearest ancor position?
Code:
<li class="qrcode">
<a class="popup-trigger"></a>
</li>
</ul>
<div class="contain-popup">
<div class="popup">
my qr code
<span class="popup-btn-close">X</span>
</div>
</div>
<script>
// Popup Window
var scrollTop = '10';
var newHeight = '100';
$(window).bind('scroll', function() {
scrollTop = $( window ).scrollTop();
newHeight = scrollTop + 100;
});
$('.popup-trigger').click(function(e) {
e.stopPropagation();
if(jQuery(window).width() < 767) {
$(this).after( $( ".popup" ) );
$('.popup').show().addClass('popup-mobile').css('top', 0);
} else {
$('.popup').removeClass('popup-mobile').css('top', newHeight).toggle();
};
});
$('html').click(function() {
$('.popup').hide();
});
$('.popup-btn-close').click(function(e){
$('.popup').hide();
});
$('.popup').click(function(e){
e.stopPropagation();
});
</script>
One simple way to achieve it is to remove() it's html with hiding it at the same time:
$('html').click(function() {
$('.popup').hide();
$('.popup').remove();
});
Instead of hide(), remove the class assign to it.
$('.popup').remove();
// Popup Window
var scrollTop = '10';
var newHeight = '100';
$(window).bind('scroll', function() {
scrollTop = $( window ).scrollTop();
newHeight = scrollTop + 100;
});
$('.popup-trigger').click(function(e) {
e.stopPropagation();
if(jQuery(window).width() < 767) {
$(this).after( $( ".popup" ) );
$('.popup').show().addClass('popup-mobile').css('top', 0);
} else {
$('.popup').removeClass('popup-mobile').css('top', newHeight).toggle();
};
});
$('html').click(function() {
$('.popup').hide();
$('.popup').remove();
});
$('.popup-btn-close').click(function(e){
$('.popup').hide();
});
$('.popup').click(function(e){
e.stopPropagation();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="qrcode">
<a class="popup-trigger"></a>
</li>
</ul>
<div class="contain-popup">
<div class="popup">
my qr code
<span class="popup-btn-close">X</span>
</div>
</div>
Solution was quite simple, I don't know how I missed it:
jQuery(document).ready(function($){
$('.popup-trigger').click(function(){
$(this).closest('.caption').find('.popup');
});
})
Im trying to change a jQuery tabs script to fit my needs, i swapped the tabs out for images and i added jQuery code to change the images on hover and click.
But my code isint working, when you press one of the images the tab should become active and the image should stay changed but it always goes back to the original.
Here my code:
function resetTabs(){
$("#container > div").hide();
$("#tabs a").attr("id","");
}
var myUrl = window.location.href;
var myUrlTab = myUrl.substring(myUrl.indexOf("#"));
var myUrlTabName = myUrlTab.substring(0,4);
(function(){
$("#container > div").hide();
$("#tabs li:first a").attr("id","current");
$("#container > div:first").fadeIn();
$("#tabs a").on("click",function(e) {
e.preventDefault();
if ($(this).attr("id") == "current"){
return
}
else{
resetTabs();
$(this).attr("id","current");
$($(this).attr('name')).fadeIn();
}
});
for (i = 1; i <= $("#tabs li").length; i++) {
if (myUrlTab == myUrlTabName + i) {
resetTabs();
$("a[name='"+myUrlTab+"']").attr("id","current");
$(myUrlTab).fadeIn(); //
}
}
})()
$(function(){
$('.hoverfun').on('mouseenter mouseout', function(){
var original = $(this).attr('src');
var replacement = $(this).data('hoverimg');
$(this).attr('src', replacement).data('hoverimg', original);
});
});
$(function(){
$('.hoverfun').on('click', function(){
var original = $(this).attr('src');
var replacement = $(this).data('downimg');
$(this).attr('src', replacement).data('downimg', original);
});
});
<ul id="tabs">
<li><img class="hoverfun" src="images/img1.png" data-hoverimg="images/img2.png" data-downimg="images/img3.png"></li>
<li><img class="hoverfun" src="images/img1.png" data-hoverimg="images/img2.png" data-downimg="images/img3.png"></li>
<li><img class="hoverfun" src="images/img1.png" data-hoverimg="images/img2.png" data-downimg="images/img3.png"></li>
<li><img class="hoverfun" src="images/img1.png" data-hoverimg="images/img2.png" data-downimg="images/img3.png"></li>
I know its messy, but if anyone could take a look for me i would appreciate it :)
Not entirely sure what it is you want to accomplish, but maybe this will help.
You could add a class with .addClass() to .hoverfun when you click it. Something like active.
Then you could check and see if the element has active with .hasClass() and ignore the mouseover effects in case it does.
$(function () {
$('.hoverfun').on('mouseenter mouseout', function () {
if (!$(this).hasClass('active')) {
var original = $(this).attr('src');
var replacement = $(this).data('hoverimg');
$(this).attr('src', replacement).data('hoverimg', original);
}
});
$('.hoverfun').on('click', function () {
$('.active').each(function() {
var o1 = $(this).attr('src');
var o2 = $(this).data('hoverimg');
var o3 = $(this).data('downimg');
$(this).attr('src', o2).data('downimg', o1).data('hoverimg', o3).removeClass('active');
});
var original = $(this).attr('src');
var replacement = $(this).data('downimg');
$(this).attr('src', replacement).data('downimg', original).addClass('active');
});
});
http://jsfiddle.net/3hqgh/1/
I was wondering how can I add a fade effect when hovering using this example http://www.designchemical.com/lab/jquery/demo/jquery_demo_image_swap_gallery.htm
I was wondering if its possible to achieve something like this www.bungie.net
Here's the code used in the example
$(document).ready(function() {
// Image swap on hover
$("#gallery li img").hover(function(){
$('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''));
});
// Image preload
var imgSwap = [];
$("#gallery li img").each(function(){
imgUrl = this.src.replace('thumb/', '');
imgSwap.push(imgUrl);
});
$(imgSwap).preload();
});
$.fn.preload = function() {
this.each(function(){
$('<img/>')[0].src = this;
});
}
I used bruchowski's code which worked great for me. I did change .hover to .mouseover because I was getting a double fade effect when mousing out and I just wanted the last moused over image to stick.
I'm also very new to jquery and at first pasted it in the wrong place. Once I placed it directly before $(imgSwap).preload(); it worked.
And I slowed the fade down.
So my code is as follows:
<script type="text/JavaScript">
// prepare the form when the DOM is ready
$(document).ready(function() {
$("#gallery li img").hover(function(){
$('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''));
});
var imgSwap = [];
$("#gallery li img").each(function(){
imgUrl = this.src.replace('thumb/', '');
imgSwap.push(imgUrl);
});
$("#gallery li img").mouseover(function(){
if ($("#main-img:animated").length){
$("#main-img:animated").stop();
}
$("#main-img").css("opacity", "0").animate({"opacity":"1"}, 1400);
}); $(imgSwap).preload();
});
$.fn.preload = function() {
this.each(function(){
$('<img/>')[0].src = this;
});
}
</script>
Thanks!!!
This is a quick solution (you would add this to their existing code, do not edit what they already have)
$("#gallery li img").hover(function(){
if ($("#main-img:animated").length){
$("#main-img:animated").stop();
}
$("#main-img").css("opacity", "0").animate({"opacity":"1"}, 300);
});
In this part of the code that is like this in their example
$("#gallery li img").hover(function(){
$('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''));
});
Change to
$("#gallery li img").hover(function(){
$('#main-img').attr('src',$(this)
.fadeOut('fast')
.attr('src').replace('thumb/', ''));
});
I want to toggle two separate properties on a click event:
1) An image within a div - toggling the src attribute
2) The absolute positioning of the div - toggling the animate("top":"0px") bit
Here's the HTML
<div id="emailme">
<a id="email" href="mailto:xxx#gmail.com">xxx#gmail.com</a>
<div id="emailmecopy">email me</div>
<img id="emaildown"src="images/downbutton.png">
</div>
Now I've sorted the src toggling, but can't work out how to toggle the animation bit:
$("#emailme img").on({
'click': function() {
var src = ($(this).attr('src') === 'images/downbutton.png')
? 'images/upbutton.png'
: 'images/downbutton.png';
$(this).attr('src', src); //THIS TOGGLES THE IMAGE SRC
//BUT WHAT DO I PUT HERE TO TOGGLE ANIMATE BETWEEN ("top":"0px") and
//("top":"-50px") IN THE SAME CLICK??
}
});
Any help much appreciated!
if($("#emailme img").css('top') == '0px'){
$("#emailme img").stop().animate({top:'-50px'},1000);
};
if($("#emailme img").css('top') == '-50px'){
$("#emailme img").stop().animate({top:'0px'},1000);
};
also check this out:
$('body').on('click', '#emailme img', function (e){
$(this).attr('src', $(this).attr('src')=='images/downbutton.png'?'images/upbutton.png':'images/downbutton.png');
if($(this).css('top') == '0px'){
$(this).stop().animate({top:'-50px'},1000);
};
if($(this).css('top') == '-50px'){
$(this).stop().animate({top:'0pg'},1000);
};
});
If you refactor your code a bit you can do it like this. I suppose this is what you were looking for...
$("#emailme img").on({
'click': function() {
var $this = $(this);
var src = $this.attr('src');
var isUp = src === 'images/upbutton.png';
var newSrc = 'images/'+ (isUp ? 'downbutton' : 'upbutton') +'.png';
$this.attr('src', newSrc)
.animate({ top: (isUp ? '-50' : '0') +'px' });
}
});