I want to implement a zoom feature for my mobile website images. Every website I've seen does this by making the image full screen when clicked on, which then lets the user pinch and zoom.
My website has a non scalable view port so I can't just have them zoom in on the actual website, I need to bring up the image they pressed on.
Is there a javascript plug in for this or should I try implementing this myself somehow?
My way to do this is using this is using addClass and removeClass
https://jsfiddle.net/moongod101/5u775ges/
and a little bit of css transition
More better using ToggleClass.
If you want use nice effect add transition.
JQUERY
$(function () {
$('.small').click(function(){
$('.small').toggleClass('full');
$('body').toggleClass('dark')
})
);
DEMO
Related
I am trying to get the image zooming effect using JQuery.
I have only one image that is of higher resolution, When i click any part of that image, i want to get the zoomed view of that part.
For example, i have one computer monitor image.Now if i click the button of monitor on image, the button should get zoomed.
I tried using this
http://jaukia.github.io/zoomooz/ but it is zooming the whole element.
How can i do this? are there any JQuery plugins available?
Maybe this is more what you are looking for? http://www.jacklmoore.com/zoom/
For example, i have one computer monitor image.Now if i click the button of monitor on image,
the button should get zoomed.
This type of functionality cannot be obtained/achieved by using zoomooz plugin.It zoom the entire element in the container.
There are many plugins as per ur requirement:
1)http://www.jacklmoore.com/zoom/
2)http://plugins.jquery.com/tag/zoom/ multiple jquery plugins are here
3)http://www.elevateweb.co.uk/image-zoom
Try this jqzoom
But it zoom on hover
jQuery zoom plugins
zoom.js is also a good option. Here is the demo of that plugin.
If you are intrested in here is the source code
I'm talking about the button that appears below certain screen widths which hides/unhides the menu when clicked (screenshot below). I'm trying to replicate its behavior on my website without resorting to using bootstrap (because I like to work without frameworks).
I've looked at the source code, but can't figure out exactly how it works, and what the most efficient way is to replicate the behaviour. From what I can tell it works with javascript by applying a hide/unhide class to the menu, activated by the button.
Would it be possible to replicate this with the css checkbox hack? Or is using javascript better?
This is fairly simple:
Add the hamburger menu icon
Have a CSS class that makes the nav area active
Make JS add/remove that class from the nav area
Use CSS transitions to take care of the animation (they're more likely to be accelerated on a mobile device)
I like the implementation on http://purecss.io.
Also check out http://www.ymc.ch/sandbox/hamburger/mobile-menu-demo.html
edit:
I misread question the first time.
I think you'd have a better time using javascript.
If you are using jquery you could use the toggle method.
$("#hide-show-button").click(function(){
$(".nav").toggle();
});
I am trying to build an example to highlight multiple image map areas on an html page for the iPad. The idea is similar to the magnifier feature that you notice when you tap and hold the mobile safari address bar. You can pan the magnifier around to go to a particular character. I am trying to leverage the same user experience to highlight image map "poly" areas. When I pan the magnifying glass, I want to scroll through the areas by highlighting them and making them active.
I am thinking of using the Jquery Maphighlight plugin alongwith a CSS/JS magnifier sample
http://persistent.info/files/20040508.magnifier/
http://davidlynch.org/projects/maphilight/docs/
The place I'm stuck is the actual scrolling between the areas and highlighting them automatically.
I was wondering if anyone has done something similar to what I'm trying to achieve.
Cheers!
Sameer
I couldn't quite conceptualise what you were wanting, but this may help in any case.
use the pseudo class :active in your css and in the tag add
In this demo I've simply used CSS transform to simulate the zooming, but it could be replaced with whatever you want. I think you will find a pure css option faster then any javascript.
http://jsfiddle.net/thurstanh/QEudm/5/
<body ontouchstart="">
css
img:active {
-webkit-transform:scale(2,2);
}
I am new to the whole Appcelerator world so I had a question:
Anybody is aware if appcelerator titanium provides slider functionality similar to this screenshot?
If not, what would be the first docs to look at?
No need for fancy animation or anything, just simplest transition.
I just need basic slider for titanium that has slide selectors looking like small circles (or something I could modify or adjust to custom needs).
Also, yes I'll use this as a startpoint
http://developer.appcelerator.com/apidoc/mobile/latest/Titanium.UI.Slider-object
But the page doesn't have screenshots of how the slider object looks and acts.
You want the ScrollableView control, with the paging component enabled.
http://developer.appcelerator.com/apidoc/mobile/latest/Titanium.UI.ScrollableView-object
For displaying such kind of progresbar or slider u have to create custom view and inside that custom view put as many as dots images as you have photos and just scrolling of each photos change dots image as per e.current / e.views ...
and set previous image to default image. and make it touch enabled = false.
ScrollableView control, with the paging.
link
I m have thumbnail images in a table and on mouseover the image i should get as blow up and on mouseout it should be normal thumbnail. and i even need to navigate on clicking the Blowup image.
plz guide me with the code of how to do it using javascript or using CSS
I need some thing as in this website : link text
Have a look at the jQuery Plugins, you could probably configure the ThickBox plugin?
Or a pure CSS implementation, doesn't work on IE6 though.
CSS Light Box
question: do you have two pics? One for thumbnail one for enlarged pic? or only one image that changing size?
do u want it gradually maximize or instantly become large?
For 1st case, just do:
function mouseOverFun() {
document.getElementById('imageName').src = "largeImage.jpg";
} // just do the reverse for mouseOut event.
for 2nd case, if it enlarge gradually, look at jQuery.
if not, just change the element size.
jQuery, or any other Javascript library has a host of things you could use to make a fancy gallery.
Try this site:
http://flowplayer.org/tools/index.html
Take a look at the demos pages; excellent ideas for what you're looking for.