I'm having a weird issue where I have to click twice on a link(button) instead of once to activate the lightbox event and cant figure out why for the life of me.
here is my code and here is a preview of the page , if you'll notice you'll have to click twice on the watch button to activate the lightbox event.
(link removed so Google doesn't index)
<script type="text/javascript">
var $j = jQuery.noConflict();
var src = '';
$j(function()
{
$j("span#btnclick").click(function(event)
{
event.preventDefault();
$j("a.watchbutton").nivoLightbox({
effect: 'fade',
afterShowLightbox: function()
{
src = $j('.nivo-lightbox-content > iframe').attr('src');
$j('.nivo-lightbox-content > iframe').attr('src', src +'?autoplay=1');
}
});
});
});
</script>
That is because you are defining the lightbox functionality inside the click event. So when you click first time, the lightbox functionality is defined. Second time it's redifined, but before it work because it was already defined.
The solution is to extract the lightbox functionality definition out of click event:
$j("span#btnclick").click(function(event){
event.preventDefault();
});
$j("a.watchbutton").nivoLightbox({
effect: 'fade',
afterShowLightbox: function()
{
src = $j('.nivo-lightbox-content > iframe').attr('src');
$j('.nivo-lightbox-content > iframe').attr('src', src +'?autoplay=1');
}
});
Related
I'm trying to make it so when a user clicks on a image in the content of my website, it will then load that image into google image search and display the results.
This is the code I am using
<script>
var gurl = "http://www.google.com/searchbyimage?sbisrc=cr_1_3_2&image_url=";
$(document).ready(function() {
$('.thefeed').delegate('p img', 'click', function(e) {
e.preventDefault();
window.open(gurl + this.src, '_blank');
});
});
</script>
and a html snippet
<p>
<img src="https://upload.wikimedia.org/wikipedia/commons/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg">
</p>
The idea is for when you click on the image, it would open up this page.
var gurl = "http://www.google.com/searchbyimage?sbisrc=cr_1_3_2&image_url=";
$(document).ready(function () {
$('.thefeed').delegate('p img', 'click', function (e) {
e.preventDefault();
// Check if click is on image
if (e.currentTarget.tagName === 'IMG') {
window.open(gurl + e.currentTarget.src, '_blank');
}
});
});
One thing is that google is rewriting the url and we cannot stop that from this code. This would correctly generate the url for you now.
this was pointing to .thefeed in this case which should be now resolved
Pen: https://codepen.io/anon/pen/eRExWW
I can't seem to get this functioning the way that I want. I want a user to click a link, in this case Learn More then open a tab and scroll down the page to where that tab is. I have the functionality of opening the tab working but it will not scroll. The only time I can get it to actually scroll is to copy:
jQuery(document).scrollTop( jQuery("#" + descriptionID).offset().top );
into chrome's console and activate it. Below is the code in its entirety:
jQuery(document).on("click", ".learnMore", function() {
description = jQuery("a.ui-tabs-anchor:contains('Description')").parent().index();
descriptionID = jQuery("a.ui-tabs-anchor:contains('Description')").attr('id');
jQuery(".ui-widget").tabs("option", "active", description);
jQuery(document).scrollTop( jQuery("#" + descriptionID).offset().top );
});
Here is a link to a fiddle
It's because when you click the link, it's triggering the hash change. Because there is no anchor to go to, it scrolls to top after you call scrollTop. Adding return false; to the end of your click event or adding e.preventDefault(); for more modern browsers should correct the issue.
http://jsfiddle.net/jmarikle/dL41forj/
jQuery(document).on("click", ".learnMore", function() {
...
return false;
});
or
jQuery(document).on("click", ".learnMore", function(e) {
e.preventDefault();
...
});
Setting a timeout and targeting the body also works: http://jsfiddle.net/o2whkLyu/1/
$(document).on("click", ".learnMore", function() {
description = jQuery("a.ui-tabs-anchor:contains('Description')").parent().index();
descriptionID = jQuery("a.ui-tabs-anchor:contains('Description')").attr('id');
jQuery(".ui-widget").tabs("option", "active", description);
setTimeout (function(){
$('body').scrollTop( $("#" + descriptionID).offset().top );}, 20);
});
I'm having a tricky time with this code.
First, I have a series of images, each within an anchor.
a > img
a > img
a > img
The functionality I want is, when you roll your mouse over the image it dynamically adds 2 share buttons to the anchor:
a > .fb + .twitter + img
When you roll off they get removed.
The problem is, I also have a lightbox which binds to the a. That means when you click one of the share divs, it shows the share box properly, but it also triggers the lightbox.
I have tried everything to stop this... preventDefault(), stopPropagation() and return false. None of them stop the div click from bubbling to the anchor and triggering the lightbox.
First is my code for the rollovers. App.postImages is just a cached collection of jQuery image anchors. I use .add() to also add embedded video containers.
rolloverShares: {
divs: $('<div class="image-rollover rollover-facebook">Facebook</div><div class="image-rollover rollover-twitter">Twitter</div>'),
init: function() {
var _this = this;
App.postImages.add('.embed-container', '#content-wrapper').hover(
function() {
_this.divs.prependTo($(this)).show();
},
function() {
$('div', this).remove();
}
);
$(document).on('click', '.rollover-facebook', function() {
Social.facebook.popup();
return false;
});
$(document).on('click', '.rollover-twitter', function() {
Social.twitter.popup();
return false;
});
}
},
Here is my lightbox code. Nothing fancy. If it matters, the .on() in the block below makes it so you can click anywhere on the lightbox to close it, not just the image.
lightbox: function() {
if (isDesktop) {
App.postImages.nivoLightbox({
effect: 'fade',
theme: 'default',
keyboardNav: false,
clickOverlayToClose: true,
errorMessage: 'The requested image cannot be loaded. Please try again later.'
});
$(document).on('click', '.nivo-lightbox-image img', function() {
$(this).closest('.nivo-lightbox-overlay').find('.nivo-lightbox-close').click();
});
} else {
App.postImages.click(function(e) {
e.preventDefault();
});
}
},
Also I suppose i should put what's in App.postImages. It's just this:
$('a img', '#content-wrapper').not('.share-button img').parent().addClass('post-image')
I'm working with Joomla 2.5 and am using this here:
http://www.code7.co.uk/joomla-responsive-slider
My theme is a single-pager. If I click on a navigation item javascript simple fades out one div and fades in the other div. The problem now is that if I toggle the divs, the slider isn't enabled anymore. Only when I reload the page.
The Slider is loaded like this:
<script type="text/javascript" charset="utf-8">
jQuery(window).load(function() {
jQuery('.flexslider').flexslider({
animation: "slide",
directionNav: false,
controlNav:false,
keyboardNav:false,
direction: "horizontal",
slideshowSpeed:3000,
animationSpeed:600,
randomize: false
});
});
</script>
It is loaded each time below the slider div container. I already tried to remove the code from the modules and only load the slider once. It worked, but not if I toggled the divs.
Question: How can I "reload" the slider, when I toggle the div? I tried with .reload() the window, but then the whole fadein and out animation is worth nothing and I want to keep it!
This is how I change:
function changeSection(section) {
if(activeSection != section) {
$('#'+activeSection).fadeToggle("slow");
$('#'+section).delay(500).fadeToggle("slow");
$('#menu-'+activeSection).removeClass('active');
$('#menu-'+section).addClass('active');
document.title = activeSectionTitle;
history.pushState({}, '', section);
activeSection = section;
}
}
Try (updated)
$(document).ready(function () {
$("div:not(:first)").hide(0);
var toggletwo = function (i) {
$("div:not(:nth-of-type(" + i + "))").fadeOut(125, function () {
$(this).siblings("div").fadeIn(250)
})
};
$("li a").on("click", function (e) {
return ($(e.target).is("a:first") ? toggletwo(1) : toggletwo(2))
});
});
jsfiddle http://jsfiddle.net/guest271314/68k7F/
I've tried to create a jQuery effect using fancy box to contain my content and within that is a large image with thumbnails below. What I was trying to make happen was when the thumbnails are clicked then the large image updates (see RACE Twelve image as an example). This works fine but the problem is when I go to another fancy box on my website (SEE RACE ONE box) then that image has been updated to be whatever thumbnail was clicked last.
I thought this might be event bubbling but preventing default hasn't helped.
I'm very new to jQuery and know that this is something stupid that I'm doing.
Any advice would be greatly appreciated? Thank you :)
Live version of page: http://www.goodwood.co.uk/members-meeting/the-races.aspx
jsfiddle for jQuery: http://jsfiddle.net/greenhulk01/JXqzL/
(function ($) {
$(document).ready(function () {
$('.races-thumbnail').live("click", function (e) {
$('.races-main-image').hide();
$('.races-image-wrap').css('background-image', "url('http://www.goodwood.co.uk/siteelements/images/structural/loaders/ajax-loader.gif')");
var i = $('<img />').attr('src', this.href).load(function () {
$('.races-main-image').attr('src', i.attr('src'));
$('.races-image-wrap').css('background-image', 'none');
$('.races-main-image').fadeIn();
});
return false;
e.preventDefault();
});
$(".races-image-wrap img").toggle(function () { //fired the first time
$(".races-pop-info").show();
$(this).animate({
width: "259px",
height: "349px"
});
}, function () { // fired the second time
$(".races-pop-info").hide();
$('.races-main-image').animate({
width: "720px",
height: "970px"
});
});
$('#fancybox-overlay, #fancybox-close').live("click", function () {
$(".races-pop-info").show();
$(".races-main-image").animate({
width: "259px",
height: "349px"
});
});
});
})(jQuery);
$('.races-main-image') will select all elements with that class, even the ones which aren't currently visible.
You can select the closest '.races-main-image' to the clicked element as per the code below (when placed inside the click event handler)
$('.races-main-image', $(e.target).closest('.races-fancy-box'))
So your new code should look like:
$('.races-thumbnail').live("click", function (e) {
var racesmainimage = $('.races-main-image', $(e.target).closest('.races-fancy-box'));
var racesimagewrap = $('.races-image-wrap', $(e.target).closest('.races-fancy-box'));
racesmainimage.hide();
racesimagewrap.css('background-image', "url('http://www.goodwood.co.uk/siteelements/images/structural/loaders/ajax-loader.gif')");
var i = $('<img />').attr('src', this.href).load(function () {
racesmainimage.attr('src', i.attr('src'));
racesimagewrap.css('background-image', 'none');
racesmainimage.fadeIn();
});
return false;
});
I've also removed your 'e.preventDefault();' return false; includes that, and was preventing e.preventDefault() from being executed in any case.