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
Solved

Image Gallery Previous Next Buttons

Posted on 2010-11-19
16
756 Views
Last Modified: 2012-05-10
Hi,

I've been searching the web for some help for a while now but with no luck.

All I want is a Previous and Next button to appear over an the current image in the gallery, to go to the next or previous image.

I just want some simple html and css. I already done the javascript to go to the next an previous image.

Regards
0
Comment
Question by:garnett-dickinson
16 Comments
 
LVL 34

Expert Comment

by:Paul MacDonald
ID: 34173704
0
 

Author Comment

by:garnett-dickinson
ID: 34173772
No I'm just looking for the html and css
0
 
LVL 18

Expert Comment

by:Sudaraka Wijesinghe
ID: 34174333
In general what you need to do is relative position the container (i.e. DIV around your image or DIV with your image as background), and absolute position the elements you want to display over the image.
For Ex. in http://www.freedomteleworkers.com/ there are 2 up/down arrows at bottom right corner.

If you can show us the html/css you already got, would be able to help you more.
0
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 

Author Comment

by:garnett-dickinson
ID: 34174444
Hi,

This is my css code:
div.mainImage
{
	position: relative;
	overflow: hidden;
}

* html div.mainImage
{
	float: left;
}

div.controls a
{
	text-ident: -500px;
	overflow: hidden;
	outline: none;
	position: absolute;
	top: 0;
	right: 0;
	width: 45%;
	height: 100%;
	background-position: center center;
	background-repeat: no-repeat;
	background-image: url(../images/next.gif);
	opacity: 0;
	filter: alpha(opacity=0);
}

* html div.controls a
{
	height: 10000px;
	background-position: center 150px;
}

div.controls a.previous
{
	left: 0;
	background-image: url(../images/previous.gif));
}

div.controls a:hover
{
  opacity: 0.25;
  filter: alpha(opacity=25);
}

Open in new window


and this html code:
<div id="mainImage">
	<div id="controls">
		<a class="previous" href="javascript:previousImage();" title="Previous">Previous</a>
		<a class="next" href="javascript:nextImage();" title="Next">Next</a>
	</div>
	<img src="images/products/<%=arrProductImages(iImageNumber)%>" name="ProductImage" alt="<%=strProductName%>">
</div>

Open in new window


Thanks
0
 
LVL 18

Expert Comment

by:Sudaraka Wijesinghe
ID: 34175097
Ok, the main problem in CSS is that you are referring to 2 DIVs as div.mainImage and div.controls, but in your HTML mainImage and controls is the id of the DIV not the class. So it should be div#mainImage and div#controls

Also, position the div#controls, not the links in side it.
div#mainImage
{
        position: relative;
        overflow: hidden;
}

div.mainImage img
{
	position: absolute;
	top:0;
	left:0;
}

div#controls
{
	position: absolute;
}

Open in new window

0
 
LVL 3

Assisted Solution

by:cloud-9
cloud-9 earned 35 total points
ID: 34178363
Also, I believe from experience, that you need to "cancel out" the first absolute position property. Also you need to change the display property of anchors to block to change their dimensions. And you can also combine the background properties into a single if you choose:

div#controls a {
	display: block;
	text-ident: -500px;
	overflow: hidden;
	outline: none;
	position: absolute;
	top: 0;
	right: 0;
	width: 45%;
	height: 100%;	
	background: transparent url(../images/next.gif) no-repeat center center;
	opacity: 0;
	filter: alpha(opacity=0);
}
div#controls a.previous{
	right: auto;
	left: 0;
	background-image: url(../images/previous.gif));
}

Open in new window


If you can give more specifics about how you want these buttons to appear, I can give you more CSS.

0
 

Author Comment

by:garnett-dickinson
ID: 34187560
Thanks sudaraka and cloud-9 for you help, I have put your suggestions into my css code, however, even though I now get the images appearing, there are still dome things that are not quite right.

- The previous image is showing up as the next arrow.
- I am still getting 'Previous' and 'Next appearing above the image.
- Not working at all in IE.

Help please.

CSS code is now:
div#mainImage
{
	position: relative;
	overflow: hidden;
}

div#controls a
{
	display: block;
	text-ident: -500px;
	overflow: hidden;
	outline: none;
	position: absolute;
	top: 0;
	right: 0;
	width: 45%;
	height: 100%;	
	background: transparent url(../images/next.gif) no-repeat center center;
	opacity: 0;
	filter: alpha(opacity=0);
}

div#controls a.previous
{
	right: auto;
	left: 0;
	background-image: url(../images/previous.gif));
}

div#controls a:hover
{
  opacity: 0.25;
  filter: alpha(opacity=25);
}

Open in new window


HTML code is now:
<tr>
	<td align="center">
		<div id="mainImage">
			<div id="controls">
				<a class="previous" href="javascript:previousImage();" title="Previous">Previous</a>
				<a class="next" href="javascript:nextImage();" title="Next">Next</a>
			</div>
			<img src="images/products/<%=arrProductImages(iImageNumber)%>" name="ProductImage" alt="<%=strProductName%>">
		</div>
	</td>
</tr>

Open in new window


Also here's what it is looking like in FF and IE:
Screenshot
Thanks
0
 
LVL 18

Expert Comment

by:Sudaraka Wijesinghe
ID: 34194286
Can you post a link to your page?
0
 

Author Comment

by:garnett-dickinson
ID: 34195840
0
 
LVL 18

Expert Comment

by:Sudaraka Wijesinghe
ID: 34196164
You have an extra closing bracket in the css. that's causing the previous image to not display correctly.

for the problem with IE, try adding a DIV in the A tag (around the word) and setting the width/height on that instead of the A tag it self.  
div#controls a.previous
{
	right: auto;
	left: 0;
	background-image: url(../images/previous.gif)); /* <-- extra closing bracket here */
}

Open in new window

0
 

Author Comment

by:garnett-dickinson
ID: 34196312
Hi sudaraka,

Thanks for pointing out the extra closing bracket, that's sort the previous image.

However, not following you on the IE problem, still struggling to get my head round this kind of CSS.
Also, the words 'Previous' and 'Next' are still showing up when I hover over the relevant part of the image, how do I get rid of these.
0
 
LVL 18

Accepted Solution

by:
Sudaraka Wijesinghe earned 90 total points
ID: 34196487
I mean like this
<tr>
        <td align="center">
                <div id="mainImage">
                        <div id="controls">
                                <a class="previous" href="javascript:previousImage();" title="Previous"><div>Previous</div></a>
                                <a class="next" href="javascript:nextImage();" title="Next"><div>Next</div></a>
                        </div>
                        <img src="images/products/<%=arrProductImages(iImageNumber)%>" name="ProductImage" alt="<%=strProductName%>">
                </div>
        </td>
</tr>

Open in new window

div#mainImage
{
        position: relative;
        overflow: hidden;
}

div#controls a
{
        display: block;
}

div#controls a div
{
        text-ident: -500px;
        overflow: hidden;
        outline: none;
        position: absolute;
        top: 0;
        right: 0;
        width: 45%;
        height: 100%;   
        background: transparent url(../images/next.gif) no-repeat center center;
        opacity: 0;
        filter: alpha(opacity=0);
}

div#controls a.previous div
{
        right: auto;
        left: 0;
        background-image: url(../images/previous.gif);
}

div#controls a:hover div
{
  opacity: 0.25;
  filter: alpha(opacity=25);
}

Open in new window

0
 

Author Comment

by:garnett-dickinson
ID: 34198279
Thanks sudaraka for your help and putting it in plan English. However, this is not required now as my client didn't like this format and has asked for the previous and next Images to be displayed permanetly at the top of the page.
0
 

Author Comment

by:garnett-dickinson
ID: 34198296
Also thanks cloud9 for your help too.
0
 

Author Closing Comment

by:garnett-dickinson
ID: 34198317
The specification had change and I did not require any more help on this particular area. Thanks
0
 
LVL 18

Expert Comment

by:Sudaraka Wijesinghe
ID: 34198355
cool. np. thanks for the points.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

840 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