Advanced search  

News:

cpg1.5.46 Security release - upgrade mandatory!
The Coppermine development team is releasing a security update for Coppermine in order to counter recently discovered vulnerabilities. It is important that all users who run version cpg1.5.44 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 6217 times)

0 Members and 1 Guest are viewing this topic.

allvip

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

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: 1290
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: 15369
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: 1290
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: 1290
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: 1290
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: 15369
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: 1290
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.019 seconds with 21 queries.