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
Related
I want to know how can I change the content of a div (for example: <div id="MyDiv"></div>) when I click any link for an HTML file with PHP code?
Now, I tried to do this:
$(function(){
$("a").on("click", function () {
var href = $(this).attr('href');
$("#MyDiv").load(href);
});
});
But it replaces the content of the whole page.
Yeah, I need to prevent the default action, this will do what I want:
$(function(){
$("a").on("click", function () {
event.preventDefault();
var href = $(this).attr('href');
$("#MyDiv").load(href);
});
});
I am using this jquery code to hide/show a image with fixed position:
$(document).on('mouseover',".multiverseid", function (e) {
var mid = $(this).attr("id");
$('#picture').attr('src', mid);
$('.image-content').css("display", "flex");
});
$(document).on('mouseout',".multiverseid", function (e) {
$('#cardpicture').attr('src', "");
$('.image-content').css("display", "none");
});
the code is working great as long as the image is preloaded. When I do the mouseover on a large picture that is not fully loaded the image do not appear and even staying on the mouseover area longer does not show up the image. i have to move out of the area and reenter the mouseover area to show it.
So I tried it with this code:
$(document).on('mouseover',".multiverseid", function (e) {
var mid = $(this).attr("id");
$('#picture').attr('src', mid);
$("#picture").load(function() {
$('.image-content').css("display", "flex");
});
});
$(document).on('mouseout',".multiverseid", function (e) {
$('#cardpicture').attr('src', "");
$('.image-content').css("display", "none");
});
but I had no success. Same issue. What I am doing wrong?
You don't need to remove the src attribute for that. It is enough to just hide the element with display: none.
Setting the src to an empty string actually cancels the load process and the browser probably keeps the "faulty" state in its cache.
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');
}
});
I'm making a web page for my self. I have a welcome screen with big background wallpaper and just one link that you have to click to get to the index page. I have a sound on welcome page that plays when link is clicked, but as soon as the link is clicked it opens index page so the sound is not even heard. I want to make few seconds delay after the link is clicked so that the sound can play first to the end.
My jsfiddle http://jsfiddle.net/cs6yqawr/.
$('a[href*="/*html"]').each(function() {
$(this).on('click', function(event) {
event.preventDefault();
(function(h) {
setTimeout(function() {
window.location = h;
}, 5000);
})(this.href);
});
});
Tried this code but I can't get it working.
Any suggestions?
Tried and it'll play music before to new page.
$('.big-btn').click(function(e) {
e.preventDefault();
console.log(this);
var embed = $('<embed src="Kalimba.mp3" hidden="true">');
embed.appendTo($('#embed'));
embed.ready(function () {
setTimeout(function() {
window.location = 'index.html';
}, 2000);
});
});
You should replace my test mp3, target location, and delay ms for your usage.
I think it's just the selector on your event handler. Try:
$(document).on('click', 'a', function(event) {
event.preventDefault();
setTimeout(function(h) {
window.location = h;
}, 5000, this.href);
});
Or ideally just give the link an id and bind the handler to that.
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.