9 berichten aan het bekijken - 1 tot 9 (van in totaal 9)
  • Q:
    Bijdrager
    verwijderd-profiel

    CSS / HTML image gallery — touch-vriendelijk

    Weer een HTML/CSS vraag van mij:

    Ik ben al een hele tijd aan het zoeken, maar kan het echt niet vinden.

    Ik laat op mijn website een aantal foto’s zien dmv een polaroid-effect.
    Voorbeeld:

    Dit is met hover, dus dit werkt natuurlijk niet op touch devices.

    De code die ik nu gebruik:

     
    	ul.photoGallery li a {
    		text-decoration: none;
    		color: black;
    		font-family: 'Caviar Dreams Bold Italic';
    	}
    	ul.photoGallery {
    		/* Internet Explorer 10 */
    		display: -ms-flexbox;
    		-ms-flex-pack: center;
    		-ms-flex-align: center;
    		/* Firefox */
    		display: -moz-box;
    		-moz-box-pack: center;
    		-moz-box-align: center;
    		/* Safari, Opera, and Chrome */
    		display: -webkit-box;
    		-webkit-box-pack: center;
    		-webkit-box-align: center;
    		/* W3C */
    		display: box;
    		box-pack: center;
    		box-align: center;
    		list-style: none;
    		/* a gradient background with wide diffusion is quite hard
    		to handle without Direct2D or better hardware strategies but
    		it could make the box-shadow effect more real at the same time.
    		Setting it as important we can be sure supported browser will use it
    		while other browser will use just the normal background color
    		*/
    		background: -webkit-gradient(radial, 45 45, 50, 50 10, 640, from(#444), to(#333)) !important;
    		background: #333;
    		text-align: center;
    	}
    	ul.photoGallery li {
    		position: absolute;
    		top: 50%;
    		left: 50%;
    		padding: 6px 6px 24px 6px;
    		background: #FFF;
    		width: 150px;
    		height: 130px;
    		/* box shadow is heavy as well if we need
    		to rotate it during the animation or if
    		we have not a flat background behind
    		The alpha channel needs to work a lot
    		but it gives 3D feeling    
    		*/
    		-moz-box-shadow:1px 1px 6px #222;
    		-webkit-box-shadow:1px 1px 6px #222;
    		box-shadow:1px 1px 6px #222;
    		/* to activate transiction FXs
    		this is all we need
    		specifying "all" means that 
    		the browser will try to resolve
    		and computate everything
    		z-index included
    		*/
    		-webkit-transition: all 500ms ease-in-out;
    		/* to create a better 3D feeling
    		z-index will be in a range from 0 to 10
    		this means while another pic is going
    		back to its position another rollovered one
    		will gradually reach higher z-index
    		*/
    		z-index: 0;
    		font-size: 0.5em;
    	}
    	ul.photoGallery li img {
    		width: 100%;
    		height: 100%;
    	}
    		/* each image will have a fake rotation
    		to emulate a disordered desk
    		It's not clear to me why we like so much
    		rotated stuff ... probably because we
    		like to put order without effort
    		and simply with an hover, or a click?
    		*/
    	ul.photoGallery li:nth-child(1) {
    		margin-top: -130px;
    		margin-left: -130px;
    		-moz-transform: rotate(30deg);
    		-webkit-transform: rotate(30deg);
    		transform: rotate(30deg);
    		-webkit-filter: blur(5px);
    	}
    	ul.photoGallery li:nth-child(1):hover {
    		z-index: 10;
    		/* original image size */
    		width: 640px;
    		height: 356px;
    		/* put the LI in the center (almost due to bottom padding) */
    		margin-top: -151px;
    		margin-left: -240px;
    		/* the effect is a "zoom" one, the shadow will be bigger */
    		-moz-box-shadow: 8px 8px 24px #111;
    		-webkit-box-shadow: 8px 8px 24px #111;
    		box-shadow: 8px 8px 24px #111;
    		/* and finally order via zero degrees rotation */
    		-moz-transform: rotate(0deg);
    		-webkit-transform: rotate(0deg);
    		-webkit-filter: blur(0px);
    		transform: rotate(0deg);
    		font-size: 1em;
    	}
    	ul.photoGallery li:nth-child(2) {
    		margin-top: -120px;
    		margin-left: -10px;
    		-moz-transform: rotate(19deg);
    		-webkit-transform: rotate(19deg);
    		transform: rotate(19deg);
    		-webkit-filter: blur(4px);
    	}
    	ul.photoGallery li:nth-child(2):hover {
    		z-index: 10;
    		/* original image size */
    		width: 550px;
    		height: 331px;
    		/* put the LI in the center (almost due to bottom padding) */
    		margin-top: -151px;
    		margin-left: -240px;
    		/* the effect is a "zoom" one, the shadow will be bigger */
    		-moz-box-shadow: 8px 8px 24px #111;
    		-webkit-box-shadow: 8px 8px 24px #111;
    		box-shadow: 8px 8px 24px #111;
    		/* and finally order via zero degrees rotation */
    		-moz-transform: rotate(0deg);
    		-webkit-transform: rotate(0deg);
    		-webkit-filter: blur(0px);
    		transform: rotate(0deg);
    		font-size: 1em;
    	}
    	ul.photoGallery li:nth-child(3) {
    		margin-top: -10px;
    		margin-left: -180px;
    		-moz-transform: rotate(-10deg);
    		-webkit-transform: rotate(-10deg);
    		transform: rotate(-10deg);
    		-webkit-filter: blur(3px);
    	}
    	ul.photoGallery li:nth-child(3):hover {
    		z-index: 10;
    		/* original image size */
    		width: 800px;
    		height: 450px;
    		/* put the LI in the center (almost due to bottom padding) */
    		margin-top: -151px;
    		margin-left: -240px;
    		/* the effect is a "zoom" one, the shadow will be bigger */
    		-moz-box-shadow: 8px 8px 24px #111;
    		-webkit-box-shadow: 8px 8px 24px #111;
    		box-shadow: 8px 8px 24px #111;
    		/* and finally order via zero degrees rotation */
    		-moz-transform: rotate(0deg);
    		-webkit-transform: rotate(0deg);
    		-webkit-filter: blur(0px);
    		transform: rotate(0deg);
    		font-size: 1em;
    	}
    	ul.photoGallery li:nth-child(4) {
    		margin-top: -50px;
    		margin-left: -80px;
    		-moz-transform: rotate(12deg);
    		-webkit-transform: rotate(12deg);
    		transform: rotate(12deg);
    		-webkit-filter: blur(2px);
    	}
    	ul.photoGallery li:nth-child(4):hover {
    		z-index: 10;
    		/* original image size */
    		width: 700px;
    		height: 469px;
    		/* put the LI in the center (almost due to bottom padding) */
    		margin-top: -151px;
    		margin-left: -240px;
    		/* the effect is a "zoom" one, the shadow will be bigger */
    		-moz-box-shadow: 8px 8px 24px #111;
    		-webkit-box-shadow: 8px 8px 24px #111;
    		box-shadow: 8px 8px 24px #111;
    		/* and finally order via zero degrees rotation */
    		-moz-transform: rotate(0deg);
    		-webkit-transform: rotate(0deg);
    		-webkit-filter: blur(0px);
    		transform: rotate(0deg);
    		font-size: 1em;
    	}
     
     
    <ul class='photoGallery'>
    			<li>
    				<img src='img/dubai_airport.png' width='640' height='356' />
    				<a href='http://www.dubaiairport.com'>Dubai International Airport</a>
    			</li>
    			<li>
    				<img src='img/dubai.png' width='550' height='331' />
    				<a href='http://en.wikipedia.org/wiki/List_of_tallest_buildings_in_Dubai'>Amazing building in Dubai</a>
    			</li>
    			<li>
    				<img src='img/emirates.png' width='800' height='450' />
    				<a href='http://emirates.com'>Emirates Airline</a>
    			</li>
    			<li>
    				<img src='img/silicon_valley.png' width='700' height='469' />
    				<a href='http://goo.gl/maps/T5c1t'>Silicon Valley</a>
    			</li>
    		</ul>
     

    Dit gebruik ik alleen voor schermen breder dan 960px. Ik ben opzoek naar een manier om het te doen voor touch-devices. Ik ben al een tijdje aan het zoeken maar kan het niet vinden. Het polaroid-effect hoeft niet, dat is ook niet mooi op kleinere schermen, maar ik zoek wel een manier om de foto’s mooi weer te geven. Een image-slider zegmaar. Het hoeft niet perse ‘geschoven’ te worden, maar het mag ook met pijltjes aan de zijkanten. Het gaat worden gebruikt voor schermen van 320 tot 960 breed.

    Ik heb al genoeg oplossingen gevonden, maar dat is allemaal met javascript. Ten eerste heb ik helemaal geen ervaring met javascript, maar ook werkt het niet met een ul, maar voor elke afbeelding een div, wat betekent dat m’n css code niet meer werkt.

    Kent iemand een mooie/goede image-slider voor touch-devices? En dan het liefst met een ul?

    Alvast bedankt

    EDIT// Zoiets als dit: http://codepen.io/bresson/pen/xtCuw zou goed zijn, maar ook deze werkt met een div voor elke image, waardoor mijn polaroid-code onbruikbaar is

    Ohja, nog een vraag. Is het beter om een div met een class of id om de ul heen te zetten dan de ul zelf een class of id te geven? Alle voorbeelden die ik tot nu toe heb gezien hebben er nog een div omheen, maar of daar voordelen aan zitten…?

    Bijdrager
    Shmoo

    (1)
    Je moet het eigenlijk heel simpel zien.

    Het enige dat je wilt doen is zorgen dat de foto omhoog komt wanneer je erop drukt wat eigenlijk niet meer is dan een soort pop-up ( populair lightbox effect van jaren geleden )

    http://zurb.com/playground/reveal-modal-plugin
    In de sidebar zie je een groene Demo button, druk daar eens op en schuif dan je scherm eens kleiner terwijl de modal pop-up openstaat. Precies wat je nodig hebt.

    De opmaakt van de afbeeldingen op het scherm kun je altijd zelf bepalen, wanneer het scherm kleiner wordt dan bijv. 960px kun je er via media queries een block-list van maken zodat ze netjes onder elkaar komen te staan.
    Alleen is de vraag natuurlijk of je dan nog wel een pop-up nodig hebt, vergeet niet dat mensen een tablet vaker dichter bij hun neus houden dan een computerscherm en zodra jij de afb. in een block-list onder elkaar gaat plaatsen de optimaliseer je de boel eigenlijk al voor tablet-/telefoon formaat.

    Er bestaat ook nog zoiets als dat Google gebruikt wanneer je zoekt naar afbeeldingen maar ik ben daar niet zo’n fan van. Dit kun je het beste gebruiken wanneer je albums met foto’s op een website toont.
    http://foundation.zurb.com/docs/components/clearing.html

    (2)
    Maakt verder niet uit omdat een div of nav element toch geen styling vanuit zichzelf heeft. Dus of je de class of id nu op de div/nav plaatst of op de unordered or oderded list maakt verder niet uit.

    Persoonlijk werk ik altijd op het hoogste element omdat het vaak gebruikt wordt als menu en die wil je meestal een achtergrond-kleur geven.

     
    <nav class="wrapper">
         <ul>
              <li></li>
              <li></li>
              <li></li>
         </ul>
    </nav>
     
    .wrapper { }
    .wrapper ul { }
    .wrapper ul li { }
     
    Bijdrager
    verwijderd-profiel

    Met dat wat Google gebruikt bedoel ik niet wat je op je computer ziet, maar op je telefoon, en dan pas wanneer je een plaatje aan hebt geklikt. Het is dus eigenlijk de bedoeling dat je er doorheen kan ‘swipen’.

    Ik gebruik inderdaad media queries. Zo heb ik voor grote schermen het polaroid effect, maar dat werkt niet op touch devices, en daar is het ook niet mooi.

    Ik bedoel dus eigenlijk zoiets: http://www.pixedelic.com/plugins/camera/ hier kan je doorheen swipen met je telefoon of tablet, in plaats van thumbnails. (Ik ga het waarschijnlijk ook alleen meer voor mobiele apparaten gebruiken.)

    Bijdrager
    Shmoo

    Ik denk dat jij dit zoekt.

    Startup Design Framework 2

    Vrij onderaan bij “More than Image”
    Dat is niets meer dan een normale slider die ook reageert op touch events ipv clicks. De rest is gewoon zoals elke andere slideshow zou werken, alleen afb. op een rijtje en de carrousel laten draaien.

    Bijdrager
    verwijderd-profiel

    Dat ziet er goed uit!

    Ik heb net Unslider geprobeerd, maar dat is echt alleen maar lagg op iOS.

    Hopelijk is dit op zo’n manier gedaan dat ik het polaroid-effect kan behouden zonder veel aan te passen.
    Ik ga er even mee bezig!

    Bijdrager
    verwijderd-profiel

    Oke, ik ben van het ‘slider-idee’ af. Op touch is het nooit precies wat je wilt dat het is.
    Ik ga de afbeeldingen wel mooi weergeven met CSS3 transitions.

    (Bijvoorbeeld http://css3.bradshawenterprises.com/cfimg/ demo2 hier)

    Maar heb nog even een vraagje. Beetje off-topic maar het heeft wel met touch te maken: waarom werkt bovenstaand voorbeeld wel op de iPhone, maar bijvoorbeeld ease-out niet? (Gelukkig is dit geen StackOverflow, dan had ik allang 500 downvotes gehad voor off-topic gaan;) )

     
    -webkit-transition: width 3s ease-out; 
    -moz-transition: width 3s ease-out;
    transition: width 3s ease-out;
     

    Dat werkt wel op de Mac, niet op iPhone en iPad.

    PS: Wat is OMT vreselijk traag vandaag

    Bijdrager
    Shmoo

    Ease-out moet gewoon werken hoor maar het kan zijn dat je iPhone nog bezig is met iOS stabiel te houden of andere bezigheden op de achtergrond waardoor hij het effect niet of te weinig laat zien.

    Ik heb hier iOS 6 ook super veel last van, sites blijken sinds iOS 7 ineens niets meer op snelheid te kunnen doen. Probeer de tijd van de transitoin maar eens te verlengen dan kun je beter zien of het werkt.

    En anders probeer je eens alle acties los te koppelen.
    -webkit-animation-timing-function: ease-out;

    Bijdrager
    verwijderd-profiel

    Het is opgelost. Ik weet niet hoe, maar het werkt nu wel.

    -webkit-animation: imageShadow 3s ease-out -3s infinite alternate forwards;

    Dit is 1tje die 3s duurt en oneindig doorgaat. -3s alternatie forwards om het omgekeerd terug te laten gaan.
    Hoe geef ik dit een delay van 3s die hij alleen aan het begin pakt?
    Ik heb op elke plaats 3s gezet maar het werkt niet. Of kan infinite geen delay krijgen?

    Bijdrager
    Shmoo

    Dit miss.?

    http://lists.w3.org/Archives/Public/www-style/2011May/0549.html

    Of probeer dit eens toe te voegen aan diezelfde class of eentje erboven.

    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);

    Dit forceert webkit tot het gebruik van de GPU 3D accelerator waardoor je vaker betere animaties krijgt die meer ‘smooth’ lopen.

9 berichten aan het bekijken - 1 tot 9 (van in totaal 9)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.