Forum PHP.pl > Szukam skryptu do wizualizacji zdjęć

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Szukam skryptu do wizualizacji zdjęć

Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML

OsUcH

19.11.2012, 14:24:49

Witam,

poszukuje skryptu takiego jak wykorzystuje onet.pl do wizualizacji starych zdjęć - http://wiadomosci.onet.pl/regionalne/krako...,wiadomosc.html. Wie ktoś może jak to jest zrobione ?

pozdrawiam

Divinity

19.11.2012, 17:27:36

Rzuć okiem tutaj: http://www.queness.com/resources/html/befo...ter/plugin.html

Pozdrawiam ;]

OsUcH

20.11.2012, 13:10:54

dokładnie mi właśnie o to chodziło! dzieki !

Lapeno

17.02.2013, 00:04:15

Witam wszystkich, jestem tu nowy

Obecnie tworzę sobie stronę (swoją własną) i chcę na niej zrobić galerię. Mam już w sumie stworzoną w pewien sposób jednak chcę ją ulepszyć i tu mam problem. Otóż html i css znam dość dobrze(na tylę, że nigdy nie miałem problemów z tworzeniem czegokolwiek aż do teraz) JS i innych nie bardzo jednak znalazłem ciekawe rozwiązanie galerii - LightBox. Pobrałem ze stronki jak kazali ale nie znam tego języka więc metodą prób i błędów doszedłem do tego aby galeria się wyświetlała i działała poprawnie, jednak w mojej galerii chcę umieścić 6 obrazków. Włączając stronę photo.html widzimy 2 obrazki. Po kliknięciu w 1 z nich otwiera się on w LB i jest ok(z drugim obrazkiem jest tak samo) ale chcę dodać na stronie dwie strzalki. Po kliknięciu w prawą strzałkę chciałbym aby te 2 obrazki zniknęły i pojawiły się 2 następne ale za nic w świecie nie potrafię tego zrobić. Przeszukałem już chyba całe Google aby to rozwiązać;/ Proszę o pomoc.
Oto skrypt HTML:

[HTML] pobierz, plaintext 
<head>
<meta http-equiv="Content-type" content="text/html; charset=ISO-8859-2" />
<title>Lapeno</title>
<style>
 
* {margin: 0px; padding: 0px;}
#menu li {list-style: none; left:490px; top: 106px;}
#menu {height: 30px;}
#menu ul {visibility: hidden; position: absolute; left:100%; }
#menu li {float: left; padding-right: 40px; position: relative;} /* POZYCJA MIEDZY PRZYCISKAMI */
#menu li li {float: none; padding-top: 1px; width: 0px;} /* POZYCJA MIEDZY PRZYCISKAMI - PION */
#menu li:hover ul {visibility: visible;}
#menu a, #menu li:hover li a {display: block; font: 12px/30px verdana, sans-serif; text-decoration: none; padding: 0px 0px;} /* wielkość przycioskow */
#menu li li a {width: 140px;}
#menu li:hover a, 
#menu li:hover 
.menu:hover a{
 background:url('2.png');
 }
body
{
  background-color:#121212;
}
* {margin: 0; padding: 0;}
#fot li {list-style: none; left:820px; top: 743px;}
#fot ul {visibility: hidden; position: absolute; top: 100%; left: 0;}
#fot {height: 30px;}
#fot li {float: left; padding-right: 1px; position: relative;}
#fot li li {float: none; padding-top: 1px; width: 160px;}
#fot li:hover ul {visibility: visible;}
#fot a, #fot li:hover li a {display: block; font: 12px/30px verdana, sans-serif; text-decoration: none; padding: 0 10px; color: #fff;}
#fot li li a {width: 140px;}
#fot li:hover a, #fot li:hover li:hover a 
</style>
<link rel="Stylesheet" style type="text/css" href="style.css">
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
</head>
<body>
<div>
<link rel="icon" href="favicon.ico" />
<div id="line1"> </div>
<div id="line2"> </div>
<div id="header"> </div>
<div id="area"> </div>
<div id="linearea"> </div>
<div id="navi"> </div>
<div id="logo"> </div>
<div id="sw"> </div>
<div id="footer"> </div>
<div id="fb" style="position:absolute;left:0px;top:px;width:1260px;height:900px;z-index:31;" align="left">
<ul id="menu">
  <li><a href="index.html"><img src="images/h.png" alt="" align="top" border="0" style="position:absolute;left: 0px;top:0px;"></a>
  </li>
  <li><img src="images/p1.png" alt="" align="top" border="0" style="position:absolute;left: 90px;top:0px;">
 
  </li>
  <li><a href="kontakt.html"><img src="images/k.png" alt="" align="top" border="0" style="position:absolute;left: 220px;top:0px;"></a>
 
  </li>
</ul>
 
 
 
 
<div id="fb" style="position:absolute;left:390px;top:785px;width:100px;height:100px;z-index:31;" align="left">
 
  <a href=""><img src="images/fb.gif" alt="" align="top" border="0" style="position:absolute;left: 0px;top:0px;"></a>
 
 
 
</div>
<div class="section" id="example">
 
 <div class="imageRow" id="1" style="position:absolute;left:110px;top:-120px;width:900px;height:300px;z-index:31;" align="left">
 
 
 
	<div class="single">
  		<a href="images/examples/cyberfrog_large.png" rel="lightbox" title="Cyber Frog"><img src="images/examples/cyberfrog.gif" alt="" /></a>
  	</div>
	<div class="single">
  		<a href="images/examples/nike_large.png" rel="lightbox" title="Nike Island"><img src="images/examples/nike.gif" alt="" /></a>
  	</div>
 
 
</div>
 
</div>
</div>
 
 <!-- end #content -->
 
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery-ui-1.8.18.custom.min.js"></script>
<script src="js/jquery.smooth-scroll.min.js"></script>
<script src="js/lightbox.js"></script>
 
<script>
  jQuery(document).ready(function($) {
      $('a').smoothScroll({
        speed: 1000,
        easing: 'easeInOutCubic'
      });
 
      $('.showOlderChanges').on('click', function(e){
        $('.changelog .old').slideDown('slow');
        $(this).fadeOut();
        e.preventDefault();
      })
  });
 
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-2196019-1']);
  _gaq.push(['_trackPageview']);
 
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
 
</script>
</body>
</html>
[HTML] pobierz, plaintext

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.