[OPGELOST] Gallery slider

[Haghorst]

Ik wil graag een slider maken met de Gallery module zoals hier te zien is:
http://www.stevenbonner.com/projects/toblerone/

Ik heb een stukje html gemaakt waarmee ik een image over de gehele breedte heb kunnen positioneren. Kan iemand mij helpen om dit dynamisch te maken?

Voorbeeld: http://tinyurl.com/sliderex

Daarnaast heb ik wat geprobeerd met het AE-Gallery maar daar kwam ik niet uit.

Alvast bedankt

[velden]

Met Gallery is dat prima te maken, maar je zult toch wel wat meer moeten voorbereiden.

Een html pagina, met één afbeelding erop is nog geen album natuurlijk.

Zoek eerst een javascript album script dat aan jouw wensen voldoet. Dan lees je de documentatie/voorbeelden ervan en gebruik je dat om je voorbeeld pagina (statisch) te maken. Ik zou denken met minimaal 3 images.

Als dat helemaal werkt zoals je wilt, dan kun je het vrij eenvoudig omzetten naar Gallery.

[Haghorst]

Thanks, ik weet vaak niet waar ik moet beginnen.
Ik ga aan de slag .

[staartmees]

De ShowTime-module doet hetzelfde en zelfs wat gemakkelijker.

[3dwebb]

http://www.woothemes.com/flexslider/ is een simpele responsive slider en werkt prima samen met de gallery module en is responsive. showtime is helaas nog niet responsive.

[staartmees]

Showtime 3.4 is wel degelijk responsive !!

[Haghorst]

@3dwebb Ik heb BXSlider gebruikt, ik zag je bericht te laat.
@staartmees Kan dit ook gebruikt worden icm de gallery module?

Maargoed ik heb het voor elkaar gekregen .
De vraag is nu dus hoe ik dit in cmsms krijg?

Hier de link hoe het er nu uit ziet:
http://tinyurl.com/slidertest02

Ik hoor het graag

[3dwebb]

Ah ok inderdaad. Ik heb showtime al een tijdje niet meer gebruikt. Het is naar mijn inziens dan het makkelijkste deze module te gebruiken.

[staartmees]

@Haghorst: Gallery en Showtime zijn 2 verschillende modules.

[Haghorst]

Ik zou graag de gallery module willen gebruiken omdat ik zo eenvoudig meerdere albums toe kan voegen.

De slider die ik heb gebruikt is volgens mij vergelijkbaar met de flexslider. Hij maakt ook gebruik van Jquery, ik vond hem omdat hij bovenaan stond bij google :
http://bxslider.com/

Ik hoor graag of er iemand een tip heeft hoe ik dit nu kan integreren met de gallery module.

[velden]

Neem een ander template als voorbeeld en bestudeer dat goed. Er staat waarschijnlijk alles in dat je moet weten.

Zoals bij bijna alle modules wordt er gebruik gemaakt van een template dat met een foreach-loop door (in dit geval) images/albums loopt.

Je weet nu wat voor output je wilt hebben:

Code: Select all

     <ul class="bxslider">
  <li><img src="images/portfolio/detail01.jpg" class="detailimage" /></li>
  <li><img src="images/portfolio/detail01.jpg" class="detailimage" /></li>
  <li><img src="images/portfolio/detail01.jpg" class="detailimage" /></li>
  <li><img src="images/portfolio/detail01.jpg" class="detailimage" /></li>
</ul>

dus simpel gezegd (pseudo code):

Code: Select all

<ul class="bxslider">
  {foreach image}
      {if image->isdir}
          {* doe niets*}
       {else}
           <li><img src="{$image->url}" class="detailimage" /></li>
       {/if}
  {/foreach}
</ul>

Bovenstaande werkt natuurlijk niet echt, maar geeft aan hoe het ongeveer zou moeten werken.

Verder kun je in Gallery nog apart in het template een stukje javascript en css opnemen.
Ik doe dat zelf nooit (maak een apart page template en apart css daarvoor) maar als je de voorbeeld-templates bekijkt zie je hoe het moet.

Tenslotte: haal je pagina straks door een html validor heen, want in je voorbeeld zitten al meerdere fouten.

[3dwebb]

Voor mijn mijn flexslider met captions in combinatie met de gallery module gebruik ik onderstaande code als gallery sjabloon.

Code: Select all

<div class="flexslider">
<ul class="slides">
{foreach from=$images item=image}
<li>
<img class="absolute" src="{root_url}/{$image->file|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" title="{$image->fileid}" />
<div class="flex-caption">
<h2>{$image->titlename}</h2>
{if !empty($image->comment)}<h3>{$image->comment}</h3>{/if}
{if !empty($image->fields.link.value)}
<h3>{foreach from=$image->fields item=imagefield}{$imagefield.link}{$imagefield.value}{/foreach}</h3>
{/if}
</div>
</li>
{/foreach}
</ul>
</div>

[Haghorst]

Ik heb zitten sleutelen. De list wordt nu weergegeven in de html, echter wordt het in zijn geheel niet omgezet naar de bxslider.

VOORBEELD
http://tinyurl.com/exampleslider

GALLERY SJABLOON

Code: Select all

<div id="detailcontainer">
	<div id="projectinfo">
		<h1>TITEL</h1>
		<p>BESCHRIJVING</p>
	</div>
	<div class="imagecontainer">
	<__script__ type="text/javascript">
     $(document).ready(function(){
      $('.bxslider').bxSlider();
    });
    </__script>
		<ul class="bxslider">
			{foreach from=$images item=image}
			<li>
				<img src="{root_url}/{$image->file|escape:'url'|replace:'%2F':'/'}"  class="detailimage"/>
			</li>
			{/foreach}
		</ul>
	</div>
</div>

De output moet echter worden net als hier: http://tinyurl.com/slidertest02

Code: Select all

<div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 681px;">
<ul class="bxslider" style="width: 615%; position: relative; transition-duration: 0s; transform: translate3d(-2732px, 0px, 0px);">
<li class="bx-clone" style="float: left; list-style: none outside none; position: relative; width: 1366px;">
<li style="float: left; list-style: none outside none; position: relative; width: 1366px;">
<li style="float: left; list-style: none outside none; position: relative; width: 1366px;">
<li style="float: left; list-style: none outside none; position: relative; width: 1366px;">
<li style="float: left; list-style: none outside none; position: relative; width: 1366px;">
<li class="bx-clone" style="float: left; list-style: none outside none; position: relative; width: 1366px;">
</ul>
</div>
<div class="bx-controls bx-has-pager bx-has-controls-direction">
<div class="bx-pager bx-default-pager">
<div class="bx-controls-direction">
</div>

Ik weet niet waar ik moet zoeken

[velden]

Je moet er op één of andere manier wel voor zorgen dat de bxslider js en css ook wordt geladen vóór je die functie aanroept.

Daarvoor kun je dan het javascript block gebruiken in het Gallery template.

Dit staat in je werkende pagina:

Code: Select all

<!-- jQuery library (served from Google) -->
<__script__ src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></__script>
<!-- bxSlider Javascript file -->
<__script__ src="js/jquery.bxslider.min.js"></__script>
<!-- bxSlider CSS file -->
<link href="css/jquery.bxslider.css" rel="stylesheet" />

Merk op dat je meerdere versies van jQuery laadt. Dat is niet goed.
Probeer helder te krijgen hoe jQuery en js werkt. Dat scheelt een hoop gedoe met troubleshooten.

[Haghorst]

Alles wordt nu aangeroepen in de <head> als het goed is.

HEAD

Code: Select all

<__script__ src="js/jquery.bxslider.min.js">

HEAD

Code: Select all

<__script__ src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">

APARTE STYLESHEETS

Code: Select all

<link href="**url**/tmp/cache/stylesheet_combined_885c8f298394a4942300bf0f02f736e0.css" type="text/css" rel="stylesheet">

JAVASCRIPT IN Sjabloon JavaScript VELD

Code: Select all

<__script__ type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider();
});
</__script>

Ook maak ik nu gebruik van één jquery.
Ik merk echter weinig verschil?