Multidesk.be » Forums » Webdesign & graphics » Foto viewer(?) embedden in website

  • Pagina
  • 1 van 1
0 gasten lezen dit onderwerp.
^ Onderwerp geschreven door Flyingant op donderdag 1 december 2011 om 22:39:30.
Flyingant's avatar
Multiviteit: 124
Hey Multidesk,

Ik ben onlangs op het idee gekomen om een website te maken waarop ik heel wat foto's zal posten(zo'n 1000 of meer) maar er is één probleem ik weet niet hoe ik een foto viewer embed in mijn website.

Ik wil niet gewoon een galerij met thumbnails maar meer iets dat lijkt op de foto viewer van bv. facebook waarop je met de cursor keys kan bladeren in de foto's.

Ik heb heel wat voorbeelden gevonden op Google maar telkens ik de galerij probeer te embedden met de code die erbij staat lukt het niet.

Weet iemand van jullie een goede viewer voor op mijn website en liefst ook een goede tutorial met heel duidelijke instructies(ik ben nogal nieuw(slecht :P) op het gebied van websites/html enz)

Dus gevraagd:

-Foto viewer die lijkt op die van facebook en die veel foto's aan kan

-Goede, duidelijke tutorial waarmee zelfs een leek op het gebied van websites het klusje kan klaren.

Alvast bedankt, groeten van flyingant!_O_
^ Reactie #1 geschreven door thekid op donderdag 1 december 2011 om 23:23:12.
thekid's avatar
Multiviteit: 5273
Moderator
hey flyingant

daar ik niet dezelfde voorbeelden aan u wil geven, zeg eens welke je reeds geprobeerd hebt :) want er bestaan er zoveel

alsook waar te integreren is steeds handig. Ook waar de bestanden staan is handig en hoe je ze wenst door te geven in je script/pagina is handig :)

en zo'n fotoviewers zijn ook eenvoudig zelf te schrijven, is enkel wat javascript om de keypresses te verwerken en wat mix tussen javascirpt/css en een server side scripting taal om de nodige foto's in te laden :)
"Human beings make life so interesting. Do you know, that in a universe so full of wonders, they have managed to invent boredom." - Death in Hogfather
^ Reactie #2 geschreven door Flyingant op vrijdag 2 december 2011 om 17:29:23.
Flyingant's avatar
Multiviteit: 124
Bedankt thekid voor het snelle antwoord.
De viewers die ik al heb geprobeerd zijn: Lightbox, Photo Viewer, photo_viewer(geen naam), Simpleviewer en Zenphoto.

Ik wil hem graag gewoon IN de pagina zetten maar als er een popup verschijnt met de viewer is het ook goed.

Ze zelf schrijven zal bij mij langs geen kanten lukken :p
Zoals ik al zei ben ik heel slecht op het gebied van programmeertalen enz.

Alvast bedankt!
^ Reactie #3 geschreven door thekid op zaterdag 3 december 2011 om 04:57:52.
thekid's avatar
Multiviteit: 5273
Moderator
heb zelf eens in actie geschoten :)

in uw css moet je de styles in deze html meenemen
in je pagina waar je de slide moet tonen moet de script referentie naar de correcte source vermeld staan

*edit* ge zult volgens dit voorbeeld nog steeds A-J afbeeldingen moeten hebben in dezelfde folder vanaf waar je het script uitvoert of met het correcte pad naar de afbeelding
CODE
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.         <head>
  4.                 <title>Picturegallery test</title>
  5.                 <script type="text/javascript" src="./pictureviewer.js"></script>
  6.                 <style type="text/css">
  7.                         .closedGallery { display: none; visibility: hidden;}
  8.                         .openGallery { z-index: 50; text-align: center; position: absolute; display: block; top: 50px; left: 50px; right: 50px; bottom: 50px; background-color: #666666;}
  9.                         .imageCounter { z-index: 5; text-align: right; position: absolute; display: block; bottom: 10px; right: 10px; background-color: #efefef; color: #000000; padding: 5px; font-size: 9px; }
  10.                         .galleryTitle { z-index: 5; text-align: left; position: absolute; left: 10px; top: 10px; padding: 10px; font-weight: 800; font-size: 16px; line-height: normal; color: #cfcfcf; }
  11.                         .galleryDescription { z-index: 5; text-align: left; position: absolute; left: 20px; top: 40px; padding: 10px; font-size: 11px; line-height: 14px; color: #efefef; font-style: italic; }
  12.                         .galleryImage { z-index: 1; position: absolute; left: 50%; margin-left: -320px; top: 50%; margin-top: -240px; width: 640px; height: 480px; border: solid #a0a0a0 1px; }
  13.                         .galleryBreadcrum { z-index: 5; position: absolute; right: 10px; top: 10px; }
  14.                 </style>
  15.         </head>
  16.         <body>
  17.                 <h1>Picture viewer tester</h1>
  18.                 <p>Click on the button to test the pictureviewer</p>
  19.                 <input type="button" value="showGallery" onclick="javascript:showGallery(1);" />
  20.                 <script type="text/javascript">
  21.                         currentGallery.images[currentGallery.images.length] = new galleryImage('./A.jpg', 'A picture', 'This is a description of picture A');
  22.                         currentGallery.images[currentGallery.images.length] = new galleryImage('./B.jpg', 'B picture', 'This is a description of picture B');
  23.                         currentGallery.images[currentGallery.images.length] = new galleryImage('./C.jpg', 'C picture', 'This is a description of picture C');
  24.                         currentGallery.images[currentGallery.images.length] = new galleryImage('./D.jpg', 'D picture', 'This is a description of picture D');
  25.                         currentGallery.images[currentGallery.images.length] = new galleryImage('./E.jpg', 'E picture', 'This is a description of picture E');
  26.                         currentGallery.images[currentGallery.images.length] = new galleryImage('./F.jpg', 'F picture', 'This is a description of picture F');
  27.                         currentGallery.images[currentGallery.images.length] = new galleryImage('./G.jpg', 'G picture', 'This is a description of picture G');
  28.                         currentGallery.images[currentGallery.images.length] = new galleryImage('./H.jpg', 'H picture', 'This is a description of picture H');
  29.                         currentGallery.images[currentGallery.images.length] = new galleryImage('./j.jpg', 'J picture', 'This is a description of picture J');
  30.                 </script>
  31.         </body>
  32. </html>
filename: test.html

en de javascript file die je nodig hebt is devolgende
CODE
  1. var currentGallery = {currentImage:0,maxImages:0,images:[],gallery:document.createElement('div')};
  2.  
  3. function galleryImage(src,title,description) {
  4.         this.src = src;
  5.         this.title = title;
  6.         this.description = description;
  7.         this.imageNode = new Image();
  8.         this.imageNode.src = this.src;
  9.        
  10.         this.Set = function(target) {
  11.                 var el = document.getElementById(target);
  12.                 if (el && el.src) {
  13.                        
  14.                         var w = parseInt(this.imageNode.width), h = parseInt(this.imageNode.height);
  15.                        
  16.                         if (w > parseInt(currentGallery.gallery.offsetWidth)-20 | h > parseInt(currentGallery.gallery.offsetHeight) - 60) {
  17.                                 // resize picture
  18.                                 var ow = parseInt(currentGallery.gallery.offsetWidth) - 20,
  19.                                         oh = parseInt(currentGallery.gallery.offsetHeight) - 60;
  20.                                 var rw = ow / w, rh = oh / h;
  21.                                 var r = rw > rh ? rh : rw;
  22.                                 var nw = w * r, nh = h * r;
  23.                                 w = nw; h = nh;
  24.                                 if (nw < 0 | nh < 0) {
  25.                                         setTimeout('currentGallery.images[currentGallery.currentImage].Set(\'' + target + '\')', 50);
  26.                                         return;
  27.                                 }
  28.                         }
  29.                         el.style.marginLeft = -(parseInt(w) / 2) + 'px';
  30.                         el.style.marginTop = -(parseInt(h) / 2) + 'px';
  31.                         el.style.width = w + 'px';
  32.                         el.style.height = h + 'px';
  33.                         el.src = this.imageNode.src;
  34.                 }
  35.         }
  36. }
  37.  
  38. function showGallery() {
  39.         if (currentGallery.images.length == 0) {
  40.                 alert('this category gallery contains no images!');
  41.                 showGallery();
  42.                 return;
  43.         }
  44.         currentGallery.maxImages = currentGallery.images.length;
  45.         currentGallery.currentImage = 0;
  46.         var msg = '<div class="galleryBreadcrum" id="galleryBreadcrum"><a href="javascript:CloseOnKey()">close</a></div>' +
  47.                           '<div class="galleryTitle" id="galleryTitle"></div><div class="galleryDescription" id="galleryDescription"></div>'+
  48.                           '<img class="galleryImage" onkeyup="javascript:onkeypress" id="galleryImage" src="' + currentGallery.images[currentGallery.currentImage].src +'" alt="gallerymain" />' +
  49.                           '<div class="imageCounter" id="imageCounter">1 of ' + (currentGallery.images.length) + '</div>';
  50.         try {
  51.                 document.body.appendChild(currentGallery.gallery);
  52.                 document.body.onkeydown = keyPressed;
  53.                 currentGallery.gallery.onkeydown = onkeypress;
  54.         } catch (exception) { }
  55.         currentGallery.gallery.innerHTML = msg;
  56.         currentGallery.images[currentGallery.currentImage].Set('galleryImage');
  57.         setInner('galleryTitle', currentGallery.images[currentGallery.currentImage].title);
  58.         setInner('galleryDescription', currentGallery.images[currentGallery.currentImage].description);
  59.         currentGallery.gallery.className = 'openGallery';
  60.         document.body.style.overflow = 'hidden';
  61.         currentGallery.gallery.style.top = (document.body.scrollTop + 50) + 'px';
  62.         currentGallery.gallery.style.bottom = -(document.body.scrollTop - 100) + 'px';
  63.         currentGallery.gallery.setAttribute('onkeydown', 'javascript:onkeypress');
  64.         setTimeout('currentGallery.images[currentGallery.currentImage].Set(\'galleryImage\')', 50);
  65. }
  66.  
  67. function NextImage() {
  68.         currentGallery.currentImage = currentGallery.currentImage + 1 >= currentGallery.images.length ? 0 : currentGallery.currentImage + 1;
  69.         currentGallery.images[currentGallery.currentImage].Set('galleryImage');
  70.         setInner('imageCounter', (currentGallery.currentImage + 1) + ' of ' + currentGallery.images.length)
  71.         setInner('galleryTitle', currentGallery.images[currentGallery.currentImage].title);
  72.         setInner('galleryDescription', currentGallery.images[currentGallery.currentImage].description);
  73. }
  74.  
  75. function setInner(el, txt) {
  76.         var elem = document.getElementById(el);
  77.         if (elem) {
  78.                 elem.innerHTML = txt;
  79.         }
  80. }
  81.  
  82. function PreviousImage() {
  83.         currentGallery.currentImage = currentGallery.currentImage - 1 < 0 ? currentGallery.images.length - 1 : currentGallery.currentImage - 1;
  84.         currentGallery.images[currentGallery.currentImage].Set('galleryImage');
  85.         setInner('imageCounter', (currentGallery.currentImage + 1) + ' of ' + currentGallery.images.length)
  86.         setInner('galleryTitle', currentGallery.images[currentGallery.currentImage].title);
  87.         setInner('galleryDescription', currentGallery.images[currentGallery.currentImage].description);
  88. }
  89.  
  90. function CloseOnKey() {
  91.         try {
  92.                 currentGallery.gallery.className = 'closedGallery';
  93.                 currentGallery.gallery.innerHTML = '';
  94.                 document.body.removeChild(currentGallery.gallery);
  95.                 document.body.style.overflow = 'auto';
  96.         } catch (exception) { }
  97. }
  98.  
  99. function keyPressed(e) {
  100.         if (currentGallery.gallery.className == 'openGallery') {
  101.             if (!e) var e = window.event;
  102.             if (e.keyCode == 38 | e.keyCode == 37) {
  103.                 // up or left
  104.                 PreviousImage();
  105.                 return false;
  106.             }
  107.             if (e.keyCode == 40 | e.keyCode == 39) {
  108.                 // down or right
  109.                 NextImage();
  110.                 return false;
  111.             }
  112.             if (e.keyCode == 27) {
  113.                 CloseOnKey();
  114.                 return false;
  115.             }
  116.    }
  117. }
filename: pictureview.js

en in bijlage het voorbeeld zelf:

Bijlage: 065f62a5b26b2003a1597006bea44ad4.zip
Deze tekst werd het laatst bewerkt voor 1.07 % door thekid op zaterdag 3 december 2011 om 05:01:22.
"Human beings make life so interesting. Do you know, that in a universe so full of wonders, they have managed to invent boredom." - Death in Hogfather
^ Reactie #4 geschreven door thekid op zaterdag 3 december 2011 om 15:47:52.
thekid's avatar
Multiviteit: 5273
Moderator
Omdat ik er mij vannacht nog wat makkelijk heb vanaf gemaakt, heb ik een kleine update gedaan :)

* klikken links of rechts van de foto (maar op de gallery zelf) doet nu ook vorige/volgende
* klikken naast de gallery op de body doet de gallery opnieuw weg
* add & clear toegevoegd, zodoende kan je verschillende galleries gemakkelijk op 1 pagina integreren
* bij resize van een venster resized hij nu ook direct de foto (in de vorige versie moest je nog wisselen van foto voor de resize te krijgen)
* voorbeeldje een beetje aangepast
* code bevat nu ook foto, zodoende is het een werkend voorbeeld :)
* en voor zover ik weet werkt het in ie7+ (allé als ik de comptabiliteitsmode mag geloven), firefox & chrome, ie6 heb ik hier niet meer :)

en nu het werkende voorbeeld, gewoon alles uitpakken en je kan direct naar de foto's kijken ('k heb de standaard windows 7 voorbeeldachtergronden gebruikt :))
Bijlage: e9c762996c968bad68dd1b53c5642c18.zip

*edit*
en om het gemakkelijk te maken, nog een programma om de gallery te maken via dos (gewoon naar de map gaan en daar het programma uitvoeren (kopieer het bvb in uw windows folder, dan kan je het via dos van overal oproepen)
het maakt de gallery voor u, dan moet je enkel nog de omschrijvingen aanpassen en de code kopieren of een script src referentie toevoegen naar dit nieuwe gallery bestand

Bijlage: 40bcf13790a6b481a0a74d8543aa0ec7.zip

creategallery /?:
http://www.multidesk.be/bijlage/b19065223ae554eeccb8804cadb7ef47.jpg
Deze tekst werd het laatst bewerkt voor 3.53 % door thekid op zaterdag 3 december 2011 om 16:37:47.
"Human beings make life so interesting. Do you know, that in a universe so full of wonders, they have managed to invent boredom." - Death in Hogfather
^ Reactie #5 geschreven door Kilian op zaterdag 3 december 2011 om 17:23:01.
Kilian heeft nog geen avatar toegevoegd
Multiviteit: 1629
Of kijk hier eens naar: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/#!prettyPhoto

Werkt met jQuery, en heeft eigenlijk vrij weinig aanpassingen nodig om foto's toe te voegen.
^ Reactie #6 geschreven door Flyingant op zaterdag 3 december 2011 om 19:32:35.
Flyingant's avatar
Multiviteit: 124
Thekid _O_ Dank je,

Ik ga het proberen, ziet er redelijk haalbaar uit :p
Bedankt voor de tutorial!

En Kilian die van jouw zal ik ook proberen om te zien welke beter bij mijn website past.
Ik zal jullie allebei een link met mijn website sturen wanneer hij klaar is dan kunnen jullie de viewer zelf zien.
^ Reactie #7 geschreven door Flyingant op zaterdag 3 december 2011 om 19:45:44.
Flyingant's avatar
Multiviteit: 124
@thekid
Een aantal vraagjes :) (ik ben een leek op het gebied van webdesign enz.)
Ten eerste hoe 'neem ik die styles op in mijn css', ik weet wat css is enz. maar ik weet niet hoe ik die stijlen opneem in mijn css.
Ten tweede hoe gebruik ik die javascipt code want ik weet er helemaal niets over.

Ik hoop dat je me kan helpen en geef alsjeblieft heel duidelijke stappen ofzo :)

Alvast bedankt
^ Reactie #8 geschreven door thekid op zaterdag 3 december 2011 om 20:14:48.
thekid's avatar
Multiviteit: 5273
Moderator
dus je kopieert deze in je css bestand
CODE
  1.  
  2. .closedGallery { display: none; visibility: hidden;}
  3. .openGallery { z-index: 50; text-align: center; position: absolute; display: block; top: 50px; left: 50px; right: 50px; bottom: 50px; background-color: #666666;}
  4. .imageCounter { z-index: 5; text-align: right; position: absolute; display: block; bottom: 10px; right: 10px; background-color: #efefef; color: #000000; padding: 5px; font-size: 9px; }
  5. .galleryTitle { z-index: 5; text-align: left; position: absolute; left: 10px; top: 10px; padding: 10px; font-weight: 800; font-size: 16px; line-height: normal; color: #cfcfcf; }
  6. .galleryDescription { z-index: 5; text-align: left; position: absolute; left: 20px; top: 40px; padding: 10px; font-size: 11px; line-height: 14px; color: #efefef; font-style: italic; }
  7. .galleryImage { z-index: 1; position: absolute; left: 50%; margin-left: -320px; top: 50%; margin-top: -240px; width: 640px; height: 480px; border: solid #a0a0a0 1px; }
  8. .galleryBreadcrum { z-index: 5; position: absolute; right: 10px; top: 10px; }
  9.  


zorg ervoor dat deze tag in tussen de <head> </head> tags in je html document
CODE
  1. <script type="text/javascript" src="./pictureviewer.js"></script>


indien je via het creategallery programma'tje een gallery.js bestand hebt aangemaakt, dan kan je dit script ook in dezelfde folder van je html bestand plaatsen en deze ook aanroepen in je head tag
CODE
  1. <script type="text/javascript" src="./gallery.js"></script>


op de foto of link waar je de weergave wilt starten plaats je een onclick event die de gallery oproept (de function name die je meegaf aan de creategallery, indien geen is het showMainGallery denk ik

op button
CODE
  1. <input type="button" value="Toon gallerij" onclick="javascript:showMainGallery();" />

of op een link
CODE
  1. <a href="#" onclick="javascript:showMainGallery();">Toon gallerij</a>


het scriptbestandje pictureview.js moet dus beschikbaar zijn voor uw pagina (in dezelfde map, of pas de relatieve locatie aan in je scripttag), en je moet de scr script tag mee importeren.

Je moet foto's toegevoegd hebben aan je gallery alvorens je deze kan oproepen. Je kan met een link het oproepen start of met een knop of waar je ook de onclick wenst te plaatsen.

je kan meerdere gallerijen gebruiken, zorg gewoon dat je niet meerdere keren de zelfde javascript function hebt (hernoem deze of geef bij het programma'tje een goeie functienaam mee (1 woord, daar geen spaties gebruiken)

de css die ik je trouwens gaf kan je aanpassen, je kan bvb de background van de openGallery op een transparante png instellen en zo een transparente box krijgen (dat je uw pagina op de achtergrond er nog door kan zien)
"Human beings make life so interesting. Do you know, that in a universe so full of wonders, they have managed to invent boredom." - Death in Hogfather
^ Reactie #9 geschreven door Flyingant op zaterdag 3 december 2011 om 22:03:38.
Flyingant's avatar
Multiviteit: 124
Heel erg bedankt thekid, ik ben er bijna zeker van dat het gaat lukken :)
_O_
^ Reactie #10 geschreven door thekid op zondag 4 december 2011 om 13:48:34.
thekid's avatar
Multiviteit: 5273
Moderator
graag gedaan, ik kan zo'n slideshow ook nog gebruiken bij andere projecten :D dus het was een beetje uit zelfbelang :)
"Human beings make life so interesting. Do you know, that in a universe so full of wonders, they have managed to invent boredom." - Death in Hogfather
  • Pagina
  • 1 van 1

Snel-antwoordformulier
Toon uitgebreid antwoordformulier Bericht nalezen Bericht plaatsen