html - Why won't my images load in my slideshow? -
i still building website , found layout on web. downloaded preview pack , have been editing reflects want.
yet have problem getting images load in slideshow. have 1 image @ moment first slide , want done before move other two.
here html
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>welcome kustum kostumes</title> <link rel="stylesheet" href="css/style.css" type="text/css" media="all" /> <!--[if lte ie 6]><link rel="stylesheet" href="css/ie6.css" type="text/css" media="all" /><![endif]--> <!--[if ie]><style type="text/css" media="screen"> #navigation ul li em { top:32px; } </style><![endif]--> <script src="js/jquery-1.4.1.min.js" type="text/javascript"></script> <script src="js/jquery.jcarousel.pack.js" type="text/javascript"></script> <script src="js/jquery-func.js" type="text/javascript"></script> </head> <body> <!-- header --> <div id="header"> <div class="shell"> <!-- logo --> <h1 id="logo"><a href="#">company name</a></h1> <!-- end logo --> </div> </div> <!-- end header --> <!-- slider --> <div id="slider"> <div class="shell"> <!-- slides --> <div class="slides"> <ul> <!-- slide --> <li> <div class="slide-info"> <h2><span>mascots</h2> <p>blah blah blah</p> <p>blah blah blah </p> </div> <span class="slide-image image1"></span> </li> <!-- end slide --> <!-- slide --> <li> <div class="slide-info"> <h2><span>props</h2> <p>blah blah blah</p> <p>blah blah blah. </p> </div> <span class="slide-image image2"></span> </li> <!-- end slide --> <!-- slide --> <li> <div class="slide-info"> <h2><span>armour</span> , more!!!</h2> <p>blah blah blah</p> <p>blah blah blah </p> </div> <span class="slide-image image3"></span> </li> <!-- end slide --> </ul> </div> <!-- end slides --> </div> </div> <!-- end slider --> <!-- slider nav --> <div id="slider-navigation"> <div class="shell"> <ul> <li><a href="#" class="active"><strong>about us</strong><em class="ico1"></em></a></li> <li><a href="#"><strong>services</strong><em class="ico2"></em></a> </li> <li class="last"><a href="#"><strong>contact</strong><em class="ico3"></em></a></li> </ul> </div> </div> <!-- end slider nav --> <!-- main --> <div id="main"> <div class="shell"> <!-- cols --> <div class="cols"> <div class="cl"> </div> <!-- col --> <div class="col"> <h3>blah blah blah</h3> <p>blah blah blah</p> <p>blah blah blah</p> </div> <!-- end col --> <!-- col --> <div class="col"> <h3>blah blah blah</h3> <p>blah blah blah</p> <p>blah blah blah</p> </div> <!-- end col --> <!-- col --> <div class="col col-last"> <h3>blah blah blah</h3> <p>blah blah blah</p> <p>blah blah blah</p> </div> <!-- end col --> <div class="cl"> </div> </div> <!-- end cols --> </div> </div> <!-- end main --> <!-- footer --> <div id="footer"> <div class="shell"> <a href="//www.etsy.com/shop/kustumkostumes?ref=offsite_badges&utm_source=sellers&utm_medium=badges&utm_campaign=en_isell_3"><img width="728" height="90" src="//img0.etsystatic.com/site-assets/badges/en/en_isell_3.png"></a> <!-- footer nav --> <div class="right"> <p> <a href="#">home</a> <span>|</span> <a href="#">services</a> <span>|</span> <a href="#">contact</a> </p> <p>copyright © abn 78 820 831 193</p> <p> <a href="http://www.kustumkostumes.com.au">http://www.kustumkostumes.com.au</a></p> </div> <!-- end footer nav --> </div> </div> <!-- end footer --> </body> </html> and here css style sheet
* { padding:0; margin:0; outline:0; } body { background:#000; font-family: arial, sans-serif; font-size:12px; line-height:20px; color:#252525; } input, textarea, select { font-family: arial, sans-serif; font-size:12px; } .notext { font-size:0; line-height:0; text-indent: -4000px; display:block; } img { border:0; } { color:#9d5f0e; text-decoration: underline; cursor:pointer; } a:hover { text-decoration: none; } .left, .alignleft { float:left; display:inline; } .right, .alignright { float:right; display:inline; } .cl { font-size:0; line-height:0; clear:both; display:block; height:0; } .al { text-align: left; } .ar { text-align: right; } .ac { text-align: center; } h2 { font-size:34px; line-height:34px; text-transform: uppercase; color:#fff; } h2 span{ color:#f4d359; } h3 { font-size:22px; line-height:24px; } h2, h3, #navigation, #slider-navigation, #footer { font-family: "trebuchet ms", arial, sans-serif;} h1#logo { font-size:0; line-height:0; width:716px; height:77px; float:center; } h1#logo a{ display:block; height:77px; text-indent: -4000px; background:url(images/banner1.jpg); } .shell { width:980px; margin:0 auto; } body { min-width:1030px;} #header { height:90px; background:url(images/header.gif); } #navigation { float:right; } #navigation ul{ float:left; list-style-type: none; padding-top:37px; font-size:14px;} #navigation ul li{ float:left; display:inline; height:21px; background:url(images/nav-border.gif) repeat-y right 0; padding:0 20px 0 0; margin-right:20px; position:relative; } #navigation ul li.last{background:transparent; padding-right:0; margin-right:0; } #navigation ul li a{ float:left; color:#fff; text-decoration: none;} #navigation ul li em { width:90px; height:20px; background:url(images/nav-hover.gif) no-repeat 0 -200px; position:absolute; top:33px; left:-55px;} #navigation ul li.last em { left:-45px;} #navigation ul li span { font-size:0; line-height:0; width:0; height:0; position:absolute; left:50%;} #navigation ul li a.hover{ color:#f6cb44;} #navigation ul li a.hover em{ background-position:0 0} #slider { height:250px; background:url(images/slider.gif); } .slides { width:980px; height:298px; position:relative; overflow:hidden; color:#b6b6b6; } .slides .jcarousel-clip { width:980px; height:298px; position:relative; overflow:hidden; } .slides ul { width:980px; height:298px; position:relative; overflow:hidden; list-style-type: none;} .slides ul li{ float:left; display:inline; width:980px; height:260px; position:relative; overflow:hidden; padding-top:38px;} .slide-info { float:left; width:720px; padding-top:20px;} .slide-info h2{ padding-bottom:20px;} .slide-info p{ padding-bottom:15px;} .slide-image { float:right; width:219px; height:240px; } .image1 { background:url(images/untitled-1.png); } #slider-navigation { height:67px; background:url(images/slider-nav.gif); } #slider-navigation ul{ list-style-type: none; position:relative; width:1003px; margin-right:-23px; height:67px;} #slider-navigation ul li{ float:left; display:inline; position:relative; margin:-35px 95px -22px 0;} #slider-navigation ul li.last{ margin-right:0;} #slider-navigation ul li a{ float:left; width:171px; height:79px; background:url(images/slide-button.png) no-repeat 0 0; position:relative; left:-10px; color:#686767; font-size:14px; text-decoration: none; font-weight: bold; padding:45px 0 0 100px;} #slider-navigation ul li strong { display:block; font-size:23px; line-height:23px; color:#fff;} #slider-navigation ul li em{ position:absolute; top:43px; left:20px; } #slider-navigation ul li em.ico1 { width:58px; height:59px; background:url(images/ico1.png); left:28px;} #slider-navigation ul li em.ico2 { width:41px; height:61px; background:url(images/ico2.png); left:36px;} #slider-navigation ul li em.ico3 { width:71px; height:64px; background:url(images/ico3.png)} #slider-navigation ul li a.active, #slider-navigation ul li a:hover { background:url(images/slide-button-active.png); color:#a6a6a6; } #slider-navigation ul li a.active strong, #slider-navigation ul li a:hover strong{ color:#000; } #main { width:100%; background:#d3d4ce; padding:50px 0;} #main h3{ padding-bottom:10px; } #main p{ padding-bottom:15px; } a.more { font-size:10px; background:url(images/more.gif) no-repeat 0 center; padding-left:10px; } .cols {} .col { float:left; width:250px; margin-right:115px;} .col-last { margin-right:0;} #footer { height:92px; background:url(images/footer.gif); color:#6d6d6d; } #footer .shell{ padding-top:28px;} #footer .right { white-space:nowrap; font-size:14px; text-align: right;} #footer .right span{ padding:0 1px;} #footer .right a{ text-decoration: none; color:#939393;} #footer .right a:hover{ color:#f6cb44;} .footer-logo { float:left; width:169px; height:34px; background:url(images/footer-logo.gif); } and here ie6 style sheet
.image1 { background: none; (src='css/images/untitled-1.png', sizingmethod='image');} #slider-navigation ul li { background: none; filter: progid:dximagetransform.microsoft.alphaimageloader(src='css/images/slide- button.png', sizingmethod='image');} #slider-navigation ul li em.ico1 { background: none; filter: progid:dximagetransform.microsoft.alphaimageloader(src='css/images/ico1.png', sizingmethod='image');} #slider-navigation ul li em.ico2 { background: none; filter: progid:dximagetransform.microsoft.alphaimageloader(src='css/images/ico2.png', sizingmethod='image');} #slider-navigation ul li em.ico3 { background: none; filter: progid:dximagetransform.microsoft.alphaimageloader(src='css/images/ico3.png', sizingmethod='image');} #slider-navigation ul li a.active, #slider-navigation ul li a:hover { background: none; filter: progid:dximagetransform.microsoft.alphaimageloader(src='css/images/slide-button-active.png', sizingmethod='image');} edit: here javascript
$( document ).ready( function(){ $('.slides ul').jcarousel({ scroll: 1, wrap: 'both', auto: 6, initcallback: _init_carousel, itemfirstincallback:_first_callback, buttonnexthtml: null, buttonprevhtml: null }); $('#navigation li').hover( function(){ $(this).find('a').addclass('hover') }, function(){ $(this).find('a').removeclass('hover') } ); }); function _init_carousel(carousel) { $('#slider-navigation a').bind('click', function() { var index = $(this).parent().parent().find('a').index(this) + 1; carousel.scroll( index ); return false; }); }; function _first_callback(carousel, item, idx, state) { var index = idx - 1; $('#slider-navigation a').removeclass('active'); $('#slider-navigation a').eq(index).addclass('active'); }; here fiddle
https://jsfiddle.net/x3asv93x/
what bugs me while won't load images untitled-1.png, load image came preview back. why this? should able replace images in slideshow own.
please help
first of move scripts below footer:
<head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>welcome kustum kostumes</title> <link rel="stylesheet" href="css/style.css" type="text/css" media="all" /> <!--[if lte ie 6]><link rel="stylesheet" href="css/ie6.css" type="text/css" media="all" /><![endif]--> <!--[if ie]><style type="text/css" media="screen"> #navigation ul li em { top:32px; } </style><![endif]--> </head> ..... ..... ...... <!-- footer --> <div id="footer"> <div class="shell"> <a href="//www.etsy.com/shop/kustumkostumes?ref=offsite_badges&utm_source=sellers&utm_medium=badges&utm_campaign=en_isell_3"><img width="728" height="90" src="//img0.etsystatic.com/site-assets/badges/en/en_isell_3.png"></a> <!-- footer nav --> <div class="right"> <p> <a href="#">home</a> <span>|</span> <a href="#">services</a> <span>|</span> <a href="#">contact</a> </p> <p>copyright © abn 78 820 831 193</p> <p> <a href="http://www.kustumkostumes.com.au">http://www.kustumkostumes.com.au</a></p> </div> <!-- end footer nav --> </div> </div> <!-- end footer --> <script src="js/jquery-1.4.1.min.js" type="text/javascript"></script> <script src="js/jquery.jcarousel.pack.js" type="text/javascript"></script> <script src="js/jquery-func.js" type="text/javascript"></script> </body> </html> 
Comments
Post a Comment