Responsive banner (bootstrap)

[shahied2015]

Beste Leden,

Ik zou graag jullie advies willen hebben betreft het maken van een banner.
Ik heb verschillende type banners gezien, foto met bewegende tekst, of alleen bewegende foto, volgens mij heet dit een carousel en er kan nog vormgegeven worden zoals faden.. etc...

Nu heb ik heel weinig ervaring met bouwen van websites, maar ga het toch proberen met hopelijk jullie hulp.

Website is op basis van Bootstrap, dus responsive.

Ik zou een banner willen plaatsen met foto's en of vaste tekst/bewegende tekst, weet alleen niet voor een zakelijke website wat jullie adviseren.
Banner moet wel full width zijn en Responsive.
Ook is mijn vraag welke formaat foto's heb ik nodig voor een full width banner.

Ik heb online templates gezien waarbij ik mijn foto's kan uploaden en stylen en deze dan uploaden op mijn server.

Maar omdat hier zeer ervaren mensen zijn, hopelijk weten jullie een oplossing voor mij?

Bedankt voor alle support!

 

[bron]

Je kunt eerst de BS carousel bekijken.
http://www.w3schools.com/bootstrap/bootstrap_carousel.asp

Als je wat anders wilt zijn er diverse mogelijkheden, om een paar te noemen
ad-gallery , fancybox2 , lightbox , prettyphoto , slimbox

Op de betreffende websites vind je de getting started en diverse examples.
Suc6. Have fun.

*** aanvulling

20 Responsive jQuery Lightbox
http://nowtheme.com/2013/06/responsive-jquery-lightbox-plugins/

30 Responsive jQuery Carousel
http://designscrazed.org/free-responsive-jquery-carousel-slider-plugins/

Have fun.

 

[shahied2015]

hey kerel,

Thx voor jou info!

Ik ben ook online verder gaan kijken en ben een Slider tegengekomen.
"jQuery Image Carousel Slider with Fancy JS Animations"
Deze is te vinden op:
http://www.jqueryscript.net/slider/...Slider-with-Fancy-JS-Animations-osSlider.html

Hopelijk zou jij mij ook hiermee kunnen helpen...

Nu heb ik het volgende staan op mijn site.
In mijn index bestand heb ik de volgende verwijzing.

<!-- JUMBOTRON -->
<div class="jumbotron">
	<?php include ('text/jumbotron.txt'); ?>
</div>

in de text map, bestand jumbotron.txt
heb ik verwijzing naar een afbeelding.

Bovenstaande is een banner ( afbeelding ) die continu weergegeven word op elke pagina.

Wat ik zou graag zou willen is de zie link van de slider die ik wil implementeren.
Wat er aangegeven word op de site zijn een aantal scripts... hoe en waar zou dit geplaatst moeten worden voor een prima slider/banner ?

Vorig x had je mij heel duidelijk geholpen, hopelijk zou je mij ook hiermee kunnen helpen...

Nogmaals, ik waardeer je hulp enorm.

Shahied

 

[bron]

Hi, het ziet er leuk uit, maar als ik een slider zou kiezen dan zou ik niet deze nemen om 2 redenen. De belangrijkste reden is dat deze slider niet "responsive" is. Dit kan je zien in de demo door je browser smaller te maken (op een pc). Bootstrap is namelijk wel responsive zodat het geschikt is voor pc, tablet en smartphone. De tweede reden is de somaliaanse uitleg in dit script en dan vertrouw ik het sowieso niet.

Tip: zoek in Google naar "responsive slider" voor een slider die je in Bootstrap kan gebruiken.

 

[shahied2015]

Dank je wel voor je feed, was een paar dagen weg, vandaar nu mijn reactie.

Ik ben met de officiele bootstrap carousel bezig...
Moet denk ik nu wel lukken.

Thx kerel!

 

[shahied2015]

wat is jullie advies betreft de formaat foto voor een full width banner?

hoogte/breedte

ik heb nu de Jumbotron script in mijn index staan dit kan ik aanpassen naar de carousel script of adviseren jullie mij dit te laten staan voor de slider?

 

[bron]

Dit is eigenlijk afhankelijk van jouw banner breedte en hoogte.

Jumbotron, slider, caroussel, of anders? Dit is afhankelijk van je doelgroep. Een slider voor een begrafenis website is rustig en eenvoudig maar bij een website voor een dance evenement juist niet.

Ik gebruik, afhankelijk van waar de foto's komen, verhouding 4:3 of 16:9. Belangrijk is de bestandsgrootte van de foto, die moet zo klein mogelijk zijn want daar doe je smartphone gebruikers een plezier mee. Je zal zelf een balans moeten zien te vinden tussen bestandsgrootte en kwaliteit. Ik kies meestal bij grote foto's 800x600 of 800x450 die responsive kleiner worden als de ruimte kleiner is. De compressie bij JPG zet ik meestal op 80%. Als je transparantie in je foto's nodig hebt dan heb je PNG foto's nodig die je ook goed kan comprimeren. Maar dit ook weer afhankelijk van de doelgroep. Als het een fotografie website is ga je uit van hoge kwaliteit foto's.