[SOLVED] Integrating Swipebox with CMSMS Gallery

Have a question or a suggestion about a 3rd party addon module or plugin?
Let us know here.
Post Reply
User avatar
richbothe
Forum Members
Forum Members
Posts: 95
Joined: Tue Aug 15, 2006 5:34 pm

[SOLVED] Integrating Swipebox with CMSMS Gallery

Post by richbothe »

Cms Version: 1.11.7
Installed Modules:
CMSMailer: 5.2.1
CMSPrinting: 1.0.4
FileManager: 1.4.3
MenuManager: 1.8.5
FormBuilder: 0.7.3
ModuleManager: 1.5.5
News: 2.12.12
Search: 1.7.8
ThemeManager: 1.1.8
TinyMCE: 2.9.12
Gallery: 1.6.1

Bootstrap: 2.3.2

Hello,
I am trying to figure out how to integrate swipebox, http://brutaldesign.github.io/swipebox/ with Gallery. The goal is to allow the website admin to simply upload photos to the Gallery directory so they automatically display using swipebox as the feature for viewing the photos on pc and mobile devices.

I am also using bootstrap 2.3.2 with a fluid, responsive layout. Each row of photos in the Gallery is wrapped in

Code: Select all

<div class="row-fluid"></div>
I don't know how to code the logic in the gallery template to check for # of photo's and then to output a new div class="row-fluid"></div> for every 6 photos returned.

Please advise....

Thanks!
Last edited by richbothe on Sat Sep 14, 2013 10:40 pm, edited 1 time in total.
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3497
Joined: Mon Nov 28, 2011 9:29 am

Re: Integrating Swipebox with CMSMS Gallery

Post by velden »

I don't know how to code the logic in the gallery template to check for # of photo's and then to output a new div class="row-fluid"></div> for every 6 photos returned.
Give the foreach loop a name, in the example below it's named 'loop'

Then use the mod operator '%' to check if it's the 6th, 12th etc.

The example below should do that (changed it a little, so test it).

Code: Select all

{foreach from=$images item=image name=loop}
  {if $smarty.foreach.loop.index % 6 == 0}
    <div class="row-fluid">
  {/if}
	<div class="img {cycle values="first,second,third,forth, fifth, sixth"}">
<a class="group" href="{$image->file|escape:'url'|replace:'%2F':'/'}" title="{$image->titlename}{if !empty($image->comment)}<br /><em>{$image->comment|strip_tags|escape:'html'}<em>{/if}" rel="lightbox[{$galleryid}]"><img src="{$image->thumb|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}"/></a>
	</div>
  {if $smarty.foreach.loop.index % 6 == 5 || $smarty.foreach.loop.last}
    </div>
  {/if}
{/foreach}
Explanation:

Code: Select all

  {if $smarty.foreach.loop.index % 6 == 0}
    <div class="row-fluid">
  {/if}
Loop index starts at 0.
0%6==0 so before the first image an opening div tag is created
6%6==0, 12%6==0 etc, so before the 7th, 13th, 19th image a new opening div is created.

Code: Select all

{if $smarty.foreach.loop.index % 6 == 5 || $smarty.foreach.loop.last}
    </div>
  {/if}
5%6==5, 11%6==5, 17%6==5 etc. So after the 6th, 12th, 18th image a closing div is created. Closing div is also created if the last image is just displayed.

Code: Select all

<div class="img {cycle values="first,second,third,forth, fifth, sixth"}">
Bonus: {cycle} cycles through all the values. Don't think you need it, but I did in this example, to be able to set custom margins per 'column'.
User avatar
richbothe
Forum Members
Forum Members
Posts: 95
Joined: Tue Aug 15, 2006 5:34 pm

Re: Integrating Swipebox with CMSMS Gallery

Post by richbothe »

Thanks velden! That did the trick.
Post Reply

Return to “Modules/Add-Ons”