I almost always use ShadowBox.js for modal effects. I have a requirement that I can't seem to pull off with ShadowBox and I wonder if anyone has another recommendation that could handle it, here are the requirements:
On a gallery page, the user will see all of the photos in the gallery, when they click to open them, a modal will popup with gallery specific nav (easy).
The modal will have the normal effect of the darkened content, but will have a sort of frame in which photos (and occasionally videos) will show.
The frame box will always be 900 pixels wide, and the inside images will have a max width of 800px.
The photos will be centered in the always 900 pixel frame with at least 50 pixels padding on each side, if, for example, the image is 600 pixels wide, the image will have 150 pixels on each side.
The photos will all be cropped and prepped before they are uploaded so that none will be more than 800 pixels wide.
I can easily set the dimensions in shadowbox, but that forces the image to be stretched, dumping the dimensions and using the standard init options gives me image resized modals.
Thanks in advance
Hmm, now I wonder if I have answered my own question, the photos are DB managed, so I could simply create an html template that holds a photo based upon a QS param, each time the modal opens an image, they would actually be opening the HTML page at 900px that holds the image.
Related
So I have a few images which have different sizes and aspect ratios. I want to create a modal gallery of square thumbnails of those images in a grid form. When the user clicks on a thumbnail, the image should pop up on the screen with its original aspect ratio. Kind of like how twitter's desktop website displays your media thumbnails on your profile on the top right, next to your twitter banner.
Now, I know how to do all of this except that I want each modal image to be contained(even cropped, and not overflowing) in a square thumbnail, and when the user clicks it, the actual image with its actual size/aspect ratio should pop up. I don't know how to create that square thumbnail modal window with the image not overflowing it.
So I have a large jpg, 12000px wide by 1000px height. I am looking to make a site the has the image at 50% size on page load, but when the user clicks on the image once, it zooms in to 100%, then on a second click, it zooms back out to original size.
Since the size of the image is so large, it would need to be draggable at both page load and during zoom state.
I have been playing around with this, but the code is not exactly what I am looking to do.
http://designshack.net/tutorialexamples/jQueryZoom/ZoomTest.html
Instead, I am looking to basically do the same thing as the zoomed in state of this site, minus the step of the click into the zoom state.
http://yogasmoga.com/women/run-jump-n-play-crop-462
If anyone has a plugin they have used, please let me know.
Don't. Easiest -especially if it's for a presentation- is to just use two images. image1.onclick -> show image2; image2.onclick -> show image1. Saves coding, does what you want.
I have seen some jQuery scripts that you can create photo gallery in a mosaic way. Like this one http://www.themepunch.com/codecanyon/megafolio/megafolio_dark.html or this http://www.themepunch.com/codecanyon/megafolio/megafolio_light.html
My photos have different sizes but most of them are bigger in width than height.
My goal is to automatically and randomly set the dimensions of a container for the image (and load the original image) instead of cropping them manually and set them as a thumbnail in different sizes.
For example, in first entrance img1.jpg it will be shown as 100x50 but upon refresh, the same image it may be shown as 50x100.
My question is how can I create this effect with CSS and javascript ?
Based on the links in your question, I see three types of images: vertical, horizontal and square images. Thus, not randomly sized.
Also, it appears to be nicely laid out in a grid layout. The width of the vertical images is half the width of a horizontal image, the height of a vertical image is twice the height of a horizontal images (so basically it's just flipped) and the square images are equal to the width of either the horizontal or vertical images.
By establishing a grid and column size, you can dynamically position containers containing the images and assigning them a shape, for a lack of a better term, and an orientation. With some jQuery you can then easily position them using the .css function, relative to the other containers.
Note: The thumbnails used in your example, are equal to the size of their container. This is also a good idea for you, seeing as how it will make sure you get the desired effect.
I am trying to resize all elements on a web page upon resizing the window. The background image needs to stretch along with draggable items, text boxes, font size, and other images. The draggable items needs to stay in the same place in proportion to the background image. Everything needs to maintain aspect ratio. I have tried numerous methods and none seem to work.
As far as the background image scaling to whatever is going on on the page, see my reply to this guys similar question.
resize the image to fit the dimensions of TD
as far as other objects changing but maintaining aspect rations you may want to look into css Media Queries.
good luck
I am trying to create a sideways slideshow of images. The panel that will contain the slideshow is exactly 1200px wide. At page load, PHP loads images inside this panel. The number of images is not always the same, and I don't want the slideshow to start unless the collective width of the loaded images exceeds the width of the 1200px container.
The problem is, all the images are of various sizes, everything from 150x100 to 1980x1200. The images are fit into the bar by setting their height to 50 and letting their width rescale automatically.
Now, creating this slideshow panel in any other programming language would be easy. I'm suffering here in javascript though, because I simply can't find ANY WAY of getting the new width of the images. They all read width: 0px using jQuery outerWidth()
I have even tried putting a div wrapper inside the 1200px panel, outside the images, hoping that div would automatically scale around the width of the images and give me their collective width, but instead it reads 1200px (jQuery outerWidth())
Is there any way of measuring their width?
Is there an easier way of doing this?
Any help appreciated
I'm guessing you're trying to get the widths when the document is ready, instead of after the images have loaded.
Try placing the code that gets the outerWidth() in $(window).load().
$(window).load(function() {
//get the image widths
});