Aligning Images

Hello,

I have 4 images that when you click them a large image appears. I cant figure out two things:

1. How do get them to align next to each other rather than under one another.
2. How to move the "X" lower so when you actually click the image you can see it and do not have to scroll up.

Below is my CSS and HTML code and the test website is: http://doeringdesign.com/ED/#!/page_AP

CSS:
/*Eliminates padding, centers the thumbnail */
body, html {
padding: 0;
margin: 0;

}

/* Styles the thumbnail */

a.lightbox img {
height: 200px;
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0,0,0,.3);
margin: 0px 0px 0px 0px;
}

/* Styles the lightbox, removes it from sight and adds the fade-in transition */

.lightbox-target {

top: -50%;
width: 50%;
background: rgba(0,0,0,.7);
width: 50%;
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
overflow: hidden;
}

/* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */

.lightbox-target img {
margin: auto;
position: absolute;
top: 0;
left:0;
right:0;
bottom: 0;
max-height: 0%;
max-width: 0%;
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0,0,0,.3);
box-sizing: border-box;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}

/* Styles the close link, adds the slide down transition */

a.lightbox-close {
display: block;
width:50px;
height:50px;
box-sizing: border-box;
background: white;
color: black;
text-decoration: none;
position: absolute;
top: -80px;
right: 0;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}

/* Provides part of the "X" to eliminate an image from the close link */

a.lightbox-close:before {
content: "";
display: block;
height: 30px;
width: 1px;
background: black;
position: absolute;
left: 26px;
top:10px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}

/* Provides part of the "X" to eliminate an image from the close link */

a.lightbox-close:after {
content: "";
display: block;
height: 30px;
width: 1px;
background: black;
position: absolute;
left: 26px;
top:10px;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}

/* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */

.lightbox-target:target {
opacity: 1;
top: 0;
bottom: 0;
}

.lightbox-target:target img {
max-height: 50%;
max-width: 50%;
}

.lightbox-target:target a.lightbox-close {
top: 0px;
}

Open in new window



HTML:
<a class="lightbox" href="#1">
   <img src="images/AP_small1.jpg"/>
</a> 
<div class="lightbox-target" id="1">
   <img src="images/Sculptures/REPLICA OF AMERICAN PHAROAH.jpg"/>
   <a class="lightbox-close" href="#!/page_AP"></a>
</div>

<a class="lightbox" href="#2">
   <img src="images/AP_small2.jpg"/>
</a> 
<div class="lightbox-target" id="2">
   <img src="images/Sculptures/REPICA OF AMERICAN PHAROAH, III.jpg"/>
   <a class="lightbox-close" href="#!/page_AP"></a>
</div>

<a class="lightbox" href="#3">
   <img src="images/AP_small3.jpg"/>
</a> 
<div class="lightbox-target" id="3">
   <img src="images/Sculptures/REPLICA OF AMERICAN PHAROAH , II.jpg"/>
   <a class="lightbox-close" href="#!/page_AP"></a>
</div>

<a class="lightbox" href="#4">
   <img src="images/AP_small4.jpg"/>
</a> 
<div class="lightbox-target" id="4">
   <img src="images/Sculptures/REPLICA OF AMERICAN PHAROAH, IV.jpg"/>
   <a class="lightbox-close" href="#!/page_AP"></a>
</div>

Open in new window

WO2015Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
Please consider using code tags for your script. Highlight code then click the CODE Button in the toolbar - makes posts much easier to read and refer to.

To make the images side by side you just need to group your <div>'s together like this
<a class="lightbox" href="#1">
   <img src="images/AP_small1.jpg">
</a> 
<a class="lightbox" href="#2">
   <img src="images/AP_small2.jpg">
</a> 
<a class="lightbox" href="#3">
   <img src="images/AP_small3.jpg">
</a> 
<a class="lightbox" href="#4">
   <img src="images/AP_small4.jpg">
</a> 
<div class="lightbox-target" id="1">
   <img src="images/Sculptures/REPLICA OF AMERICAN PHAROAH.jpg">
   <a class="lightbox-close" href="#!/page_AP"></a>
</div>
<div class="lightbox-target" id="2">
   <img src="images/Sculptures/REPICA OF AMERICAN PHAROAH, III.jpg">
   <a class="lightbox-close" href="#!/page_AP"></a>
</div>
<div class="lightbox-target" id="3">
   <img src="images/Sculptures/REPLICA OF AMERICAN PHAROAH , II.jpg">
   <a class="lightbox-close" href="#!/page_AP"></a>
</div>
<div class="lightbox-target" id="4">
   <img src="images/Sculptures/REPLICA OF AMERICAN PHAROAH, IV.jpg">
   <a class="lightbox-close" href="#!/page_AP"></a>
</div>

Open in new window

Start there - if that gives you the desired effect we can look at moving the cross.

If it where me though I would do it slightly differently.

I would create the four <a> elements together as I have it above.
Then I would create a single popup that gets populated with the right image when the smaller image is clicked. This can also be "stored" inside the <a> but hidden. When you click that element you retrieve the src of the second image and inject it into the src of the single <img> in the popup.

We can explore that as well if you wish.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
WO2015Author Commented:
Hello,

I am open to try anything. This client reached out to me to edit a few things on a site they already had. This was one of the updates and the only way I knew how to make a image clickable to open it larger. I was having a hard time getting it correct though. If you know a better way, I am all ears! thank you.
*The alignment worked.
0
Julian HansenCommented:
Are you using a lightbox plugin - if not I would get one and use that.
Try going that route and post back if you get stuck - I am caught up in meetings the rest of the day so can't give code right now.
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

WO2015Author Commented:
No, this isn't a word press site. I am in no rush, just trying to get the close button X moved. I have messed with the CSS a lot and cant figure it out.
0
Julian HansenCommented:
Sorry - misunderstanding - plugin is a generic term that is used (in this case) to refer to a javascript / jquery plugin - not meant to refer to a WP plugin - which is something different.

A light box library (there are many out there) will automatically give you light box functionality (what you want with your images) out of the box. You setup your gallery of thumbs and target images and it handles the rest. Each lightbox uses a slightly different method so you would need to look around at what is out there, decide on which one you like then post back here and we can look at how you can integrate it to your page.
0
WO2015Author Commented:
Ok, thanks
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.