How to center this Image in display Box?

**C_R_C** · 28 Apr 2010, 10:05 PM

O.k., this question started off in a previous thread but now it has changed, so I am making this a new post. Don't beat me up if this was the wrong thing to do, I just don't think people will answer my current question under the previous title of the question asked. So, here goes.

I am trying to get the s3slider to work properly on my site. It is a jquery plugin. It is there and it is working on my site that you can see if you CLICK HERE but I am having these two issues I would appreciate some help solving:

1) The image will not center. I am sure this is CSS related, but for the life of me I can't figure out how to get it to move.

2) There is suppose to be a black transparent box that pops up over the image with some text in it. There is some regular text that is showing up under the images, but because of the above alignment issue it is not visible. Here is the link to what it is suppose to look like CLICK HERE Pretty cool, huh...

Here is the link to the original information I used to add the plugin to my site CLICK HERE

Here is my current CSS style sheet info that I am using to control it:

#s3slider {
width: 721px; /* important to be same as image width */
height: 138px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
}

#s3sliderContent {
width: 721px; /* important to be same as image width or wider */
position: absolute; /* important */
top: 0; /* important */
margin-left: 0; /* important */

}

.s3sliderImage {
float: left; /* important */
position: relative; /* important */
display: none; /* important */
}

.s3sliderImage span {
position: absolute; /* important */
left: 0;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 374px;
background-color: #000;
opacity: 0.7; /* here you can set the opacity of box with text */
color: #fff;
display: none; /* important */
top: 0;

/*
if you put
top: 0; -> the box with text will be shown at the top of the image
if you put
bottom: 0; -> the box with text will be shown at the bottom of the image
*/
}

.clear {
clear: both;
}

#slider {
width: 721px;
height: 138px;
border: 2px solid #383E44;
position: relative;
overflow: hidden;
}

I would greatly appreciate some help on this, I am not an expert at any of this stuff. I am self taught and this is my first site, so please break it down nicely for me. I would be more than happy to get this thing working and have one of you smarter guys out there possibly offer it as a Mod for all to use. Think this is a great add on that looks professional

**niccol** · 28 Apr 2010, 10:21 PM

I think that you should read the instructions about implementing this .

1. You have a complete extra web-page imbedded in your page. It has the <html> and <body> tags etc. This is an error.

2. You do not have the styles in your page that are referenced in the stylesheet. For instance, #s3slider. This does not appear on your page. You have changed it to 'slider'. That, as the instructions say, is possible but you need to change the stylesheet rules too.

Go back to the instructions and go through them step by step.

Nick

**C_R_C** · 29 Apr 2010, 02:39 AM

O.k., I see part of what you are saying and I read more. Here is where I am at now. Apparently zencart will automatically load my javascript on every page since it is in "includes/templates/{template_directory}/jscript/". I think that is right but I do not see it when I look at the Pagesource on my site. Don't know if it matters that I am trying to get this to load iin "includes/languages/english/html_includes/define_main_page.php" or not.

Where would I do the initialization of the

$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});

javascript at??? Where can I put this on the page or how do I get it to load up for me some other way?

The code that I have on my page is now:

<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="images/slidebox1.jpg" />
<span class="top"><strong>Lorem ipsum dolor</strong><br />Consectetuer adipiscing elit. Donec eu massa vitae arcu laoreet aliquet.</span>

</li>
<li class="s3sliderImage">
<img src="images/slidebox2.jpg" />
<span class="top"><strong>Praesent</strong><br />Maecenas est erat, aliquam a, ornare eu, pretium nec, pede.</span>
</li>
<li class="s3sliderImage">
<img src="images/slidebox1.jpg" />
<span class="top"><strong>In hac habitasse</strong><br />Quisque ipsum est, fermentum quis, sodales nec, consectetuer sed, quam. Nulla feugiat lacinia odio.</span>

</li>

<div class="clear s3sliderImage"></div>
</ul>
</div>

<br />

</div>

My CSS to as follows:

#s3slider {
width: 721px; /* important to be same as image width */
height: 138px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
}

#s3sliderContent {
width: 721px; /* important to be same as image width or wider */
position: absolute; /* important */
top: 0; /* important */
margin-left: 0; /* important */

}

.s3sliderImage {
float: left; /* important */
position: relative; /* important */
display: none; /* important */
}

.s3sliderImage span {
position: absolute; /* important */
left: 0;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 374px;
background-color: #000;
opacity: 0.7; /* here you can set the opacity of box with text */
color: #fff;
display: none; /* important */
top: 0;

/*
if you put
top: 0; -> the box with text will be shown at the top of the image
if you put
bottom: 0; -> the box with text will be shown at the bottom of the image
*/
}

.clear {
clear: both;
}

Please be patient with me on this one. I want to get it working but I am about ready to call it quits and just ask for input on another similar image gallery that I can actually get to work without all this hassle...

**niccol** · 29 Apr 2010, 04:15 AM

No need to call it quits. You will get there.

At the moment you are not loading the javascript files.

The initialisation :

Code:

$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});

Needs to go in script tags and can go pretty much anywhere before the slideshow.

Sorry to be brief, I have to leave for the airport in a few minutes, but if you are still stuck later on I will work through it with you.

Don't stress - it will work fine.

**niccol** · 29 Apr 2010, 09:42 PM

Looks like you got it going. Well done.

**C_R_C** · 29 Apr 2010, 10:18 PM

Got it working

I am super excited to have finally got this thing working.

For anyone trying to do this type of thing. Here are some important things that I learned:

1) Pay special attention to the top part of THIS ARTICLE . Also, I did not understand where in the world to add the code to the header. Turns out as long as you put these files into the proper location, they get put in the head for you as long as you name them correctly.

For me, I had loaded the jquery file and s3slider into the proper location, but I overlooked the requirement to have the beginning of the file name to be jscript like this: /jscript_s3slider.js

2) Pay attention to what you are naming the div's, etc... For me I had copied some code that had just slider, but in my stylesheet I had s3slider. If it is not named correctly, the css can not control it.

3) Double check the size of the image to make sure that it is what you have entered. Somehow or another I ended up entering in the wrong size and it caused some alignment issues. Probably too many hours staring at the computer.

4) Ask the nice folks here on the forums for help, they are super cool and helpful.

A huge thank you to Nick!

Thread: How to center this Image in display Box?

Thread Tools

Search Thread

Display

How to center this Image in display Box?

Re: How to center this Image in display Box

Re: How to center this Image in display Box

Re: How to center this Image in display Box

Re: How to center this Image in display Box

Re: How to center this Image in display Box

Similar Threads

Review box wont display center

Image in center box

How to remove category display from center box

How do I get the home/login etc buttons to center and the attributes box to center?

Center Box display row column SNAFU (float?)

Posting Permissions