Last active
October 5, 2015 21:08
-
-
Save aolin480/06b380d53eb017113f53 to your computer and use it in GitHub Desktop.
This can be used in anything, but I recently had the pleasure of working with Owl Carousel and a client needed to group 3 images in a owl carousel slide, this PROPERLY groups elements into a div without creating an orphan div group towards the end.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
/* | |
Cleaner Code | |
*/ | |
// a psudeo array of images for testing | |
$items = array( | |
'https://s-media-cache-ak0.pinimg.com/236x/77/85/a1/7785a1b13a780842309579574715c35c.jpg', | |
'https://s-media-cache-ak0.pinimg.com/236x/77/85/a1/7785a1b13a780842309579574715c35c.jpg', | |
'https://s-media-cache-ak0.pinimg.com/236x/77/85/a1/7785a1b13a780842309579574715c35c.jpg', | |
'https://s-media-cache-ak0.pinimg.com/236x/77/85/a1/7785a1b13a780842309579574715c35c.jpg', | |
'https://s-media-cache-ak0.pinimg.com/236x/77/85/a1/7785a1b13a780842309579574715c35c.jpg', | |
'https://s-media-cache-ak0.pinimg.com/236x/77/85/a1/7785a1b13a780842309579574715c35c.jpg', | |
'https://s-media-cache-ak0.pinimg.com/236x/77/85/a1/7785a1b13a780842309579574715c35c.jpg', | |
'https://s-media-cache-ak0.pinimg.com/236x/77/85/a1/7785a1b13a780842309579574715c35c.jpg', | |
'https://s-media-cache-ak0.pinimg.com/236x/77/85/a1/7785a1b13a780842309579574715c35c.jpg', | |
'https://s-media-cache-ak0.pinimg.com/236x/77/85/a1/7785a1b13a780842309579574715c35c.jpg', | |
); | |
// set the inital increment | |
$z = 1; | |
// every X images make them into a group | |
$divider = 3; | |
// define a new line so code looks neat | |
define("NL","\r\n"); | |
// if items exist | |
if( count($items) ) : | |
// html comment | |
echo "<!-- bof: owl-single -->" . NL; | |
// new line | |
echo NL; | |
// add the owl slider wrapper | |
echo "<div class='owl-single'>" . NL . NL; | |
// add a group to the slider which will hold as many images that the divider specifies above | |
echo "\t" . "<div class='owl-group'>" . NL; | |
foreach($items as $index=>$image) : | |
// insert image into group | |
echo "\t\t" . "<img src='$image' alt=''>" . NL; | |
// if current image is the last image or the current image is the last image in the items array, close off the group | |
if($z % $divider == 0 || $z == count($items) ){ | |
echo "\t" . "</div>" . NL . NL; | |
// only open a new div if there are more images to be added, do not add an orphan div, this would create an empty slide in owl carousel | |
if( $z < count($items) ) : | |
echo "\t" . "<div class='owl-group'>" . NL; | |
endif; | |
} | |
// incremement | |
$z++; | |
endforeach; | |
// close off the .owl-single div | |
echo "</div>" . NL; | |
// new line | |
echo NL; | |
// HTML comment | |
echo "<!-- eof: owl-single -->" . NL; | |
endif; | |
?> | |
<?php | |
/* | |
No comments or newline/tabs added | |
*/ | |
$items = array( | |
'https://s-media-cache-ak0.pinimg.com/236x/77/85/a1/7785a1b13a780842309579574715c35c.jpg', | |
'https://s-media-cache-ak0.pinimg.com/236x/77/85/a1/7785a1b13a780842309579574715c35c.jpg', | |
'https://s-media-cache-ak0.pinimg.com/236x/77/85/a1/7785a1b13a780842309579574715c35c.jpg', | |
'https://s-media-cache-ak0.pinimg.com/236x/77/85/a1/7785a1b13a780842309579574715c35c.jpg', | |
'https://s-media-cache-ak0.pinimg.com/236x/77/85/a1/7785a1b13a780842309579574715c35c.jpg', | |
'https://s-media-cache-ak0.pinimg.com/236x/77/85/a1/7785a1b13a780842309579574715c35c.jpg', | |
'https://s-media-cache-ak0.pinimg.com/236x/77/85/a1/7785a1b13a780842309579574715c35c.jpg', | |
'https://s-media-cache-ak0.pinimg.com/236x/77/85/a1/7785a1b13a780842309579574715c35c.jpg', | |
'https://s-media-cache-ak0.pinimg.com/236x/77/85/a1/7785a1b13a780842309579574715c35c.jpg', | |
'https://s-media-cache-ak0.pinimg.com/236x/77/85/a1/7785a1b13a780842309579574715c35c.jpg', | |
); | |
$z = 1; | |
$divider = 3; | |
if( count($items) ) : | |
echo "<div class='owl-single'>" ; | |
echo "<div class='owl-group'>"; | |
foreach($items as $index => $image) : | |
echo "\t\t" . "<img src='$image' alt=''>" ; | |
if($z % $divider == 0 || $z == count($items) ){ | |
echo "</div>"; | |
if( $z < count($items) ) : | |
echo "<div class='owl-group'>" ; | |
endif; | |
} | |
$z++; | |
endforeach; | |
echo "</div>"; | |
endif; | |
?> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment