Skocz do zawartości


 

Zdjęcie

galeria allegro

galeria allegro galeria allegro html css

  • Proszę się zalogować aby odpowiedzieć
15 odpowiedzi na ten temat

galeria allegro

#1 t9omek

t9omek

    Regularny użytkownik

  • Użytkownicy
  • 90 postów
  • Imię:Tomek

Napisany 08 listopad 2015 - 21:04

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>


#2 Polib

Polib

    Nowy użytkownik

  • Użytkownicy
  • 9 postów

Napisany 08 listopad 2015 - 21:25

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



#3 t9omek

t9omek

    Regularny użytkownik

  • Użytkownicy
  • 90 postów
  • Imię:Tomek

Napisany 08 listopad 2015 - 21:33

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



#4 Kszysiu

Kszysiu

    Weteran WHT

  • WHT Pro
  • PipPipPipPipPipPipPipPip
  • 1423 postów
  • Skąd:Milanówek
  • Firma:Tiktalik.com
  • Imię:Krzysztof
  • Nazwisko:Wojciechowski

Napisany 08 listopad 2015 - 21:46

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

#5 t9omek

t9omek

    Regularny użytkownik

  • Użytkownicy
  • 90 postów
  • Imię:Tomek

Napisany 08 listopad 2015 - 21:50

w takim razie jak działa galeria którą proponują tutaj http://allegro.pl/sz...5757286257.html ?



#6 Polib

Polib

    Nowy użytkownik

  • Użytkownicy
  • 9 postów

Napisany 08 listopad 2015 - 22:11

bez javascriptu



#7 t9omek

t9omek

    Regularny użytkownik

  • Użytkownicy
  • 90 postów
  • Imię:Tomek

Napisany 08 listopad 2015 - 22:19

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



#8 Polib

Polib

    Nowy użytkownik

  • Użytkownicy
  • 9 postów

Napisany 08 listopad 2015 - 22:21

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



#9 Macsch

Macsch

    Stały użytkownik

  • Użytkownicy
  • PipPipPipPipPip
  • 291 postów

Napisany 08 listopad 2015 - 22:22

http://thecodeplayer...ized-thumbnails



#10 t9omek

t9omek

    Regularny użytkownik

  • Użytkownicy
  • 90 postów
  • Imię:Tomek

Napisany 08 listopad 2015 - 22:24

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

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



#11 Polib

Polib

    Nowy użytkownik

  • Użytkownicy
  • 9 postów

Napisany 08 listopad 2015 - 22:29

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


Edytowany przez Polib, 08 listopad 2015 - 22:30.


#12 t9omek

t9omek

    Regularny użytkownik

  • Użytkownicy
  • 90 postów
  • Imię:Tomek

Napisany 08 listopad 2015 - 23:33

Niestety ale to też nie działa w allegro



#13 Kszysiu

Kszysiu

    Weteran WHT

  • WHT Pro
  • PipPipPipPipPipPipPipPip
  • 1423 postów
  • Skąd:Milanówek
  • Firma:Tiktalik.com
  • Imię:Krzysztof
  • Nazwisko:Wojciechowski

Napisany 08 listopad 2015 - 23:42

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

#14 t9omek

t9omek

    Regularny użytkownik

  • Użytkownicy
  • 90 postów
  • Imię:Tomek

Napisany 09 listopad 2015 - 10:51

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 



#15 weborzech

weborzech

    Nowy użytkownik

  • Nowy
  • 0 postów
  • Imię:Agata
  • Nazwisko:Pałys

Napisany 09 listopad 2015 - 17:07

Dzięki za kod, przyda się. 



#16 t9omek

t9omek

    Regularny użytkownik

  • Użytkownicy
  • 90 postów
  • Imię:Tomek

Napisany 11 listopad 2015 - 21:30

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/








Także otagowane jednym lub więcej z tych słów kluczowych: galeria, allegro, html, css

0 użytkowników czyta ten temat

0 użytkowników, 0 gości, 0 anonimowych użytkowników