Solved

Overlay image arrow buttons over main image, image can be variable height

Posted on 2011-03-02
6
528 Views
Last Modified: 2012-05-11
Hi Experts,

See image attached as example of how it should look.

I want to load an image inside a DIV. It will be a JPG image in a tag like: <img src="myimage.jpg"/>, the heights and widths of images will be unknown, the next image may be larger or smaller. Also the image *cannot* be a background image for the div.

Then, I want to load left and right buttons (PNG images) with a centered height over the top of this JPG image, indented 5px.

I just have no idea how to code this, my CSS skills are limited and I'm not allowed to do this in tables or with background images. They seem to use this in jquery galleries so it must be possible.

Please help! Thanks guys

/ Tobzzz example of desired end result
0
Comment
Question by:tobzzz
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
6 Comments
 
LVL 17

Expert Comment

by:selvol
ID: 35022737
http://www.huddletogether.com/projects/lightbox2/#exampleLightbox does this



Image group adds the next and previous.

Selvol
0
 
LVL 11

Author Comment

by:tobzzz
ID: 35032376
In the example you've posted the next and previous links are fixed heights from the top of the image box, not centred regardless of image height which is what I specifically need. Do you know if it's possible?
0
 
LVL 17

Accepted Solution

by:
selvol earned 500 total points
ID: 35033103
Yes, it is possible.

After downloading the file

Open the folder
Open the css folder
open lightbox.css with Notepad

Locate this line

#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
Replace it with this line

#hoverNav{ position: absolute; top: 40%; left: 0; height: 100%; width: 100%; z-index: 10; }

Play around with the 40% if not happy try other values like 30%
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }

#hoverNav{ position: absolute; top: 40%; left: 0; height: 100%; width: 100%; z-index: 10; }

Open in new window

0
 Database Backup and Recovery Best Practices

Join Percona’s, Architect, Manjot Singh as he presents Database Backup and Recovery Best Practices (with a Focus on MySQL) on Thursday, July 27, 2017 at 11:00 am PDT / 2:00 pm EDT (UTC-7). In the case of a failure, do you know how long it will take to restore your database?

 
LVL 11

Author Comment

by:tobzzz
ID: 35034862
For anyone wanting to do the same thing, the code is very simple, I don't know why no CSS experts answered this one. Below is the basic code for what you need to do.

Thanks to selvol for pointing me in the right direction.

/ Tobzzz
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<style type="text/css">
	#box1	{position:absolute}	
	#box2	{position:absolute; top:45%; left:0; width:100%}
	#prevLink {left:0; float:left; padding:5px; background:#fff}
	#nextLink {right:0; float:right; padding:5px; background:#fff}	
</style>	
</head>
<body>
<div id="box1">
	<img src="image.jpg" border="0" alt="" />
	<div id="box2">
		<a href="#" id="prevLink">Prev</a>
		<a href="#" id="nextLink">Next</a>
	</div>          
</div>
</body>
</html>

Open in new window

0
 
LVL 11

Author Closing Comment

by:tobzzz
ID: 35034903
Thanks for pointing me in the right direction. This was tricky to solve myself being a novice at CSS but I got there in the end.
0
 
LVL 17

Expert Comment

by:selvol
ID: 35037832
Glad you did get it.  I am glad you learned a bit.  

My method should have worked.

By addingthe CSS to the page you overwrite any values present in the external css.
Only if you place the added CSS after the external CSS.

HAve fun.

Thank you
Your Css overwrites the external CSS.
<LINK rel=stylesheet type=text/css 
href="css/lightbox.css" media=screen>
<style type="text/css">
	#box1	{position:absolute}	
	#box2	{position:absolute; top:45%; left:0; width:100%}
	#prevLink {left:0; float:left; padding:5px; background:#fff}
	#nextLink {right:0; float:right; padding:5px; background:#fff}	
</style>	
---------------------
External Css overwrites your CSS.

<style type="text/css">
	#box1	{position:absolute}	
	#box2	{position:absolute; top:45%; left:0; width:100%}
	#prevLink {left:0; float:left; padding:5px; background:#fff}
	#nextLink {right:0; float:right; padding:5px; background:#fff}	
</style>	
<LINK rel=stylesheet type=text/css 
href="css/lightbox.css" media=screen>
-------

Open in new window

0

Featured Post

Automating Terraform w Jenkins & AWS CodeCommit

How to configure Jenkins and CodeCommit to allow users to easily create and destroy infrastructure using Terraform code.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

630 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question