Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Galeria w CSS - allegro - rozwiązany
michaf1994
post 11.07.2016, 13:42:08
Post #1





Grupa: Zarejestrowani
Postów: 67
Pomógł: 2
Dołączył: 17.07.2014
Skąd: Wielkopolska

Ostrzeżenie: (0%)
-----

Cześć
Widziałem gdzieś ostatnio kod żeby wstawić galerię na allegro.
Niestety nie mogę tego znaleźć.
Czy ktoś z Was może wie gdzie mogę taki znaleźć / ma taką galerię?

Głównie zależy mi na tym żeby było duże zdjęcie, a pod nim miniaturki, które po kliknięciu / najechaniu wyświetlają się jako duże zdjęcia (w tym dużym zdjęciu) i z ustawionym pierwszym zdjęciem jako głównym.

Ważne jest żeby opierało się to tylko na HTML i CSS bez innych technologii. Bez @media (allegro tez blokuje)

Edit 11.07.2016 - Rozwiązany

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .container {
  6.   margin: 0 auto;
  7.   position: relative;
  8.   width: 500px;
  9.   height: 400px;
  10.   background: #ffffff;
  11.   background-image: url("http://www.mwallpaper.com/images/battlefield_3_640x480_8099.jpg"); /* First image */
  12.   background-size: 640px 480px;
  13.   width: 640px;
  14.   background-repeat: no-repeat;
  15.   padding-top: 500px;
  16. }
  17. .thumbnail {
  18.   margin-left: 1px;
  19.   margin-right: 1px;
  20.   width: 100px;
  21.   height: 80px;
  22.   cursor: pointer;
  23.   display: inline-block;
  24. }
  25. .picture {
  26.   position: absolute;
  27.   top: 0;
  28.   right: 0;
  29.   width: 640px;
  30.   height: 480px;
  31. }
  32.  
  33. #thumbnail-1 {
  34.   background-image: url("http://www.mwallpaper.com/images/battlefield_3_640x480_8099.jpg"); /* image thumbnail */
  35.   background-size: 100px 80px;
  36. }
  37. #picture-1 {
  38.   background-image: url("http://www.mwallpaper.com/images/battlefield_3_640x480_8099.jpg"); /* image */
  39.   background-size: 640px 480px;
  40.   display: none;
  41. }
  42. #thumbnail-1:hover ~ #picture-1 {
  43.   display: block;
  44. }
  45.  
  46. #thumbnail-2 {
  47.   background-image: url("http://i1.tribune.com.pk/wp-content/uploads/2016/01/1034342-image-1453787012-930-640x480.jpg"); /* image thumbnail */
  48.   background-size: 100px 80px;
  49. }
  50. #picture-2 {
  51.   background-image: url("http://i1.tribune.com.pk/wp-content/uploads/2016/01/1034342-image-1453787012-930-640x480.jpg"); /* image */
  52.   background-size: 640px 480px;
  53.   display: none;
  54. }
  55. #thumbnail-2:hover ~ #picture-2 {
  56.   display: block;
  57. }
  58.  
  59. #thumbnail-3 {
  60.   background-image: url("http://media.breitbart.com/media/2016/04/game_of_thrones_season_6_jon_snow-640x480.jpg"); /* image thumbnail */
  61.   background-size: 100px 80px;
  62. }
  63. #picture-3 {
  64.   background-image: url("http://media.breitbart.com/media/2016/04/game_of_thrones_season_6_jon_snow-640x480.jpg"); /* image */
  65.   background-size: 640px 480px;
  66.   display: none;
  67. }
  68. #thumbnail-3:hover ~ #picture-3 {
  69.   display: block;
  70. }
  71. </style>
  72. </head>
  73. <body>
  74.  
  75. <div class="container">
  76.   <div class="thumbnail" id="thumbnail-1"></div>
  77.   <div class="picture" id="picture-1"></div>
  78.   <div class="thumbnail" id="thumbnail-2"></div>
  79.   <div class="picture" id="picture-2"></div>
  80.   <div class="thumbnail" id="thumbnail-3"></div>
  81.   <div class="picture" id="picture-3"></div>
  82. </div>
  83. </body>
  84. </html>
[HTML] pobierz, plaintext


Działa po najechaniu (hover).




Wersja z klikaniem gdzieś się blokuje. Poniżej zamieszczam kod. Może ktoś poprawi i będzie dla potomnych smile.gif

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .container {
  6.   margin: 0 auto;
  7.   position: relative;
  8.   width: 500px;
  9.   height: 400px;
  10.   background: #ffffff;
  11.   background-image: url("http://www.mwallpaper.com/images/battlefield_3_640x480_8099.jpg"); /* First image */
  12.   background-size: 640px 480px;
  13.   width: 640px;
  14.   background-repeat: no-repeat;
  15.   padding-top: 500px;
  16. }
  17. .thumbnail {
  18.   margin-left: 1px;
  19.   margin-right: 1px;
  20.   width: 100px;
  21.   height: 80px;
  22.   cursor: pointer;
  23.   display: inline-block;
  24. }
  25. .picture {
  26.   position: absolute;
  27.   top: 0;
  28.   right: 0;
  29.   width: 640px;
  30.   height: 480px;
  31. }
  32.  
  33. #thumbnail-1 {
  34.   background-image: url("http://www.mwallpaper.com/images/battlefield_3_640x480_8099.jpg"); /* image thumbnail */
  35.   background-size: 100px 80px;
  36. }
  37. #picture-1 {
  38.   background-image: url("http://www.mwallpaper.com/images/battlefield_3_640x480_8099.jpg"); /* image */
  39.   background-size: 640px 480px;
  40.   display: none;
  41. }
  42. #thumbnail-1:hover ~ #picture-1, #thumbnail-1:focus ~ #picture-1 {
  43.   display: block;
  44. }
  45.  
  46. #thumbnail-2 {
  47.   background-image: url("http://i1.tribune.com.pk/wp-content/uploads/2016/01/1034342-image-1453787012-930-640x480.jpg"); /* image thumbnail */
  48.   background-size: 100px 80px;
  49. }
  50. #picture-2 {
  51.   background-image: url("http://i1.tribune.com.pk/wp-content/uploads/2016/01/1034342-image-1453787012-930-640x480.jpg"); /* image */
  52.   background-size: 640px 480px;
  53.   display: none;
  54. }
  55. #thumbnail-2:hover ~ #picture-2, #thumbnail-2:focus ~ #picture-2 {
  56.   display: block;
  57. }
  58.  
  59. #thumbnail-3 {
  60.   background-image: url("http://media.breitbart.com/media/2016/04/game_of_thrones_season_6_jon_snow-640x480.jpg"); /* image thumbnail */
  61.   background-size: 100px 80px;
  62. }
  63. #picture-3 {
  64.   background-image: url("http://media.breitbart.com/media/2016/04/game_of_thrones_season_6_jon_snow-640x480.jpg"); /* image */
  65.   background-size: 640px 480px;
  66.   display: none;
  67. }
  68. #thumbnail-3:hover ~ #picture-3, #thumbnail-3:focus ~ #picture-3 {
  69.   display: block;
  70. }
  71. </style>
  72. </head>
  73. <body>
  74.  
  75. <div class="container">
  76.   <a href="#" class="thumbnail" id="thumbnail-1" tabindex="1"></a>
  77.   <div class="picture" id="picture-1"></div>
  78.   <a href="#" class="thumbnail" id="thumbnail-2" tabindex="2"></a>
  79.   <div class="picture" id="picture-2"></div>
  80.   <a href="#" class="thumbnail" id="thumbnail-3" tabindex="3"></a>
  81.   <div class="picture" id="picture-3"></div>
  82. </div>
  83. </body>
  84. </html>
[HTML] pobierz, plaintext


Ten post edytował michaf1994 11.07.2016, 16:46:39
Go to the top of the page
+Quote Post
« Następny starszy · Po stronie przeglądarki · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 15.06.2025 - 16:50
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn