Creating a image Container

Report · Jun 20, 2013

I'm trying to create an image container with 3 effects.

Previously, I had just created the look I wanted entirely in Photoshop as a .jpg

I think I am on the right track on how to create the actually body of the container and insert images. (These are different dimensions then the example photo)

<style>

.imageContainerABC {

position: relative;

left: 26px;

width: 584px;

height: 899px;

border: 8px solid #000

}

.imageContainerABC div {

position: absolute;

outline: 5px solid #000

</style>

</div>

There are 3 things I want to be able to do with the individual images in the container

Have a rollover effect where another image appears when the mouse hovers over the image
Have a black or colored transparencylayer (about 25% opacity) above the image until rollover
Have the image launch into a lightbox without having to create a photo album

Would someone please help me through how I could go about doing this?

Thank you.

Report · Jun 20, 2013

You are going to need to use javascript to achieve some of your effects. Also, you might not want to use the <IMG> tag at all to render your images. If this whole feature is going to be fixed-width (the width doesn't change) then you could move the image from the IMAGE tag to a background image on the containing div (i.e. in inline styling - <div style="top: 0px; left: 0px; width: 293px; height: 200px;background:url('/the-url-to-your-image') no-repeat scroll 50% 50%;"></div>

If you move the image to the backgound instead of using the IMG element, you open doors to possible CSS effects. With the amount of inline CSS styling you are using I think you are a CSS/Javascript novice so it might be hard to get this done without seeing your actual markup. Why don't you get your page/markup in order having it look how you want without the effects you want and then someone (possibly I) might be able to work up a solution for you but I don't want to spend a lot of time on this solution since your markup is only spec at this point. I don't want to come up with some long solution and then your markup or implementation differs and my solution is moot.

Get this thing to look how you want it without effects and post the URL for someone here to help you to create your effects with CSS and javascript.

Report · Jun 20, 2013

600x902- Photo Container size

10 px - outline size

8 px - inner dividing line size

72 px - top and bottom outline

I will be creating new layouts each time I create a new container based on the image and look I want to create. I'd like to be able to change the length and location of the inner dividing lines based on the images I use as well as the length of the container. Is that an issue?

Report · Jun 20, 2013

Don't worry about the height/length of your container. If marked up correctly your outer container will be as tall as the images inside it. So, you should really be concerned about the width of those dividers.

This won't be easy and I don't have time to work up a solution but it your goal would be to create better markup and use CSS to markup the different types of layouts you plan to have.

To get started implementing the lightbox you need to add a reference to the lightbox css in your page template, preferably inside the HEAD element on your page template:

Then, you also need to add a reference to the lightbox script (preferably this goes at the end of your page template just before the closing </body> tag:

Once those CSS and script references are in place you just need to wrap a link tag around your images that link to the URL of the full image. So,

becomes:

That should get your lightbox working. Now, your next goal is to probably figure out different versions of your photo layouts. For example, one instance might be "two images, equal width" and another might be "two images, one takes up 2-thirds of the space, the other 1-third", etc. Once you have some pre-ordained layout situations (instead of completely random, at-will layout situations) you'll be able to style it via CSS to appear how you would like.

You also want to trim down your markup a bit and stop using inline styles. I realize you are using inline styles on the inner images to control their position but you don't really need to do that if you have a few layout classes.

I've come up with a solution for you. Checkout this Fiddle:

http://jsfiddle.net/thetrickster/ATsYR/

If you keep my markup, use the CSS and Javascript you should be on the right path. You'll need to keep the aspect ratios the same and you can invent new layouts for the photos by adding something like .photo-set .one-fourth { width: 25% } to have 4 images in a row. But, some things to keep in mind.

For the first image in each block you'll notice that theres a class of "first". We have to markup the first image in each set to make sure the margin is removed from the left side on the first image in a block only. Other than that, it's making sure the images you prep have the same aspect ratio each time.

You'll also notice in the last block I have a class named "tall" added to the ".block" element. In the CSS I saw, when a ".block" is also ".tall" make the height taller. The images sometimes don't evenly get to the same height so you can get it close and adjust the height in the CSS of ".block" and ".block.tall" to a height that works for you. I'm cutting off anything over that height and it gets hidden to look even but you might lose a little on the bottom of some images.

This should get you on the right track. Best of luck.

Report · Jun 20, 2013

If you can't make sense of my code then you might want to look into this plugin I found which would probably work for you... it even has a lightbox hooked up to it: http://codecanyon.net/item/jquery-tiles-gallery/2281417

Adobe Community

Creating a image Container