☰

» »

jQuery galerija

jQuery galerija

Ales47 ::

Hej... delam spletno stran za solo in hocem vstavit neko galerijo ampak mi ne uspeva... delal sem po navodilih ampak mi itak noce prikazati galerije.... ne kaze mi slik in pac galerijo okence...

To je ta galerija: http://www.serie3.info/s3slider/

Evo , moj index:

<html lang="en">
<head>
  <title></title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
  <link rel="stylesheet" href="css/grid.css" type="text/css" media="all">
  <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
  <script src="js/jquery.js" type="text/javascript"></script>
  <script src="js/s3Slider.js" type="text/javascript"></script>
  <script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script>
  <script type="text/javascript" src="js/cufon-yui.js"></script>
  <script type="text/javascript" src="js/Bell_Gothic_Std_500.font.js"></script>
  <script type="text/javascript" src="js/Bell_Gothic_Std_700.font.js"></script>
  <script type="text/javascript" src="js/cufon-replace.js"></script>  
  <!--[if lt IE 7]>
  	<script type="text/javascript" src="http://info.template-help.com/files/ie6_warning/ie6_script_other.js"></script>
  <![endif]-->
  <!--[if lt IE 9]>
  	<script type="text/javascript" src="js/html5.js"></script>
  <![endif]-->
  <?php
	session_start();
	include 'baza_inc.php';
	include 'class_lib.php';
  ?>
</head>

<body>
  <!-- header -->
  <header>
    <div class="header-bg">
      <div class="container_24">
      	<div class="logo">
        	<a href="index.html"><img src="images/logo.jpg" alt=""></a>
        </div>
        <nav>
          <ul>
          	<li><a href="index.php" class="current">Novice</a></li>
            <li><a href="index-1.html">Biografija</a></li>
            <li><a href="index-2.html">Forum</a></li>
            <li><a href="index-3.html">Albumi</a></li>
            <li><a href="index-4.html">Trgovina</a></li>
            <li><a href="index-5.html">Kontakt</a></li>
          </ul>
        </nav>
        <a href="#" class="rss">RSS Submit</a>
        <a href="#" class="main-banner"><img src="images/main-banner.jpg" alt=""></a>
      </div>
    </div>
  </header>
  <!-- content -->
  <section id="content">
  	<div class="container_24">
    	<div class="row">
      	<div class="wrapper">
        	<div class="grid_16">
          	<div class="box">
            	<h2>Zadnje <span>novice</span></h2>
              <div class="wrapper">
              	<img src="images/1page-img1.jpg" alt="" class="img-indent">
                <h4 class="alt"> <?php include 'zadnje_novice.php'; ?></h4>
              </div>
            </div>
          </div>
        	<div class="grid_8">
          	<?php include 'arhiv_leta.php'; ?>
          </div>
        </div>
      </div>
	  <div id="s3slider">
			<ul id="s3sliderContent">
				<li class="s3sliderImage">
					<img src="images/1.jpg" />
					<span>Your text comes here</span>
				</li>
				<li class="s3sliderImage">
					<img src="#" />
					<span>Your text comes here</span>
				</li>
				<div class="clear s3sliderImage"></div>
			</ul>

	</div>
      <div class="row">
      	<div class="wrapper">
      	  <div class="grid_16">
          	<h3>Entrepreneur connect discussion groups</h3>
            <h4>Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis parturient montes.</h4>
            <p><object style="height: 390px; width: 640px"><param name="movie" value="http://www.youtube.com/v/NJOIR0slR_c?version=3"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><embed src="http://www.youtube.com/v/NJOIR0slR_c?version=3" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="390"></object></p>
            <div class="wrapper p2">
            	<div class="grid_8 alpha">
              	<ul class="list1">
                	<li>Praesent vestibulum molestie lacusenean onu</li>
                  <li>Phase llus porta usce suscipit varius</li>  
                  <li>Katoque penatibus et magnis dis parturient</li> 
                  <li>Montes nascetur ridiculus musulla duiusce feu</li>
                </ul>
              </div>
            	<div class="grid_8 omega">
              	<ul class="list1">
                	<li>Giat malesuada odio. Morbi nunc odio</li>
                  <li>Uravida atcursus nec, luctus</li> 
                  <li>Bristique orci ac semuis ultricies phare</li>
                  <li>Donec accumsan malesuada orcion</li>
                </ul>
              </div>
            </div>
            <a href="#" class="button">More</a>
          </div>
      	  <div class="grid_8">
          	<h3>Browse by category:</h3>
            <dl class="list2">
            	<dt>What Is a Business Opportunity?</dt>
              <dd>Aenean nonummy hendrerit maur ishasellus ptausce.</dd> 
              <dt>Franchise vs. Biz Opps</dt>
              <dd>Suscipit varius mium sociis natoque penatibus et.</dd>
              <dt>How the Government Protects You</dt>
              <dd>Cum sociis natoque penatibus emagnis dis parturient.</dd>
              <dt>Evaluating a Potential Opportunity</dt>
              <dd>Watoque penatibu magnis dis parturient montes.</dd>
            </dl>
            <a href="#" class="button">More</a>
          </div>
      	</div>
      </div>
    </div>
  </section>
  <!-- footer -->
  <footer>
    <div class="container_24">
    	<div class="wrapper">
      	<div class="copy">ABC Company &copy; 2010 &nbsp; | &nbsp; <a href="http://www.websitetemplates.org">Website Templates</a> designed by <a title="Free Templates Online" href="http://www.freetemplatesonline.com">FTO</a> </div>
        <nav>
          <ul>
          	<li><a href="index.html" class="current">Home page</a></li>
            <li><a href="index-1.html">About Us</a></li>
            <li><a href="index-2.html">Solutions</a></li>
            <li><a href="index-3.html">Clients</a></li>
            <li><a href="index-4.html">FAQ</a></li>
            <li><a href="index-5.html">Contacts</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </footer>
  <script type="text/javascript"> 
	$.fn.s3Slider = function(vars) {       
        $(document).ready(function() { 
   $('#s3slider').s3Slider({ 
      timeOut: 4000 
   });
});
  </script>
  
</body>
</html>



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

#s3sliderContent {
   width: 410px; /* 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;
   filter: alpha(opacity=70); /* here you can set the opacity of box with text */
   -moz-opacity: 0.7; /* here you can set the opacity of box with text */
   -khtml-opacity: 0.7; /* here you can set the opacity of box with text */
   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;
}
/*==========================================*/


Nevem zakaj ne gre...

Hvala

Ales47 ::

Ok sem uspel narediti....ampak: kako zdaj npr to galerijo fixiram? npr neke slike ki je velika 966x321 , vstavim galerijo? ko sem normalno vstavil galerijo... je bila prevelika....

Arto ::

Ja najboljš bi blo če ročno resizaš slike. Al pa s php-jem.

Ales47 ::

bom se pozneje malo poigral stem... in javim.

hvala

Ales47 ::

problem je resen, galerija je tam kjer bi mogla biti, zdaj pa imam en drugi problem, slike se automatski menjavajo in ko se slika menja , skoci gor in potem opet normalno kaze.... samo ko se slika menja mi skoci za 1sekundo gor.

GALERIJA CSS:
body{
    font-family:arial
}
 
.clear {
    clear:both
}
 
#gallery {
    position:relative;
    height:360px
}
    #gallery a {
	float: left;
	position: absolute;
}
     
    #gallery a img {
        border:none;
    }
     
    #gallery a.show {
	display: inline;
	position: absolute;
	left: 9px;
	top: 153px;
	z-index: 500;
}
 
    #gallery .caption {
        z-index:600; 
        background-color:#000; 
        color:#ffffff; 
        height:100px; 
        width:100%; 
        position:absolute;
        bottom:0;
    }
 
    #gallery .caption .content {
        margin:5px;
		  
		
    }
     
    #gallery .caption .content h3 {
        margin:0;
        padding:0;
        color:#1DCCEF;
    }

Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
»

Kako narediti to stran "resposive"?

Oddelek: Izdelava spletišč		51022 (913) zzbil
»

Prikaz strani na različni resoluciji-Joomla

Oddelek: Izdelava spletišč		151933 (1661) kr?en
»

poravnava li elementov

Oddelek: Izdelava spletišč		82141 (2006) boss-tech
»

Wampserver in Firefox

Oddelek: Izdelava spletišč		61843 (1723) jonystar
»

dreamweaver css poravnava

Oddelek: Izdelava spletišč		51233 (1033) Tody

Več podobnih tem