jQuery or JS to show larger image - javascript

I'm looking for a way too display images like google does. when someone hovers over an image, an larger view is shown I would like to know how I can achieve this.

Something like this?
http://jsfiddle.net/roXon/HmTrw/

There are tons of plugins out there if you still aren't very good at jQuery yet. The imgPreview plugin seems like it would fit your needs. Another really slick looking one is ZoomerGallery.
On the other hand, if you want to do it exactly like Google, just go to the page where it does what you want, view source, and grab the script they are using.

$("img").hover(
function () {
//mouse enter
//do animations
},
function () {
//mouse leave
//do animations
}
);
Thats what i'd look at. Also see here:
http://api.jquery.com/hover/

Related

Why is jQuery.css() not working for me?

I've been struggling with some code and quite seem to get it to work - apologies if this is a silly question, I'm still quite new to JavaScript/jQuery etc.
I'm trying to build a Weather App as part of the Free Code Camp course and have built using simpleWeather.js. I'm now trying to animate a little bit of the page to make it a bit more interactive. I have some code:
$('#drop').on('click', function() {
$('.fa-chevron-circle-down').css('transform', 'rotate(180deg)');
});
I believe this should on a click, rotate the icon 180 degrees but no matter what variations I try, I can't seem to get it to work. After spending hours yesterday playing with it I decided it's time to ask for help! (The idea is that once it works, I'll animate the elements below so they only show when the button is clicked).
My codepen is https://codepen.io/woftis/pen/VjppYM
Thanks in advance for any help anyone can give.
Your #drop element has been created after DOM load i.e. dynamically. Hence you need event delegation here. So attach your click to document and then refer your element - #drop.
$(document).on('click','#drop', function() {
$('.fa-chevron-circle-down').css('transform', 'rotate(225deg)');
});
Updated PEN
To be more simpler, since #weather element existed during DOM load, insted of document you can add it to #weather element. Consider below example.
$('#weather').on('click','#drop', function() {
$('.fa-chevron-circle-down').css('transform', 'rotate(225deg)');
});
and also I believe, it should have been 180deg to be proper turn-around.
Updated PEN 2 with 180deg and #weather
I was having an issue with jquery .css function with code that's very similar to to OP.
Problem
The .css jquery function would not change the css on my .dot-one or .dot-two classes when I clicked button with the #correct-email id.
Here's the required code examples:
$(document).on('click', '#correct-email', function () {
$('.dot-one').css('background-color', '$white');
$('.dot-two').css('background-color', '$gray-darker');
...
});
.dot-one {
background-color: $gray-darker;
}
.dot-two {
background-color: $white;
}
Solution
$(document).on('click', '#correct-email', function () {
$('.dot-one').css('background-color', '#fff');
$('.dot-two').css('background-color', '#222');
...
});
Apparently, jquery doesn't like variables SASS variables being passed into the .css function. I couldn't find that anywhere in the documentation. My assumption is that it'd be able to compute the new value based off of the SASS variable. But it seems all that stuff is pre-processed by sass and not made available to css.
According to the SASS documentation this is what it sounds like is happening.

Override js-events

It's a long shot which is not that investigated yet, but I'm throwing the question while I'm looking for answers to hopefully get on the right track.
Building a Wordpress site with the theme Dante. This has an image slider function for products, handled in jquery.flexslider-min.js. In my first attempt i used wp_dequeue_script( 'sf-flexslider' ); to stop using this, and then added my own js which works perfect. The problem, however, is that in the bottom of the page there's another slider for displaying other products that uses this file, so i can not simply just dequeue this script.
I've tried to put my js-file both before and after the jquery.flexslider-min.js but this is always the primary. It there a way to, in my js-file, do something like "for obects in [specified div], skip instructions from jquery.flexslider-min.js"?
EDIT: Found this thread and tried the .remove() and the .detach() approach and add it again, but this makes no difference.
I really want to get rid of that flexslider on this particullar object. I can, of course, "hack" the output and give the flexslider item another class or something, but that would bring me so much work i don't have time for.
Maybe, You can monkey patch the flexslider behavior. There's a good tutorial here:
http://me.dt.in.th/page/JavaScript-override/
Something like:
var slider = flexSlider;
var originalSlide = slider.slide;
slider.slide= function() {
if ( some condition) {
// your custom slide function
} else {
// use default behavior
originalSlide.apply(this, arguments);
}
}

Slide down similar to google image result

I'm trying to make something similar to the slide down functionality that Google uses in their images search results.
I've got something somewhat working within this jsFiddle:
http://jsfiddle.net/ultraloveninja/X7rmK/
Using jQuery:
$(document).ready(function () {
$('.slider').click(function (e) {
e.preventDefault();
$('.internal').slideUp('normal');
if ($(this).next().is(':hidden') === true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
}
});
$('.internal').hide();
});
But I'm not sure how to get it so the content that pertains to the image is underneath it.
I did find this link:
http://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/
But it's causing some issues when integrating it with isotope. So, I'm trying to roll my own and see if I can achieve something similar that will work when filtering with isotope.
Not too sure if I need to set something different within the CSS or if I need to make JS command it differently.
Why don't you just put your content inside the slider, after the image. They belong together, so it makes sense to group them. It would also make your problem (and js) a lot easier. Have a look at this:
http://jsfiddle.net/Pevara/X7rmK/2/
The html does now look like this:
<div class="slider">
<img src="..." />
<div class="internal">Content here</div>
</div>
And the js became a lot shorter:
$('.slider').click(function () {
$(this).find('.internal').slideToggle();
});

Manually Advancing Orbit Slider

I'm using the Zurb 'Orbit' Javascript slider, http://www.zurb.com/playground/orbit-jquery-image-slider, and I'd like to fire my own javascript at it to manually advance the slider left or right.
Basically, I'd like to fill it with my content, then have that content 'slide' in an out of view depending on a user interactions with the page as a whole, not only on a timer function or clicking a navigational image as already provided by the library.
So if I have a link named 'myLink', then something like this...
$('#myLink').click(function() {
... code to advance javascript slider...
$('#content').orbit(?????);
});
Failing that, my 'content' is going to be an html form and other similar stuff, anyone know a good free library that already does what I want?
Get a reference to the orbit object using "afterLoadComplete":
var myOrbit;
$(".orbitSlides").orbit({
afterLoadComplete: function() {
myOrbit = this;
}
});
Then use the 'shift' function to change slides:
myOrbit.shift(1);
or
myOrbit.shift('prev');
or
myOrbit.shift('next');
The easiest way would be
$(".slider-nav .right").click();
to simulate the arrow being clicked. Change if necessary to account for using the bullet-navigation option.
I don't think you're going to get anything more elegant than that, because the plugin doesn't expose an API of any sort - it's all privately closured up in the plugin.
I use this
$('#next').click(function(){
$('#rotator').trigger("orbit.next");
})
$('#prev').click(function(){
$('#rotator').trigger("orbit.prev");
})
assuming the div #rotator is the orbit slider.
I couldn't get some of these other answers to work. I know it's a little hacky but I found this easiest:
HTML:
<p id='back'>Back</p>
<p id='next'>Next</p>
CSS: (if you use the built-in navigation_arrows: false;, navigation arrows are removed and can no longer be manipulated, so visibility: hidden; to the rescue!)
.orbit-prev, .orbit-next {
visibility: hidden;
}
jQuery:
$('#back').on('click', function() {
$('.orbit-next').click();
});
$('#next').on('click', function() {
$('.orbit-prev').click();
});

Open links in div container in JQuery Mobile

i have a multi-column layout where "#content-primary" is the div i want the actual content loaded, and "#content-secondary" holds a generated listview of links(effectively a navigation menu).
I'm using this code to change the page, pretty much following the JQM Docs, however the browser is following the links to entirely new pages, instead of loading the content from them into the "#content-primary" div. There's obviously something I'm missing.
$(function(){
$('#menu a').click(function() {
$.mobile.changePage($(this).attr('href'), {
pageContainer: $("#content-primary")
} );
});
});
Using Django on the backend, but it probably isn't relevant.
I finally found an answer here. JQuery Mobile's changePage() and loadPage() methods do too much post-processing and triggers a lot of events that really makes implementing your own dynamic loading more complicated than it should be.
The good old fashioned #("div#primary-content").load(); works, but I'm still struggling to apply JQM styles to it.
interestingly, this contradicts with this:
$.mobile.changePage() can be called
externally and accepts the following
arguments (to, transition, back,
changeHash).
And when tested this works: $.mobile.changePage("index.html", "slideup"); but this does not:
$.mobile.changePage("index.html", { transition: "slideup" });
Perhaps documentation is not quite right?
Update to the new beta 1 release

Categories

Resources