Skip to content

Instantly share code, notes, and snippets.

@kricore

kricore/default.php

Last active February 24, 2017 04:57
Show Gist options
  • Save kricore/ea2239f4c73b6e02fc86 to your computer and use it in GitHub Desktop.
Save kricore/ea2239f4c73b6e02fc86 to your computer and use it in GitHub Desktop.
Download ZIP
Simple Image Gallery Pro responsive template using Foundation's block grid.
Raw
default.php
<?php
/**
* @version 3.0.x
* @package Simple Image Gallery Pro
* @author JoomlaWorks - http://www.joomlaworks.net
* @copyright Copyright (c) 2006 - 2014 JoomlaWorks Ltd. All rights reserved.
* @license http://www.joomlaworks.net/license
*/
// no direct access
defined('_JEXEC') or die('Restricted access');
?>
<ul id="sigProId<?php echo $gal_id; ?>" class="sigProContainer sigProResponsive small-block-grid-2 medium-block-grid-3 large-block-grid-5<?php echo $singleThumbClass.$extraWrapperClass; ?>">
<?php foreach($gallery as $count=>$photo): ?>
<li class="sigProThumb"<?php if($gal_singlethumbmode && $count>0) echo ' style="display:none !important;"'; ?>>
<span class="sigProLinkOuterWrapper">
<span class="sigProLinkWrapper">
<a href="<?php echo $photo->sourceImageFilePath; ?>" class="sigProLink<?php echo $extraClass; ?>" style="width: 100%; padding-bottom:<?php echo ($photo->height / $photo->width * 100); ?>%;" rel="<?php echo $relName; ?>[gallery<?php echo $gal_id; ?>]" title="<?php echo $photo->captionDescription.$photo->downloadLink.$modulePosition; ?>" data-fresco-caption="<?php echo $photo->captionDescription.$photo->downloadLink.$modulePosition; ?>" target="_blank"<?php echo $customLinkAttributes; ?>>
<?php if(($gal_singlethumbmode && $count==0) || !$gal_singlethumbmode): ?>
<img class="sigProImg" src="<?php echo $transparent; ?>" alt="<?php echo JText::_('JW_SIGP_LABELS_08').' '.$photo->filename; ?>" title="<?php echo JText::_('JW_SIGP_LABELS_08').' '.$photo->filename; ?>" style="background-image:url(<?php echo $photo->thumbImageFilePath; ?>); background-repeat: no-repeat; background-size: cover;" />
<?php endif; ?>
<?php if($gal_captions): ?>
<span class="sigProPseudoCaption"><b><?php echo $photo->captionTitle; ?></b></span>
<span class="sigProCaption" title="<?php echo $photo->captionTitle; ?>"><?php echo $photo->captionTitle; ?></span>
<?php endif; ?>
</a>
</span>
</span>
</li>
<?php endforeach; ?>
<li class="sigProClear">&nbsp;</li>
</ul>
<?php if(isset($flickrSetUrl)): ?>
<a class="sigProFlickrSetLink" title="<?php echo $flickrSetTitle; ?>" target="_blank" href="<?php echo $flickrSetUrl; ?>"><?php echo JText::_('JW_SIGP_PLG_FLICKRSET'); ?></a>
<?php endif; ?>
<?php if($itemPrintURL): ?>
<div class="sigProPrintMessage">
<?php echo JText::_('JW_SIGP_PLG_PRINT_MESSAGE'); ?>:
<br />
<a title="<?php echo $row->title; ?>" href="<?php echo $itemPrintURL; ?>"><?php echo $itemPrintURL; ?></a>
</div>
<?php endif; ?>
Raw
template.css
/**
* @version 3.0.x
* @package Simple Image Gallery Pro
* @author JoomlaWorks - http://www.joomlaworks.net
* @copyright Copyright (c) 2006 - 2014 JoomlaWorks Ltd. All rights reserved.
* @license http://www.joomlaworks.net/license
*/
/* --- GRID BLOCK BY ZURB --- */
[class*="block-grid-"] { display: block; margin: 0 -0.625em; padding: 0; *zoom: 1; }
[class*="block-grid-"], [class*="block-grid-"] * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
[class*="block-grid-"]:before, [class*="block-grid-"]:after { display: table; content: " "; }
[class*="block-grid-"]:after { clear: both; }
[class*="block-grid-"] > li { display: block; float: left; padding: 0 0.625em 1.25em; height: auto; margin: 0!important; }
@media only screen { .small-block-grid-1 > li { width: 100%; list-style: none; }
.small-block-grid-1 > li:nth-of-type(n) { clear: none; }
.small-block-grid-1 > li:nth-of-type(1n+1) { clear: both; }
.small-block-grid-2 > li { width: 50%; list-style: none; }
.small-block-grid-2 > li:nth-of-type(n) { clear: none; }
.small-block-grid-2 > li:nth-of-type(2n+1) { clear: both; }
.small-block-grid-3 > li { width: 33.33333%; list-style: none; }
.small-block-grid-3 > li:nth-of-type(n) { clear: none; }
.small-block-grid-3 > li:nth-of-type(3n+1) { clear: both; }
.small-block-grid-4 > li { width: 25%; list-style: none; }
.small-block-grid-4 > li:nth-of-type(n) { clear: none; }
.small-block-grid-4 > li:nth-of-type(4n+1) { clear: both; }
.small-block-grid-5 > li { width: 20%; list-style: none; }
.small-block-grid-5 > li:nth-of-type(n) { clear: none; }
.small-block-grid-5 > li:nth-of-type(5n+1) { clear: both; }
.small-block-grid-6 > li { width: 16.66667%; list-style: none; }
.small-block-grid-6 > li:nth-of-type(n) { clear: none; }
.small-block-grid-6 > li:nth-of-type(6n+1) { clear: both; }
.small-block-grid-7 > li { width: 14.28571%; list-style: none; }
.small-block-grid-7 > li:nth-of-type(n) { clear: none; }
.small-block-grid-7 > li:nth-of-type(7n+1) { clear: both; }
.small-block-grid-8 > li { width: 12.5%; list-style: none; }
.small-block-grid-8 > li:nth-of-type(n) { clear: none; }
.small-block-grid-8 > li:nth-of-type(8n+1) { clear: both; }
.small-block-grid-9 > li { width: 11.11111%; list-style: none; }
.small-block-grid-9 > li:nth-of-type(n) { clear: none; }
.small-block-grid-9 > li:nth-of-type(9n+1) { clear: both; }
.small-block-grid-10 > li { width: 10%; list-style: none; }
.small-block-grid-10 > li:nth-of-type(n) { clear: none; }
.small-block-grid-10 > li:nth-of-type(10n+1) { clear: both; }
.small-block-grid-11 > li { width: 9.09091%; list-style: none; }
.small-block-grid-11 > li:nth-of-type(n) { clear: none; }
.small-block-grid-11 > li:nth-of-type(11n+1) { clear: both; }
.small-block-grid-12 > li { width: 8.33333%; list-style: none; }
.small-block-grid-12 > li:nth-of-type(n) { clear: none; }
.small-block-grid-12 > li:nth-of-type(12n+1) { clear: both; } }
@media only screen and (min-width: 640px) and (max-width: 900px) { .medium-block-grid-1 > li { width: 100%; list-style: none; }
.medium-block-grid-1 > li:nth-of-type(n) { clear: none; }
.medium-block-grid-1 > li:nth-of-type(1n+1) { clear: both; }
.medium-block-grid-2 > li { width: 50%; list-style: none; }
.medium-block-grid-2 > li:nth-of-type(n) { clear: none; }
.medium-block-grid-2 > li:nth-of-type(2n+1) { clear: both; }
.medium-block-grid-3 > li { width: 33.33333%; list-style: none; }
.medium-block-grid-3 > li:nth-of-type(n) { clear: none; }
.medium-block-grid-3 > li:nth-of-type(3n+1) { clear: both; }
.medium-block-grid-4 > li { width: 25%; list-style: none; }
.medium-block-grid-4 > li:nth-of-type(n) { clear: none; }
.medium-block-grid-4 > li:nth-of-type(4n+1) { clear: both; }
.medium-block-grid-5 > li { width: 20%; list-style: none; }
.medium-block-grid-5 > li:nth-of-type(n) { clear: none; }
.medium-block-grid-5 > li:nth-of-type(5n+1) { clear: both; }
.medium-block-grid-6 > li { width: 16.66667%; list-style: none; }
.medium-block-grid-6 > li:nth-of-type(n) { clear: none; }
.medium-block-grid-6 > li:nth-of-type(6n+1) { clear: both; }
.medium-block-grid-7 > li { width: 14.28571%; list-style: none; }
.medium-block-grid-7 > li:nth-of-type(n) { clear: none; }
.medium-block-grid-7 > li:nth-of-type(7n+1) { clear: both; }
.medium-block-grid-8 > li { width: 12.5%; list-style: none; }
.medium-block-grid-8 > li:nth-of-type(n) { clear: none; }
.medium-block-grid-8 > li:nth-of-type(8n+1) { clear: both; }
.medium-block-grid-9 > li { width: 11.11111%; list-style: none; }
.medium-block-grid-9 > li:nth-of-type(n) { clear: none; }
.medium-block-grid-9 > li:nth-of-type(9n+1) { clear: both; }
.medium-block-grid-10 > li { width: 10%; list-style: none; }
.medium-block-grid-10 > li:nth-of-type(n) { clear: none; }
.medium-block-grid-10 > li:nth-of-type(10n+1) { clear: both; }
.medium-block-grid-11 > li { width: 9.09091%; list-style: none; }
.medium-block-grid-11 > li:nth-of-type(n) { clear: none; }
.medium-block-grid-11 > li:nth-of-type(11n+1) { clear: both; }
.medium-block-grid-12 > li { width: 8.33333%; list-style: none; }
.medium-block-grid-12 > li:nth-of-type(n) { clear: none; }
.medium-block-grid-12 > li:nth-of-type(12n+1) { clear: both; } }
@media only screen and (min-width: 901px) { .large-block-grid-1 > li { width: 100%; list-style: none; }
.large-block-grid-1 > li:nth-of-type(n) { clear: none; }
.large-block-grid-1 > li:nth-of-type(1n+1) { clear: both; }
.large-block-grid-2 > li { width: 50%; list-style: none; }
.large-block-grid-2 > li:nth-of-type(n) { clear: none; }
.large-block-grid-2 > li:nth-of-type(2n+1) { clear: both; }
.large-block-grid-3 > li { width: 33.33333%; list-style: none; }
.large-block-grid-3 > li:nth-of-type(n) { clear: none; }
.large-block-grid-3 > li:nth-of-type(3n+1) { clear: both; }
.large-block-grid-4 > li { width: 25%; list-style: none; }
.large-block-grid-4 > li:nth-of-type(n) { clear: none; }
.large-block-grid-4 > li:nth-of-type(4n+1) { clear: both; }
.large-block-grid-5 > li { width: 20%; list-style: none; }
.large-block-grid-5 > li:nth-of-type(n) { clear: none; }
.large-block-grid-5 > li:nth-of-type(5n+1) { clear: both; }
.large-block-grid-6 > li { width: 16.66667%; list-style: none; }
.large-block-grid-6 > li:nth-of-type(n) { clear: none; }
.large-block-grid-6 > li:nth-of-type(6n+1) { clear: both; }
.large-block-grid-7 > li { width: 14.28571%; list-style: none; }
.large-block-grid-7 > li:nth-of-type(n) { clear: none; }
.large-block-grid-7 > li:nth-of-type(7n+1) { clear: both; }
.large-block-grid-8 > li { width: 12.5%; list-style: none; }
.large-block-grid-8 > li:nth-of-type(n) { clear: none; }
.large-block-grid-8 > li:nth-of-type(8n+1) { clear: both; }
.large-block-grid-9 > li { width: 11.11111%; list-style: none; }
.large-block-grid-9 > li:nth-of-type(n) { clear: none; }
.large-block-grid-9 > li:nth-of-type(9n+1) { clear: both; }
.large-block-grid-10 > li { width: 10%; list-style: none; }
.large-block-grid-10 > li:nth-of-type(n) { clear: none; }
.large-block-grid-10 > li:nth-of-type(10n+1) { clear: both; }
.large-block-grid-11 > li { width: 9.09091%; list-style: none; }
.large-block-grid-11 > li:nth-of-type(n) { clear: none; }
.large-block-grid-11 > li:nth-of-type(11n+1) { clear: both; }
.large-block-grid-12 > li { width: 8.33333%; list-style: none; }
.large-block-grid-12 > li:nth-of-type(n) { clear: none; }
.large-block-grid-12 > li:nth-of-type(12n+1) { clear: both; } }
/* --- Generic Styling -- sigpro styling begins here--- */
a:active,a:focus { outline:0; }
table.contentpaneopen { width:100%; }
li.sigProClear { clear:both; float:none!important; height:0!important; line-height:0!important; border:none!important; background:none!important; width:auto; margin:0!important; padding:0!important; }
li.sigProClear:before { display: none }
/* Container */
ul.sigProResponsive { margin:8px auto!important; padding:8px 0!important; list-style:none; clear:both; overflow:hidden; }
ul.sigProResponsive.singleThumbGallery { margin:0!important; padding:9px 0!important; list-style:none; float:left; }
/* Thumbnail */
ul.sigProResponsive li.sigProThumb:before { display: none }
ul.sigProResponsive li.sigProThumb { float:left; background:none!important; margin:0 4px 4px 0; padding:0; border:none!important; }
ul.sigProResponsive li.sigProThumb span.sigProLinkOuterWrapper { }
ul.sigProResponsive li.sigProThumb span.sigProLinkWrapper { }
ul.sigProResponsive li.sigProThumb a.sigProLink,
ul.sigProResponsive li.sigProThumb a.sigProLink:hover { position:relative; display:block; padding:0; margin:0; }
ul.sigProResponsive li.sigProThumb a.sigProLink { color:#b7dafc; background-color:#b7dafc; border:6px solid #b7dafc; }
ul.sigProResponsive li.sigProThumb a.sigProLink:hover { color:#2ea8e5; text-decoration:none; background-color:#2ea8e5; border:6px solid #2ea8e5; }
ul.sigProResponsive li.sigProThumb a.sigProLink img.sigProImg,
ul.sigProResponsive li.sigProThumb a.sigProLink:hover img.sigProImg { display:block; padding:0; margin:0; border:none; background-repeat:no-repeat; background-position:50% 50%; }
/* Caption */
ul.sigProResponsive span.sigProPseudoCaption,
ul.sigProResponsive span.sigProCaption { display:block; position:absolute; bottom:0; left:0; right:0; text-align:center; padding:4px 0 0; font-size:11px; font-weight:normal; font-family:Georgia, "Times New Roman", Times, serif; }
ul.sigProResponsive span.sigProPseudoCaption { background:#b7dafc; }
ul.sigProResponsive li.sigProThumb a.sigProLink:hover span.sigProPseudoCaption { background:#2ea8e5; }
ul.sigProResponsive span.sigProPseudoCaption b { visibility:hidden; }
/* Popup */
span.sigProPopupCaption { font-weight:bold; color:#C63C13; font-size:13px; font-family:Georgia, "Times New Roman", Times, serif; }
a.sigProDownloadLink,a.sigProDownloadLink:hover { background:url(../images/disk.png) no-repeat left center; padding:4px 0 4px 20px; }
div.sigProModulePosition { text-align:center; border-top:1px solid #ccc; border-bottom:1px solid #ccc; padding:4px; margin:8px 0; background:#ffffdd; }
/* IE specific styling: Use "body.sigProIsIEX element {}" - where X is 6, 7 or 8 - to target elements for these browser versions only */
body.sigProIsIE6 { }
body.sigProIsIE6 ul.sigProResponsive li.sigProThumb a.sigProLink,
body.sigProIsIE6 ul.sigProResponsive li.sigProThumb a.sigProLink:hover { float:left; }
body.sigProIsIE6 ul.sigProResponsive span.sigProPseudoCaption,
body.sigProIsIE6 ul.sigProResponsive span.sigProCaption { display:block; position:absolute; bottom:0; left:0; right:0; text-align:center; width:100%; padding:6px 4px; font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; }
body.sigProIsIE7 { }
body.sigProIsIE7 ul.sigProResponsive li.sigProThumb a.sigProLink,
body.sigProIsIE7 ul.sigProResponsive li.sigProThumb a.sigProLink:hover { float:left; }
/* Flickr Set link */
a.sigProFlickrSetLink {display:block;clear:left;padding:2px 8px;font-size:10px;text-align:center;}
/* Print message */
.sigProPrintMessage {display:none;}
/* --- Template specific Styling here --- */
ul.sigProResponsive .sigProLink { position: relative; overflow: hidden; }
ul.sigProResponsive .sigProLink img { position: absolute; background-position: 50% 50%; background-repeat: no-repeat; left: 0; top: 0; width: 100%; height: 100%; max-width: none; max-height: none; }
ul.sigProResponsive li.sigProThumb span.sigProLinkOuterWrapper { display: block; margin: 0 4px 4px 0; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment