Hi there, I've been looking for a plugin like this for ages!
I know the whole point is to achieve the masonry effect, but all i actually want it for is portrait mode album thumbnails, and this is able to achieve that perfectly! The only thing is, i want to also be able to specify a maximum width. I have almost exclusively portrait mode images, but a few albums have landscape images, and i'd personally prefer to have a uniform grid over a masonry style.
Another feature that would be awesome would be to have album thumbnails different sizes to image thumbnails, using the GThumb+ plugin i had small thumbnails for images and then big square images for albums. Even just being able to disable the scaling for the image thumbnails would suffice, because then i could fall back to GThumb+ for the image thumbs, and use GDThumb for my album categories.
Once my grok limit resets, i'm going to look into making these tweaks myself, and if i get something workable, i'll share my tweaks in case you want to incorporate them.
Thanks a lot for this plugin!!
Edit:
To anyone from the future who also wants to ditch the masonry effect, grok figured it out for me, this sets all the images to a fixed portrait size:
var GDThumb = { max_height: 429, // Default height for thumbnails margin: 10, min_width: 245, // Minimum and fixed width for thumbnails min_height: 429, // Minimum and fixed height for thumbnails method: 'crop', // Always crop to fit fixed dimensions t: new Array, do_merge: false, // Initialize plugin logic, perform necessary steps setup: function(method, max_height, margin, do_merge) { jQuery('ul#thumbnails').addClass("thumbnails"); GDThumb.max_height = max_height || GDThumb.min_height; GDThumb.margin = margin; GDThumb.method = 'crop'; // Force crop method for uniform grid GDThumb.do_merge = do_merge; $(window).bind("RVTS_loaded", function() { GDThumb.init(); }); GDThumb.init(); }, init: function() { var mainlists = jQuery('ul.thumbnails'); if (typeof mainlists !== 'undefined') { if (GDThumb.do_merge) { GDThumb.merge(); } GDThumb.build(); jQuery(window).bind('RVTS_loaded', GDThumb.build); mainlists.resize(GDThumb.process); jQuery("ul.thumbnails .thumbLegend.overlay").click(function() { window.location.href = $(this).parent().find('a').attr('href'); }); jQuery("ul.thumbnails .thumbLegend.overlay-ex").click(function() { window.location.href = $(this).parent().find('a').attr('href'); }); } }, // Merge categories and picture lists merge: function() { var mainlists = $('.content ul.thumbnails'); if (mainlists.length < 2) { // Only one list of elements } else { $(".thumbnailCategories li").addClass("album"); $(".thumbnailCategories").append($(".content ul#thumbnails").html()); $("ul#thumbnails").remove(); $("div.loader:eq(1)").remove(); } }, // Build thumb metadata build: function() { GDThumb.t = new Array; $('ul.thumbnails img.thumbnail').each(function(index) { var width = parseInt(jQuery(this).attr('width')); var height = parseInt(jQuery(this).attr('height')); var th = { index: index, width: GDThumb.min_width, // Fixed width height: GDThumb.min_height, // Fixed height real_width: width, real_height: height, crop: GDThumb.min_width // Crop to fixed width }; GDThumb.t.push(th); }); jQuery.resize.throttleWindow = false; jQuery.resize.delay = 50; GDThumb.process(); }, // Adjust thumb attributes to match plugin settings process: function() { var main_width = jQuery('ul.thumbnails').width(); var thumbs_per_row = Math.floor(main_width / (GDThumb.min_width + GDThumb.margin)); thumbs_per_row = Math.max(thumbs_per_row, 1); // Ensure at least one thumbnail per row $('ul.thumbnails img.thumbnail').each(function(index) { var thumb = jQuery(this); var th = GDThumb.t[index]; GDThumb.resize(thumb, th.real_width, th.real_height, GDThumb.min_width, GDThumb.min_height, false); }); // Ensure the process is re-run if the container width changes if (main_width != jQuery('ul.thumbnails').width()) { GDThumb.process(); } }, // Resize and crop thumbnail to fixed dimensions resize: function(thumb, width, height, new_width, new_height, is_big) { new_width = Math.max(new_width, GDThumb.min_width); new_height = Math.max(new_height, GDThumb.min_height); var use_crop = true; var real_width, real_height, width_crop, height_crop; // Calculate scaled dimensions while maintaining aspect ratio var aspect_ratio = width / height; var target_ratio = new_width / new_height; if (aspect_ratio > target_ratio) { // Image is wider than target, scale by height real_height = new_height; real_width = Math.round(width * new_height / height); width_crop = Math.round((real_width - new_width) / 2); height_crop = 0; } else { // Image is taller than target, scale by width real_width = new_width; real_height = Math.round(height * new_width / width); height_crop = Math.round((real_height - new_height) / 2); width_crop = 0; } // Apply styles to thumbnail thumb.css({ height: real_height + 'px', width: real_width + 'px' }); // Apply cropping by setting parent container size and clipping thumb.parents('li').css({ height: new_height + 'px', width: new_width + 'px', overflow: 'hidden' // Ensure overflow is hidden for cropping }); thumb.parent('a').css({ clip: 'rect(' + height_crop + 'px, ' + (new_width + width_crop) + 'px, ' + (new_height + height_crop) + 'px, ' + width_crop + 'px)', top: -height_crop + 'px', left: -width_crop + 'px', position: 'relative' }); } }
And this fixes the alignment, so it's centered within the parent element, rather than all being shoved to the left.
/* Style for the thumbnails list */ ul.thumbnails { display: flex; justify-content: center; /* Center items horizontally */ flex-wrap: wrap; /* Allow items to wrap to the next row */ list-style: none; /* Remove default list bullets */ padding: 0; /* Remove default padding */ margin: 0; /* Remove default margin */ box-sizing: border-box; /* Ensure padding/margins don't affect width */ width: 100%; /* Ensure ul takes full container width */ } /* Style for each thumbnail item */ ul.thumbnails li { margin: 10px; /* Match GDThumb.margin from JavaScript */ width: 245px; /* Fixed width from gdthumb.js */ height: 429px; /* Fixed height from gdthumb.js */ overflow: hidden; /* Ensure cropping works */ } /* Ensure images and links inside li respect cropping */ ul.thumbnails li a { display: block; position: relative; } ul.thumbnails li img.thumbnail { display: block; }
and these are my settings just in case:
Last edited by Sinulated (2025-05-04 07:32:51)
Offline