I have a lot of photos with links to wherever, and I'd like to have a semi-transparent box come up on hover, after a delay, with caption and copyright for the larger underlying photo. In my dreams, I'd like the smaller overlay to link to the original photo or the photographer's site, while the still-visible area of the underlying image will still link to wherever. If it make a difference, this is on a Joomla site (with jQuery already loaded) but I'm generally able to hack the PHP and HTML on the template.
I see a few pretty straightforward ways to overlay a linked box over a non-linked image or a non-linked box over a linked image, but can I set up a linked box over a larger linked image, with the overlying box intercepting clicks just on itself? I'm guessing that this would require some JavaScript, but at this point I only have a hazy understanding of JavaScript, so at very least I need to know whether JavaScript can ultimately do that, before I get into this, and I'd love to get a generic script to do this.
The overlying box can be in a consistent location -- like full-width at the bottom of the underlying image -- rather than, say, a tooltip located relative to the mouse cursor. Seems like a script would have to respond to a click in the image area, then check whether it also falls inside the overlying box, and act accordingly. Could a script do that, and, um, might I get a rough scrip for something like that?
Thanks,
Drew
Related
i am looking to find out how i can display a background image, but then have parts of the image hidden so that it can be expanded by the user if need be. The reason being is that the height of the image is quite long and i want to be able to reduce this and make this interactive.
I have seen something similar on the following site, although this uses a parallax image, mine will just be a static image.
https://www.laduree.com/en_gb/
I would love to know the name of this feature and how something like this can be implemented.
If somebody could please help.
So I wanted to do for my company's webpage, a thing where are links that belong to people, to make it when you click, you have a little menu where you can choose to send him a message or view his profile..
Before click:
After click:
I tryed to search for it, couldn't find anything of much valuable.. Maybe someone can help me out.
If you're looking for an easy way to do it, I recommend using jQuery (http://jquery.com/) with one of the popup plugins (http://plugins.jquery.com/tag/popup/). It's easy to install, and most of them have a working demo for you to test out before download.
Otherwise, coding a popup window with pure JS takes time.
This general method is to:
Create a hidden div
Position: absolute and play with the z-index so your div will be on top of all other elements.
Set the position to where you clicked, or somewhere around the area of the target.
Take into account the width and height of the window/screen. (i.e. No poing in showing a div that'll appear off screen).
Fill it in with information you need.
Make it appear.
The way I've done things like that in the past is to have a hidden absolute or fixed DIV layer that houses that message menu. Then have a click trigger make that div layer visible and positioned at the current mouse coordinates.
There should be a lot of articles on google telling you how to do the various stages of all those steps.
I have an image and I want to restrict the clickable area on this image. I want user to click only particular area. I want to obtain a darker view out side of this clickable area. How could I achieve this usin java script and/or jquery.
Kind regards
There are many ways to implement the clickable area:
using image map :
http://en.wikipedia.org/wiki/Image_map
Take a look at this website : http://odyniec.net/projects/imgareaselect/
or using divs and z-index.
It might be difficult, but if you use a to determine a clickable area first, you can use jquery to do something like this:
On hover over the mapped area, Show a transparent black div, the same size as the image. (This makes the image darker)
Place another div on top of that, with the same dimensions as the image. (this contains the small map-sized container for the new image)
Place another div INSIDE of the last to be the same size and position as your mapped area. (This will contain the original image - not darkened)
Place the image again INSIDE of the last div and position it so it lines up with the original image.
This should show something like what you're talking about.
If it's more complicated than this, I'm sure we will ALL need an example and all of the outcomes of these images. I don't think there's enough detail to give you a real answer.
I'm working on a website that hosts music, pictures, and videos. I currently have 4 pages, a title page, a music page, a video page and an image page. This works well, but I would like to be able to incorporate the ability to play music and look at pictures at the same time. To do this, I created one HTML document with each former page inside a div with a descriptive class name. Then, I wrote a javascript function that shows and hides each div when it is called, so the page acts like it's 4 pages but it isn't. So i embedded the music player in a footer div that stays open as music plays, meaning you can switch back and forth between each media type while keeping the music footer open and playing. This is where the problem lies. When this is done, the image magnifier jquery function I used on my image page no longer works correctly, UNLESS the image div is shown at the beginning when the page opens. It's only then that you can switch between media types and still magnify the pictures. If the title div is shown first (like it's supposed to be), and you go to try and magnify an image, it doesn't work.
At first I thought maybe some of the external javascript libraries were negatively interacting with each other, but then I happened upon what I explained above and now I'm just at a loss as to why the images need to be the first things displayed for the magnifier to work correctly.
The jquery code I'm using is called jQuery Image Magnify and it's made by Dynamic Drive.
Edit: The way that I'm hiding and show div's is with style="display:none" to hide and style="display:block" to show.
Interesting question. Probably because the element needs to be actually visible for the jQuery Image Magnify function to run. I'm willing to bet that plugin uses imageElement.onload for the image magnification handler or something like that, which I think doesn't work if the image element is hidden.
As far as a solution goes, try setting your image to visible at when the page first loads, maybe with left set to -9999 px or something silly like that so it's technically still "visible" but the user can't see it. Then, after the image has loaded and (hopefully) been magnified or whatever the plugin does, move it to be a child of the div its page is supposed to be on and get rid of the negative left value.
Has anyone got to some good code to zoom into an image using javascript?
I know I could just resize it etc but was being lazy and looking for something clever to zoom to different levels, move around when zoomed etc
Check this:
jQZoom
Zoomimage - jQuery plugin
jQuery ImgZoom
FancyBox
How big are the images?
If they are huge images you do them like google map style using this http://www.casa.ucl.ac.uk/software/googlemapimagecutter.asp
This really depends on what quality you are after. If you need a hires hiquality image with detailed zoom levels and proper interpolation you will need to write a backend service to serve up zoomed portions of your images. If you have no care for quality or speed, you could download the entire image and fit it to display inside a div absolutely positioned, offset for the area you want to view and sized as determined by your zoom level.
I would say you are probably after the first option. There are some tools already made for this, I persoanlly havnt used any of the tools; I am sure othes will post links to others you can try; I have written my own service and client. I cant go into the exact details as its proprietary, but I can give you an overview of what I do.
I have an asp.net generic handler that takes a query string denoting which image (by an id) and the coordinates to zoom on and the target image size. I have the service load the image and crop and resize it (its more complicated than that as I have many optimizations and preparsing when the file is originally uploaded, such as multiple cross sections of the file for faster serving when zooming, but what I describing here is the basics).
That service simply returns type image/jpeg and sends the image.
On the client side I have written a marquee box control that allows the user to marquee an area on the image they want to zoom in on. they marquee the area and click zoom. This then calculates the offsets into the image of the selected coordinates based on the original image size and the viewable image size. I send hese coords to the handler previously mentioned.I load the the url with query string of the srvice into an Image object, and handle onload. If all went well i then swap that to the viewed image and updates all my client side variables for determining where on the image I am zoomed into and then it can be zoomed again or zoomed out or panned further from there.
Now i understand your lazy requirement, but i need to say that writing this is actually quite easy to do to get the basics going. the hardest part you will find is doing a select box. But then even that can be as simple as tracking two click. Top left of the zoom select marque and bottom right. Or not having a select box at all and have a zoom in and out only at predetermined intervals. I on my projects required a zoom box as its a fairly complex image analysis solution.
I hope this at least helpful and leads you to something useful.