Vinnaren i pepparkakshustävlingen!
2018-04-04, 23:29
  #1
Medlem
För många år sedan skrev jag ett enkelt fotogalleri med popupfönster för eget behov. Det hade allt som behövdes men det var dock innan mobiler blev populära. Det fungerar perfekt idag men är ålderstiget och jag känner att jag borde uppdatera det men är ingen fan av "modern" webutveckling och vill inte installera att färdigt galleri med hundratals / tusentals rader bloat-kod. Hellre skriver jag det själv.

Vad krävs egentligen för att skriva ett minimalt simpelt fotogalleri som fungerar både på dator och i mobil, med swipe vänster & höger? I min värld inbillar jag mig att det borde gå långt under 100 rader Javascript-kod. (Läsning av klick, tangenter och gestures samt ett stycke div där bilden öppnas, inte många dussin rader kod där inte). Men de färdiga gallerier jag hittar (Photoswipe etc) är givetvis som vanligt ändlösa rader med minifierad kod som får mig att ledsna direkt. Ska det verkligen krävas? Isåfall är det ingen idé att jag försöker själv utan är väl bara att svälja förtreten och installera något åbäke, men det skulle kännas surt. Less is more!

Kommentarer?
Citera
2018-04-05, 05:00
  #2
Medlem
StefanHeterJags avatar
Tja, varför sitta och hitta på hjulet från början egentligen? Det är därför man använder sig av diverse frameworks. (t.ex. jquery och bootstrap) Speciellt om man vill få det flyta bra på alla olika sorters enheter, där folk redan tänkt till och löst det åt en på ett smidigt sätt, det är vältestat och uptodate. Då får man det responsiva på köpet utan att behöva grotta ner sig allt för mycket.

Jag skulle råda dig att köra nån jquery-plugin.
Bara att lägga en referens till jquery och sen välja och vraka.
Den här jquery-karusellen verkar nice:

http://kenwheeler.github.io/slick/
Klicka på "demo" för att se alla varianter man kan göra med exmpelkod
Klicka på "usage" för att se hur du sätter upp det. (t.ex. lägga in referens till slick-cssfil i böjan, jquery och slick-js-fil i slutet. Sen är det bara 4 rader kod för att ha en fungerande karusell.

Sen kan du lägga tiden på att fixa en egen style och fokusera på kontent/utseende istället för funktionalitet.

Men det är ju en smaksak.

Simpelt, enkelt och man kan fokusera på annat:
HTML-kod:
<html>
  <head>
  <title>My Now Amazing Webpage</title>
  <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
  <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
  </head>
  <body>

  <div class="your-class">
    <div>your content (t.ex. bild 1)</div>
    <div>your content (t.ex. bild 2)</div>
    <div>your content (t.ex. bild 3)</div>
  </div>

  <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script type="text/javascript" src="slick/slick.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function(){
      $('.your-class').slick({
        setting-name: setting-value
      });
    });
  </script>

  </body>
</html>
Citera
2018-04-05, 05:06
  #3
Medlem
StefanHeterJags avatar
Och sen för popupen när man klickar på bilden så tar man nån av de miljoner existerande LightBox-plugins eller fixar själv, den är ju inte så svår att rodda själv, men varför göra när folk redan gjort det åt en.
(Om inte karusellen redan har stöd för det)
http://dimsemenov.com/plugins/magnific-popup/
Citera
2018-04-05, 13:28
  #4
Medlem
Ja där kom det - jQuery Vet du hur många rader kod det är? Vet du hur många av de raderna som verkligen behövs för mitt lilla galleri? Jag ryser av obehag.

Ett problem (förutom allmän code bloat och webläsare som går på knäna) är att det måste underhållas. Hur många oupptäckta luckor för exploits finns i det gigantiska frameworket? Jag vill inte göra mig beroende av en tredjepartsprodukt som i framtiden kanske läggs ner och sätter mig på bar backe. Jag vill ha en website som har så lite kod att den aldrig behöver updateras, någonsin.
Citera
2018-04-05, 15:18
  #5
Medlem
StefanHeterJags avatar
Citat:
Ursprungligen postat av Innovativ
Ja där kom det - jQuery Vet du hur många rader kod det är? Vet du hur många av de raderna som verkligen behövs för mitt lilla galleri? Jag ryser av obehag.

Ett problem (förutom allmän code bloat och webläsare som går på knäna) är att det måste underhållas. Hur många oupptäckta luckor för exploits finns i det gigantiska frameworket? Jag vill inte göra mig beroende av en tredjepartsprodukt som i framtiden kanske läggs ner och sätter mig på bar backe. Jag vill ha en website som har så lite kod att den aldrig behöver updateras, någonsin.
"
Det är väl helt ok att ha den inställningen, men då får du ta konsekvenserna av det. Istället för att använda framework som är testat och buggrättas av tiotusentals personer årligen så får du lita på att du kan göra ett bättre jobb. Och sen beror det ju på hur du värdesätter din egen tid.

Och du sätts väl inte på backen. Ladda ner den js-fil du vill använda och sen kan du välja att använda den resten av livet eller uppdatera om du vill ha nya funktioner som tillkommer. Förstår inte problemet.

Och kör man minified/gzip compression så är det typ 28KB det handlar om som ska överföras till browsern. Ett dammkorn i rymden typ.


Men för att svara på din ursprungsfråga och med de kriterier du har så är ju en förutsättning för att göra sidan responsive att definiera upp viewports, det är första steget. Samt att definiera upp css:er så man arbetar med %-areor,inte fix width. Sen använda CSS media queries för att anpassa viewport efter den skärm innehållet ska visas i.
Om jag var dig skulle jag kanske gå till https://getbootstrap.com/docs/3.3/customize/ och kryssa ur allt utom Responsive utilities och dra ner och sen rensa bort ev. kvarvarande bloat för att ha något att starta från. Finns ju även väldigt lightweight boilerplates-css-filer för att få till responsive design.

Och ska du göra det själv helt från grunden, ja då finns det ju inga genvägar, då måste man läsa in kunskapen, koda, testa, osv.

Och vill man göra det uber-enkelt. så skiter man i alla viewports, responsive design osv. Har en väldigt enkelt uppbyggd sida där alla bilder ligger i en lång rad i nån containerdiv. Och som du säger har några rader javascript för att hantera klick på bild och scrollning.

Problemet med den lösningne tycker jag är att då sitter man med en gammal lösning när browsrarna uppdateras och ny funktionalitet tillkommer (som t.ex. swipe, vem vet vad för geasture-hantering osv som komme inom några år och då måste man bygga det själv, använder man framework så får man ny funktionalitet på köpet. Men det är en tradeoff mellan funktion/bloat och där har du ju valt redan)
Citera

Stöd Flashback

Flashback finansieras genom donationer från våra medlemmar och besökare. Det är med hjälp av dig vi kan fortsätta erbjuda en fri samhällsdebatt. Tack för ditt stöd!

Stöd Flashback