Skocz do zawartości
t9omek

galeria allegro

Polecane posty

Na jednej z aukcji allegro zauważyłem ciekawą galerie

8dd8215352528.png

Postanowiłem że spróbuje zrobić coś podobnego, niestety moja nie działa. Kiedy odpalam ją na serwerze jak zwykłą stronę to wszystko działa poprawnie, jednak kiedy wrzucam jako szablon allegro (allegro nie pokazuje żadnego błędu) nie działa kiedy klikam w jakieś zdjęcie to przenosi na górę strony ale zdjęcie nie jest zmienione.

 

http://t9omek.da7.mintsowy.pl/galeria/szablon.html

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<style>
<!--
body {
    margin: 30px;
    font-family: "Trebuchet MS", sans-serif;
    font-size: medium;
}

#pojemnik {
    width: 900px;
    margin: 0 auto;
	margin-top:25px;
}

#menuimg {
    width: 210px;
    float: left;
}

#content {
    width: 500px;
    float: left;
}

li {
    cursor: pointer;
	list-style-type: none;
}


table {
    border-collapse: collapse;

}


p, a, h1, h2, h3, h4, h5, h6, ul, li, ol {
	margin: 0px;
	padding: 0px;
	text-decoration: none;
	font-family:Calibri;
} 




a {
	color: red;
}

#warpper {
	width: 1198px;
	margin: 0 auto;
}



#mimg1{
width: 179px; 
height: 133px; 
background:url('img1.gif');
-moz-background-size:100% 100%; /* Firefox 3.x */
background-size:100% 100%;
background-repeat:no-repeat;
}
#mimg2{
margin-top:22px;
width: 179px; 
height: 133px; 
background:url('img2.gif');
-moz-background-size:100% 100%; /* Firefox 3.x */
background-size:100% 100%;
background-repeat:no-repeat;
}
#mimg3{
margin-top:22px;
width: 179px; 
height: 133px;
background:url('img3.gif');
-moz-background-size:100% 100%; /* Firefox 3.x */
background-size:100% 100%;
background-repeat:no-repeat;
}
-->
</style>


<div id="warpper">


 
 <div id="pojemnik">
  <ol id="menuimg">
    <li><a href="#" onclick="wymienTresc('1', 'content');"><div id="mimg1"> </div></a></li>
    <li><a href="#" onclick="wymienTresc('2', 'content');"><div id="mimg2"> </div></a></li>
    <li><a href="#" onclick="wymienTresc('3', 'content');"><div id="mimg3"> </div></a></li>


  </ol>
  <div id="content"><img src="img1.gif"></div>
</div>
 
</div>



<script>


var dane = new Array;

function wymienTresc(id, htmlid)
{
    document.getElementById(htmlid).innerHTML = dane[id];
}



dane[1] = '  <div id="content"><img src="img1.gif"></div>';

dane[2] = '   <div id="content"><img src="img2.gif"></div>';

dane[3] = '  <div id="content"><img src="img3.gif"></div>';
</script>

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

Wystarczy że javascript przeniosę na serwer i wszystko będzie działało ? czy jakoś inaczej powinienem to obejść ?

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

jak mógł bym taki efekt osiągnąć bez javascriptu, myślałem nad wykorzystaniem "hover" czy to dobry trop ?

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

Możesz sobie przecież podejrzeć źródło tej aukcji.

Kiedy to robię na dole jest pełno javascript :-)

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

Poszukaj w góglu "css gallery" albo "html5 gallery" i może znajdziesz fajne przykłady... :)

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

Coś zmajstrowałem

Wrzucam kod gdyby ktoś jeszcze potrzebował

<style>
<!--

* {
margin: 0;
padding: 0;
}
.css_gallery {
margin: 0 auto;
width: 720px; 
position: relative;
overflow: hidden;
}
.css_gallery ul {
list-style-type: none;
width: 200px; 
height: 500px; 
overflow: auto;
padding: 0;
float: left;
margin: 0 0 30px 0;
}
.css_gallery li {
display: block;
width: 152px; 
height: 152px; 
padding: 5px 20px 5px 0;
margin: 0;
}
.css_gallery li img {
border: 1px solid #000;
max-width: 599px;
max-height: 450px;
    margin-top: 10px;

}
.css_gallery li div {
display: none;
}
.css_gallery ul:hover li:first-child div {
display: none;
}
.css_gallery li:hover div
,.css_gallery ul li:first-child div
,.css_gallery ul li:first-child:hover div {
display: block;
position: absolute;
left: 220px; /* szerokosc <ul> + padding <ul> + 20px */
top: 0;
}

#mimg1{
width: 179px; 
height: 133px; 
background:url(http://zcox.pl/bodman/img1.gif);
-moz-background-size:100% 100%; /* Firefox 3.x */
background-size:100% 100%;
background-repeat:no-repeat;
}
-->
</style>





















<div class="css_gallery"> 
    <ul> 
        <li>
            <img src="img3.gif"  />
            <div>
                <img src="img2.gif" />
            </div>
        </li>
        <li>
            <img src="img3.gif"  />
            <div>
                <img src="img2.gif"  />

            </div>
        </li> 
        <li>
            <img src="img3.gif"  />
            <div>
                <img src="img2.gif"  />

            </div>
        </li> 

    </ul> 
</div>





















Niestety nie podam (bo nie zapisałem) źródeł z którym korzystałem

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

Znalazłem coś innego, jest problem z tym że nie pokazuje zdjęcia domyślnego. Czy ktoś wie jak to zmienić ?

  <section class="gallery">
    <nav>
      <ul>
        <li><a href="#on11e">One</a></li>
        <li><a href="#two">Two</a></li>
        <li><a href="#three">Three</a></li>
        <li><a href="#four">Four</a></li>
      </ul>
    </nav>
    <article id="on11e" class="target">
      <figure>
        <img src="http://placekitten.com/g/300/200" alt="Kitten 1">
      </figure>
    </article>
    <article id="two" class="target">
      <figure>
        <img src="http://placekitten.com/g/300/201" alt="Kitten 2">
      </figure>
    </article>
    <article id="three" class="target">
      <figure>
        <img src="http://placekitten.com/g/301/200" alt="Kitten 3">
      </figure>
    </article>
    <article id="four" class="target">
      <figure>
        <img src="http://placekitten.com/g/301/201" alt="Kitten 4">
      </figure>
    </article>
  </section>
 * { 
    margin: 0;
    padding: 0;
  }
  body {
    font-size: 15px;
    font-family: helvetica, arial, sans-serif;
    padding: 1em;
  }
  footer, section, article, header, aside, figure, nav {
    display: block;
  }
  nav {
    padding: 20px;
    z-index: 20;
    top: 0px;
    left: 0;
    background: #fff;
    position: absolute;
  }

  nav li {
    display: inline;
    padding-right: 1em;
  }
  nav a {
    background: #369;
    padding: 5px 10px;
    border-radius: 5px;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
  }
  nav a:hover, nav a:focus {
    background: #036;
  }
  footer {
    clear: both;
    font-size: 10px;
  }
  footer a {
    color: #000;
  }
  
  @media screen and (min-width: 400px) {

  .gallery {
    position: relative;
    height: 280px;
    width: 340px;
    overflow: hidden;
  }
  .target {
    position: absolute;
    top: 60px;
    left: -320px;
    height: 220px;
    width: 300px;
    -webkit-transition: 1s;
       -moz-transition: 1s;
        -ms-transition: 1s;
         -o-transition: 1s;
            transition: 1s;

 }
  .target:target {
    top: 60px;
    left: 20px;
  }
}

http://jsfiddle.net/codepo8/wsD9L/1/

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

Bądź aktywny! Zaloguj się lub utwórz konto

Tylko zarejestrowani użytkownicy mogą komentować zawartość tej strony

Utwórz konto

Zarejestruj nowe konto, to proste!

Zarejestruj nowe konto

Zaloguj się

Posiadasz własne konto? Użyj go!

Zaloguj się


×