Advanced search  

News:

CPG Release 1.6.26
Correct PHP8.2 issues with user and language managers.
Additional fixes for PHP 8.2
Correct PHP8 error with SMF 2.0 bridge.
Correct IPTC supplimental category parsing.
Download and info HERE

Pages: [1]   Go Down

Author Topic: coppermine Masonry coppermine grid layout  (Read 5786 times)

0 Members and 1 Guest are viewing this topic.

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
coppermine Masonry coppermine grid layout
« on: November 27, 2013, 04:51:12 am »

HOW TO USE MASONRY WITH YOUR OWN THEME:

Curve masonry theme http://forum.coppermine-gallery.net/index.php/topic,76859.0.html

Download it and see what I have changed:

1.template.html

I just added masonry.pkgd.min.js , imagesloaded.pkgd.min.js and bounceIn.css for a bounce effect.

and :

Code: [Select]
<script>
$(document).ready( function() {

  // for each .masonry element
  $('.masonry').each( function( i, elem ) {
    // separate jQuery object for each element
    var $elem = $( elem );
    // do imagesLoaded on it
    $elem.imagesLoaded( function() {
      // trigger .masonry() when element has loaded images
      $elem.masonry();
    });
  });

});
</script>

imagesloaded is for images to load before masonry to not overlap.

DOWNLOAD Masonry and imagesloaded from:

http://masonry.desandro.com/

http://desandro.github.io/imagesloaded/

about imagesloaded and masonry http://masonry.desandro.com/appendix.html

2.  theme.php:

I edited functions $template_thumbnail_view and theme_display_thumbnails.

look at the 2 function and see what I have changed.

theme_display_thumbnails is a big function - is  better read step 2 for details.

If you do not have those functions in your theme.php then open themes/sample/theme.php find the 2 functions and copy them in your theme then look at my curve masonry and see what I have changed.

3. style.css

I added section:

/* Styles for masonry.
------------------------------------------------------- */

and added max-width:120px; and overflow:hidden; to .thumb_filename , .thumb_title, .thumb_caption,word-wrap:break-word; only to  .thumb_filename and clear:both; to .footer.


« Last Edit: December 13, 2013, 01:29:39 pm by allvip »
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: coppermine Masonry coppermine grid layout
« Reply #1 on: November 27, 2013, 05:02:03 am »

OK.i decided to add some details:

1.template.html:

Code: [Select]
<link rel="stylesheet" href="themes/your_theme_name/bounceIn.css">

and after {JAVASCRIPT}:

Code: [Select]
<script src="themes/your_theme_name/js/masonry.pkgd.min.js" type="text/javascript"></script>
<script src="themes/your_theme_name/js/imagesloaded.pkgd.min.js" type="text/javascript"></script>
<script>
$(document).ready( function() {

  // for each .masonry element
  $('.masonry').each( function( i, elem ) {
    // separate jQuery object for each element
    var $elem = $( elem );
    // do imagesLoaded on it
    $elem.imagesLoaded( function() {
      // trigger .masonry() when element has loaded images
      $elem.masonry();
    });
  });

});
</script>
« Last Edit: December 13, 2013, 01:24:43 pm by allvip »
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: coppermine Masonry coppermine grid layout
« Reply #2 on: November 27, 2013, 05:08:18 am »

2. theme.php

in function theme_display_thumbnails

A) replace:

Code: [Select]

    if ($mode == 'thumb') {
        starttable('100%', $title, $thumbcols);
    } else {
        starttable('100%');
    }

with:

Code: [Select]
    echo '<div class="thumbTitle">';
    echo $title;
    echo '</div>';

    echo '<div class="masonry js-masonry">';

B) at the end of the function after echo $footer; add: echo '</div>'; and delete endtable();

C) DELETE:

Code: [Select]
    for (;($i % $thumbcols); $i++) {
        echo $empty_cell;
    }

AND

Code: [Select]
        if ((($i % $thumbcols) == 0) && ($i < count($thumb_list))) {
            echo $row_separator;
        }
« Last Edit: December 09, 2013, 12:51:35 pm by allvip »
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: coppermine Masonry coppermine grid layout
« Reply #3 on: November 27, 2013, 05:14:24 am »

3.theme.php

function $template_thumbnail_view :

I will not post in detail the changes.is a small function so is easy to see and compare the after and before.

BEFORE - this is the original function:

Code: [Select]
/******************************************************************************
** Section <<<$template_thumbnail_view>>> - START
******************************************************************************/

// HTML template for thumbnails display
$template_thumbnail_view = <<<EOT

<!-- BEGIN header -->
        <tr>
<!-- END header -->
<!-- BEGIN thumb_cell -->
        <td valign="top" class="thumbnails" width ="{CELL_WIDTH}" align="center">
                <table width="100%" cellpadding="0" cellspacing="0">
                        <tr>
                                <td align="center">
                                        <a href="{LINK_TGT}">{THUMB}<br /></a>
                                        {CAPTION}
                                        {ADMIN_MENU}
                                </td>
                        </tr>
                </table>
        </td>
<!-- END thumb_cell -->
<!-- BEGIN empty_cell -->
                <td valign="top" class="thumbnails" align="center">&nbsp;</td>
<!-- END empty_cell -->
<!-- BEGIN row_separator -->
        </tr>
        <tr>
<!-- END row_separator -->
<!-- BEGIN footer -->
        </tr>
<!-- END footer -->
<!-- BEGIN tabs -->
        <tr>
                <td colspan="{THUMB_COLS}" style="padding: 0px;">
                        <table width="100%" cellspacing="0" cellpadding="0">
                                <tr>
                                       {TABS}
                                </tr>
                        </table>
                </td>
        </tr>
<!-- END tabs -->
<!-- BEGIN spacer -->
        <img src="images/spacer.gif" width="1" height="7" border="" alt="" /><br />
<!-- END spacer -->

EOT;
/******************************************************************************
** Section <<<$template_thumbnail_view>>> - END
******************************************************************************/

AFTER - this is the function after all my changes:

Code: [Select]
/******************************************************************************
** Section <<<$template_thumbnail_view>>> - START
******************************************************************************/
// HTML template for thumbnails display
$template_thumbnail_view = <<<EOT

<!-- BEGIN header -->
<!-- END header -->
<!-- BEGIN thumb_cell -->                           
        <div class="item animated bounceIn" width ="{CELL_WIDTH}" align="center">
                             <a href="{LINK_TGT}">{THUMB}</a>
                                      {CAPTION}
                                      {ADMIN_MENU}                       
         
        </div>
<!-- END thumb_cell -->
<!-- BEGIN empty_cell -->
                <div valign="top" class="thumbnails" align="center">&nbsp;</div>
<!-- END empty_cell -->
<!-- BEGIN row_separator -->
<!-- END row_separator -->
<!-- BEGIN footer -->
<!-- END footer -->     
<!-- BEGIN tabs -->
       
                <div class="tabDiv">
                        <table width="100%" cellspacing="0" cellpadding="0">
                                <tr>       
                                       {TABS}
                                </tr>
                        </table>
                </div>
       
<!-- END tabs -->
<!-- BEGIN spacer -->       
<!-- END spacer -->
EOT;
/******************************************************************************
** Section <<<$template_thumbnail_view>>> - END
******************************************************************************/

« Last Edit: July 02, 2015, 11:27:33 pm by allvip »
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: coppermine Masonry coppermine grid layout
« Reply #4 on: November 27, 2013, 05:25:10 am »

4. style.css style is the name of my main css file.

A) add:

Code: [Select]
/* Styles for masonry.
------------------------------------------------------- */

.item {
        width:14%;
        float: left;
        margin:4px;
        padding:0.5% 1% 0.5% 0.5%;
        border:1px solid #cccccc;
        background: #f1f1f1 ;
        box-shadow:5px 5px 5px #888888;
}
.item img {
        max-width: 100%!important;
height: auto!important;
}
.thumbTitle {
    color:#cccccc;
    background:#000000;
    clear:both;
    padding-left: 10px;
    font-family:Arial,sans-serif;
    font-size: 100%;
    font-weight: normal;
    line-height: 30px;
    margin-top:5px;
    margin-bottom: 5px;
    text-transform: uppercase;
}
.thumb_title,.thumb_caption,.thumb_filename,.thumb_num_comments {
    max-width: 100%!important;
    overflow: hidden;
word-break: break-all;
}
.tabDiv {
        margin-top:10px;
clear: both;
}
/* End Styles for masonry.
------------------------------------------------------- */


DOWNLOAD AND UPLAOD in your_theme_name/js folder masonry and imagesloaded (links in the first post)





« Last Edit: July 02, 2015, 11:30:29 pm by allvip »
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: coppermine Masonry coppermine grid layout
« Reply #5 on: November 27, 2013, 05:27:51 am »

5.bounceIn.css

creat a new blank file and paste this code:

Code: [Select]
.animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:0.8s;-moz-animation-duration:0.8s;-ms-animation-duration:0.8s;-o-animation-duration:0.8s;animation-duration:0.8s;}.animated.hinge{-webkit-animation-duration:0.8s;-moz-animation-duration:0.8s;-ms-animation-duration:0.8s;-o-animation-duration:0.8s;animation-duration:0.8s;}@-webkit-keyframes bounceIn {
0% {
opacity: 0;
-o-transform: scale(.1);
}
        25% {
opacity: 0.5;
-webkit-transform: scale(.1);

}
50% {
        opacity: 1;
-webkit-transform: scale(1);
}

70% {
-webkit-transform: scale(1);
}
100% {
-webkit-transform: scale(1);
}
}

@-moz-keyframes bounceIn {
0% {
opacity: 0;
-moz-transform: scale(.1);
}
50% {
        opacity: 1;
-webkit-transform: scale(1);
}

70% {
-webkit-transform: scale(1);
}
25% {
opacity: 0.5;
-webkit-transform: scale(.1);

}


100% {
-moz-transform: scale(1);
}
}

@-o-keyframes bounceIn {
0% {
opacity: 0;
-o-transform: scale(.1);
}
25% {
opacity: 0.5;
-webkit-transform: scale(.1);

}
50% {
        opacity: 1;
-webkit-transform: scale(1);
}

70% {
-webkit-transform: scale(1);
}

100% {
-o-transform: scale(1);
}
}

@keyframes bounceIn {
0% {
opacity: 0;
transform: scale(.1);
}
25% {
opacity: 0.5;
-webkit-transform: scale(.1);

}

50% {
        opacity: 1;
-webkit-transform: scale(1);
}

70% {
-webkit-transform: scale(1);
}
100% {
transform: scale(1);
}
}

.bounceIn {
-webkit-animation-name: bounceIn;
-moz-animation-name: bounceIn;
-o-animation-name: bounceIn;
animation-name: bounceIn;
}


name it bounceIn.css and place it in your theme folder.

Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: coppermine Masonry coppermine grid layout
« Reply #6 on: November 27, 2013, 05:38:00 am »

the bounceIn code is from https://daneden.me/animate/ and I edit it because I did not like it with his original setttings.

you can change the bounceIn effect with other effects from the website.

download animate.min from https://github.com/daneden/animate.css

from the zip file place only animate.min in your theme folder only and add to template.html :

Code: [Select]
<link rel="stylesheet" href="themes/your_theme_name/animatemin.css">

then in function $template_thumbnail_view replace  only the word bounceIn with the name of the effect you like most from the website.


« Last Edit: November 29, 2013, 04:25:06 am by allvip »
Logged
Pages: [1]   Go Up
 

Page created in 0.024 seconds with 20 queries.