4 replies [Last post]
jess888
jess888's picture
Offline
Regular
Last seen: 6 years 3 weeks ago
Timezone: GMT-8
Joined: 2014-04-09
Posts: 11
Points: 15

I would like to have a slideshow use max height of a given browser window and have all images centered.
I got the slideshow working, but haven't been able to get the images to center.... Anyone? THANK YOU.

CSS:

*{
	margin:0;
	padding:0;
}
 
#container{
	height:108%;
	position:relative;
	margin-top: 10px;
}
 
#container .prevButton{
	height:72px;
	width:68px;
	position:absolute;
	top:50%;
	margin-top:-36px;
	cursor:pointer;
	z-index:2000;
	left:0;
	background-color: #FFFFFF;
}
 
#container .prevButton:hover{ background-position:left bottom;left:0;}
 
#container .nextButton{
	height:72px;
	width:68px;
	position:absolute;
	top:50%;
	margin-top:-36px;
	cursor:pointer;
	z-index:2000;
	background-position:right top;
	right:0
}
 
#container .nextButton:hover{background-position:right bottom;right:0;}
 
#container ul{
	width:absolute;
	height:90%;
	list-style:none outside none;
	position:relative;
	overflow:hidden;
}
 
#container li:first-child{
	display:list-item;
	position:absolute;
}
 
#container li{
	position:absolute;
	display:none;
}
 
.fullwidth {
    max-width: 93%;
    max-height: 93%;
}

HTML:

<div id="container">
            <ul>
              <li><img src="images/pv01.jpg" class="fullwidth" /></li>
              <li><img src="images/pv02.jpg" class="fullwidth" /></li>
              <li><img src="images/pv03.jpg" class="fullwidth" /></li>
              <li><img src="images/pv04.jpg" class="fullwidth" /></li>
              <li><img src="images/pv05.jpg" class="fullwidth" /></li>
            </ul>
          </div>
          <script src="jquery-1.4.2.min.js"></script>
          <script>
$(window).load(function(){
		var pages = $('#container li'), current=0;
		var currentPage,nextPage;
		var timeoutID;
		var buttonClicked=0;
 
		var handler1=function(){
			buttonClicked=1;
			$('#container .button').unbind('click');
			currentPage= pages.eq(current);
			if($(this).hasClass('prevButton'))
			{
				if (current <= 0)
					current=pages.length-1;
					else
					current=current-1;
			}
			else
			{
 
				if (current >= pages.length-1)
					current=0;
				else
					current=current+1;
			}
			nextPage = pages.eq(current);	
			currentPage.fadeTo('fast',1,function(){
				nextPage.fadeIn(2000,function(){
					nextPage.css("opacity",1);
					currentPage.hide();
					currentPage.css("opacity",1);
					$('#container .button').bind('click',handler1);
				});	
			});			
		}
 
		var handler2=function(){
			if (buttonClicked==0)
			{
			$('#container .button').unbind('click');
			currentPage= pages.eq(current);
			if (current >= pages.length-1)
				current=0;
			else
				current=current+1;
			nextPage = pages.eq(current);	
			currentPage.fadeTo('fast',1,function(){
				nextPage.fadeIn(2000,function(){
					nextPage.css("opacity",1);
					currentPage.hide();
					currentPage.css("opacity",1);
					$('#container .button').bind('click',handler1);				
				});	
			});
			timeoutID=setTimeout(function(){
				handler2();	
			}, 4000);
			}
		}
 
		$('#container .button').click(function(){
			clearTimeout(timeoutID);
			handler1();
		});
 
		timeoutID=setTimeout(function(){
			handler2();	
			}, 4000);
 
});
 
</script>

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 39 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Link?

It would be more productive, since we don't have your images, to have a link to the page.

It seems to me you could simply make the LI element full width (absolute positioning means they shrink-wrap their contents) and set {text-align: center;}

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

jess888
jess888's picture
Offline
Regular
Last seen: 6 years 3 weeks ago
Timezone: GMT-8
Joined: 2014-04-09
Posts: 11
Points: 15

Here it

Here it is:
http://puertovallartaparadisevilla.com/slideshow/slideshowfade.html

What code would I use to make the LI full width? Thanks.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 39 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

This appears to do

This appears to do it:

#container li {
  display: none;
  position: absolute;
  text-align: center;
  width: 100%;
}

You have a javascript error somewhere.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

jess888
jess888's picture
Offline
Regular
Last seen: 6 years 3 weeks ago
Timezone: GMT-8
Joined: 2014-04-09
Posts: 11
Points: 15

Thank you SO much, Gary.

Thank you SO much, Gary.