galeria allegro

[t9omek 0]

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

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>

[Polib 0]

Jakby allegro pozwalało na javascript w kodzie aukcji to by były niezłe jaja.

[t9omek 0]

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

[Kszysiu 136]

http://allegro.pl/info/info102004_1/

[t9omek 0]

w takim razie jak działa galeria którą proponują tutaj http://allegro.pl/szablony-aukcji-allegro-interaktywna-galeria-i5757286257.html ?

[Polib 0]

bez javascriptu

[t9omek 0]

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

[Polib 0]

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

[Macsch 122]

http://thecodeplayer.com/walkthrough/css3-image-slider-with-stylized-thumbnails

[t9omek 0]

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

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

[Polib 0]

To wyłącz javascript w przeglądarce, a przekonasz się, że ta galeria dalej działa.

Edytowano Listopad 8, 2015 przez Polib (zobacz historię edycji)

[t9omek 0]

http://thecodeplayer.com/walkthrough/css3-image-slider-with-stylized-thumbnails

Niestety ale to też nie działa w allegro

[Kszysiu 136]

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

[t9omek 0]

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

[weborzech 0]

Dzięki za kod, przyda się.

[t9omek 0]

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/