Advanced search  

News:

cpg1.5.48 Security release - upgrade mandatory!
The Coppermine development team is releasing a security update for Coppermine in order to counter a recently discovered vulnerability. It is important that all users who run version cpg1.5.46 or older update to this latest version as soon as possible.
[more]

Pages: [1]   Go Down

Author Topic: Curve masonry theme ( JavaScript grid layout theme) + bounceIn css  (Read 8750 times)

0 Members and 1 Guest are viewing this topic.

allvip

  • Global Moderator
  • Coppermine addict
  • *****
  • Country: 00
  • Offline Offline
  • Posts: 1324

1. Masonry removes all the empty space around thumbnails specially with this settingd in CONFIG:
Thumbnails settings : Use dimension (width or height or max aspect for thumbnail)* -  weight and if width was set when images were uploaded.If not use admin tool to updated thumbs.

2. Images repositon on browser resize.


Masonry Official Website:

http://masonry.desandro.com/


What is Masonry?

Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet.


site that has masonry layout: http://staff.tumblr.com/archive


Demo - Download
« Last Edit: July 02, 2015, 11:33:52 pm by allvip »
Logged

allvip

  • Global Moderator
  • Coppermine addict
  • *****
  • Country: 00
  • Offline Offline
  • Posts: 1324
Re: Curve masonry theme ( JavaScript grid layout theme) + bounceIn css
« Reply #1 on: November 27, 2013, 05:53:03 am »

Coppermine masonry theme - Coppermine grid layout theme

If the demo is not working anymore:

IMAGE PREVIEW


        
     
« Last Edit: December 08, 2013, 05:11:43 pm by allvip »
Logged

Αndré

  • Administrator
  • Coppermine addict
  • *****
  • Country: de
  • Offline Offline
  • Gender: Male
  • Posts: 15759
Re: Curve masonry theme ( JavaScript grid layout theme) + bounceIn css
« Reply #2 on: November 27, 2013, 03:16:12 pm »

Thank you for your contribution. I'll have a look at your theme and upload it to our demo gallery as soon as possible.
Logged

allvip

  • Global Moderator
  • Coppermine addict
  • *****
  • Country: 00
  • Offline Offline
  • Posts: 1324
Re: Curve masonry theme ( JavaScript grid layout theme) + bounceIn css
« Reply #3 on: November 28, 2013, 07:26:45 am »

I just replaced the zip for v1.0 (december 08/2013).
it was looking OK only in firefox (sorry I forgot to check how the theme looks in other browsers the first time) and the admin tools page was not working.

the changes I made to the new zip:
1.I added width:132px for .item in style.css (withot width it looks ok only in firefox)
2.I adeed js-masonry to echo '<div class="masonry">'; like this: echo '<div class="masonry js-masonry">' to function theme_display_thumbnails from theme.php; this way masonry will work even without jqury.min.js or colunWidth.
2.deleted js_include('js/jquery.min.js'); at the end of function theme_display_thumbnails from theme.php.
3.deleted jquery.min.js from js folder.


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

allvip

  • Global Moderator
  • Coppermine addict
  • *****
  • Country: 00
  • Offline Offline
  • Posts: 1324
Re: Curve masonry theme ( JavaScript grid layout theme) + bounceIn css
« Reply #4 on: November 28, 2013, 07:34:05 am »

How to add masonry to your own theme

coppermine Masonry coppermine grid layout http://forum.coppermine-gallery.net/index.php/topic,76860.0.html
« Last Edit: July 02, 2015, 11:31:41 pm by allvip »
Logged

allvip

  • Global Moderator
  • Coppermine addict
  • *****
  • Country: 00
  • Offline Offline
  • Posts: 1324
Re: Curve masonry theme ( JavaScript grid layout theme) + bounceIn css
« Reply #5 on: November 28, 2013, 07:40:33 am »

Chanes for v1.1

1) I deleted fom template.html:

Code: [Select]
jQuery(function(){
      jQuery('.masonry').masonry({
          itemSelector: '.item',
          columnWidth: 50
      });
 });

2) I deleted <div class="grid-sizer"></div> from theme.php. Is an error.
3) I deleted <br /> after <a href="{LINK_TGT}">{THUMB} from theme.php
4) I replaced in style.css:

Code: [Select]
/* Styles for masonry.
------------------------------------------------------- */
.grid-sizer {
        float: left;
        margin:2px;
}
.item {
        width:132px;
        float: left;
        margin:2px;
        padding:4px;
        border:1px solid #cccccc;
        background: #f1f1f1 ;
        box-shadow:5px 5px 5px #888888;
}
.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;
}
.tabDiv {
        margin-top:10px;
}
/* End Styles for masonry.
------------------------------------------------------- */

with:

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.
------------------------------------------------------- */
« Last Edit: July 02, 2015, 11:25:55 pm by allvip »
Logged

Αndré

  • Administrator
  • Coppermine addict
  • *****
  • Country: de
  • Offline Offline
  • Gender: Male
  • Posts: 15759
Re: Curve masonry theme ( JavaScript grid layout theme) + bounceIn css
« Reply #6 on: December 09, 2013, 03:23:18 pm »

Added theme to our demo and download section, added links to initial post, added version number to zip file in initial post.
Logged

allvip

  • Global Moderator
  • Coppermine addict
  • *****
  • Country: 00
  • Offline Offline
  • Posts: 1324
Re: Curve masonry theme ( JavaScript grid layout theme) + bounceIn css
« Reply #7 on: December 10, 2013, 03:29:25 pm »

much better coppermine masonry theme by Jeff Bailey:

http://forum.coppermine-gallery.net/index.php/topic,75270.0.html
Logged
Pages: [1]   Go Up
 

Page created in 0.028 seconds with 22 queries.