Can anyone point me in the direction of a jQuery slideshow/gallery plugin that matches these criteria (or can be customized to through setting its options)?
Can be inserted into a div - not a popup display
No border/thumbnails/filenames/buttons - when an element is being displayed, that's all you can see
I need to able able to set a max height and width for the gallery as a percentage of the page dimensions. If an image is being displayed, it needs to be re-sized to fit this whilst maintaining its aspect ratio.
Can display any type of element (although if it can only display images I'm still interested)
I've had a look at some plugins, but I can't find one that is suitable. Is there one? Thanks for reading.
You should look at Thickbox or lightbox.
You want to display it in a popup or not?
You can try Cycle plugin - I've used it many times and it's stable. For resizing the images according to the page's dimensions, you can do that before applying the plugin, either with PHP or jQuery.
Related
I need to use image map in my website, to add different links to each part of image.
But I have problems with its responsiveness. I couldn't change map area's size while resizing window.
Can anyone help me with this? The method is not important, I can use either Js or Css.
Update:
I used http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html for responsiveness, but it affects on map area coords. When I reload the page, map coords are all 0, those are being updated only after resizing the window.
Do anyone have this problem too?
Imagemap is a very Old way to create websites I preffer using photoshop image sÃlice and save as html maybe you should try it ir you will use non dynamic images that way you can fix width and height and a lot more
If you have the image saved as a vector image, you could save it as an SVG and use RaphaelJS. I've only recently picked it up but it is quite easy to use once you get the hang of it.
You can assign links, style and hover events to each node attribute, and Raphael allows you to set the viewBox so that it scales on resize (can't link as rank not high enough - help can easily be found on SO though)
Here are some examples of using RaphaelJS: LINK1 LINK2
And check out jsfiddle.net/AUNwC/294/ for example of each node having a responsive clickable area (resize window to check)
Using a masonry layout for this site and upon the first load each box overlaps. If you use any of the navigational items to sort or even just stay on "all" they rearrange themselves. Any ideas?
I don't have a reputation of 50 yet so I can't comment, but I wanted to share a couple tips that I stumbled upon in the past as I've used this plugin a lot, and it could help other people.
First off, I definitely use the imageLoaded function as Sarah mentioned, and not the onload. (https://github.com/desandro/imagesloaded)
Tip 1 -
To speed up the isotope plugin getting to work (useful if image sizes are big, or you have a lot of them), you load a placeholder image for each container, then after the imagesloaded plugin fires, you can have the isotope plugin get to work quickly. Then you can swap the real image in with a data- attribute that contains the real src url, just do so using the isotope callback (http://isotope.metafizzy.co/events.html). The only caveot is your images would need to have the same dimensions as the placeholder or the sizing of the containers could get messed up and overlap again.
Tip 2 -
I never actually did this, but one method I was thinking of using was to load the images as a background image of the container, set a height and with for the container (or at least the image part of it), set the images as background-size: cover; and then you don't need to worry about the images loading before the isotope plugin can get to work.
For anyone that's used the javascript plugin "ContentFlow" (http://www.jacksasylum.eu/ContentFlow/), do you have any idea how to change the size of the NON-ACTIVE elements? It seems that they're always half the height of the center image, but I'd like to make it something closer to 75% of the height.
I've been digging through the JS source code, but I can't seem to pinpoint the place where I adjust the size. Every time I adjust a value, it resizes all of the elements, including the active center image.
Please note, my "visibleItems" property is set to 1, as I only need to display one image on either side of the center image.
Thanks.
Try using the Gallery addon. There is a calcSize function in the addon JS that may help you calculate the size you want.
I'm creating a photo gallery website, and there are pages for browsing the photos, with a listing of thumbnails (yes just a regular photo site). The problem is that, I want thumbnails to fill up the available space (I know how to get that one). Actually, what I want to achieve is very similar to this: imagine you have a big number of (more than the screen area allows) thumbnails, and you have set overflow-y to hidden. The thumbs just fill up the space and it goes, off the screen. This would be what I wanted to have if the thumbs in the bottom didn't go off the screen. I need something more, let's say, "dynamic". I've got jQuery, but haven't been able to model the desired effect in my mind.
You should load the images dynamically as needed to improve performance. See the "Reduce the Number of DOM Elements" section in the Yahoo! Best Practices for Speeding Up Your Web Site. Use jQuery to check the size of the div in which you are rendering the images. Load just enough images to fill the div and then load more images on the fly as needed (on window resize or scroll). It is not clear to me exactly what you want to achieve so I can't be more specific than that.
Ok found the way into it anyway. I just load a big number of thumbs, set the overflow-y of the thumbs container to hidden, and by Javascript (actually jQuery), when I resize the window check if the thumbs top + height exceeds window's height. if it does, I simply hide that thumb, if it doesn't I simply show it. It works great!
Sorry maybe I was not clear in my original question below...
What I am looking for is a way to get a popup to move inside the windows viewable area (not actually create the popup itself). As seen in Google image's when you mouseover a image at the edge of the screen, somehow (which is what I want to know), the script detects that there is not enough space for the popup to appear in the window, so it pushes it inside the viewable range.
So I want to know how this is determined and calculated.
How can I use javascript to make sure
a popup div fits inside the window
when it appears?
A good example is google's image
search. When a image does not fit in
the window (either it is the far right
most or bottom most image), somehow it
is pushed inside when the popup is
opened with the mouseover event. How
is this calculated and how can I
create a script to calculate this.
you can use already build pop-up box/overlay window js library. Use jQuery js framework and go for any plug-in that provide you the same feature. I recommend you to use facybox http://fancybox.net/ with jQuery which makes this very easy.
There's no "use this code in your JS file" fix for this but the general idea is to reposition and override the offsets of the element in question, taking into account the viewport's bounds (to state the obvious).
For example, a couple of good tooltip plugins for jQuery support this behaviour, such as bassistance's jQuery Tooltip Plugin and also qTip. It might be worth digging into their source and seeing how they handle this.
This is one of the best i've come across http://gettopup.com/