makfak supports this item


59 comments found.

There is a known bug with Chrome and jquery where resizing an image is not being called. The code you gave me never gets fired in Chrome. I found a post about the issue: Is there a way to called the resizeImage function with document.ready. Maybe that’ll trigger the images to resize.

Much like the rest of that StackOverflow post states…

IMG calls are asynchronous, meaning that the IMG element is available DOMReady and the element is present in the DOM but the element is empty until the image has finished downloading.

The proper way to get the image size is to ask, not on DOMReady but, on WindowLoad. The WindowLoad event fires when all elements present at DOMReady are fully loaded. This means that, if there are 5 images in the DOM at DOMReady, WindowLoad won’t fire until all 5 images have finished downloading.

PhotoShow doesn’t rely on either DOMReady or WindowLoad to know when to collect the image sizes. It creates a unique load event for each image, loading it into memory (outside of the DOM ).

When you say, “the code you gave me”, are you referring to the snippet I posted to you on 12/19? If so, it would be easier for me to maintain this conversation if you responded to that thread OR contacted me directly (via my author page) so that we could keep this conversation in a single email thread.

You also haven’t answered any of the questions I asked in my response to your last thread.

You’re probably calling sizeImages on DOMReady for a bunch of images that haven’t finished loading. There is a reason PhotoShow is structured the way it is. Please stop trying to circumvent it’s VERY INTENTIONAL design and then asking for support when your hack doesn’t work.

This is something that would be nice to incorporate too…

This plugin is completely unnecessary. Read my response to your previous comment and, please, try to keep your comments threaded.

Hi makfak,

is it possible after opening an album to see the thumbs first?

Thanks a lot!

Greets Daniel

start_view : 'thumbs'

... will have PhotoShow start by showing the thumbnails.

Are you asking about showing the thumbnails again after you’ve switched albums? You’re right, the “start_view” should honored there as well.

I’ll make that change an get a release out. Thanks.

What I need is quite simple. First you have the overview of the albums
start_view : 'albums'
Now you can see all the albums you made. For me its more logical to open first the Thumb overview of the album I was choosing. Because It might be that you´re searching for a certain photo and you don´t wanna skip through all the photos that are in the album.

So, when I push the album the thumb overview should come next.

Thank you so far!

Sorry for my bad english ; )

Interesting idea. I’ll consider it for a future release.

Is there a way to make this fullscreen?

You can set it’s height and width to match your screen. You’ll simply need to position the nav with some CSS .

Based on an earlier post I have 2 questions. When photoshow first loads it resizes the images to fix in the gallery properly.

See example code you provided me:

sizeImages: function($images){ var self = this, $lis = $images.find(‘li’).addClass(‘PS_current’), $imgs = $images.find(‘img’), optsWidth = parseInt(self.opts.width, 10), optsHeight = parseInt(self.opts.height, 10), galleryIsLandscape = ( optsWidth > optsHeight ) ? true : false, $img, diff, w, h, imgIsLandscape, matchWidth; },

$.each($imgs, function(){
    $img = $(this);
    w = $img.width();
    h = $img.height();
    imgIsLandscape = ( w > h ) ? true : false;
    matchWidth = true;
if ( h === 0 ) {
    matchWidth = false;
} else if ( galleryIsLandscape && imgIsLandscape ) {
    if ( ((optsWidth * h) / w)  > optsHeight) {
        matchWidth = false;
} else if ( galleryIsLandscape ) {
    matchWidth = false;
if ( matchWidth ) {
    if(optsHeight > h) {
        diff = optsHeight - Math.floor((optsWidth * h) / w);
    } else {
        diff = optsHeight - h;
        'width' : self.opts.width,
        'height' : 'auto',
        'top' : Math.floor(diff / 2)
} else {
        'width' : 'auto',
        'height' : self.opts.height
    'width' : this.opts.width, 
    'height' : this.opts.height

Is there a way to get that image size when the page is resized so the image resizes correctly. Also I have an open request about the caption loading by default. You said this was a bug that would be fixed.

Are you trying to ask how to get PhotoShow to change size (scale up or down) when the user resizes the page?

The easiest thing if for you to write a custom onResize listener (outside of PhotoShow) that, when the page is resized, destroys the current PhotoShow and makes a new one.

Otherwise you’ll have to add a number of resize hooks to the PhotoShow JS to redo all of the sizing logic for every aspect of the gallery (not just the large images – you’ll need to redo the thumbs and albums as well). This is the wrong approach and I don’t endorse it.

I remember your caption request and I thought I had dealt with it. I’ll take a look and let you know.

When you saydestroy current photoshow…are you referrign to the width and height od the gallery. I noticed that by default when the gallery first loads, the image rezing works great when the dimensions for my gallery are 784×450. Now if I change the width/height of the container of the gallery on resize, the numbers for the gallery need to update. I have a jquery bind event do do this, but my problem is that i can’t get the current image size of the image when the gallery is first loaded. I need those dimensions so as I scale up/down the photoshow gallery resizes properly.

I agree I don’t want to add anything extra to photoshow. If its bette rto contact you outside the forum for questions like this, what email should I use?

When I say destroy I’m talking about…

$('... your photoshow container ...').empty()

Completely remove it from the page. Then rebuild it as if the page were loading for the first time…

$('... your photoshow container ...').photoShow({ ... your config ... })

The only params that might need to change when you instantiate the new photoShow are the height/width (unless you let PhotoShow size itself).

A crude version…


If you have more questions you can leave them here (please try to keep the conversation threaded) or you can contact me via my author page which will start an email conversation. I’m fine with either.

Here is what I came up with but the gallery goes away…
    var params = {
            auto_play : false,
            captions_visible: 'hover',
            start_view : 'photo', // photo, thumbs, albums
            height : "390px",
            width : "500px" 
            //gallery : "data/" 


Why are you deleting the gallery, rebuilding the gallery, and then overwriting the gallery with params that overtly don’t include the gallery data?

Are you saying my approach is correct but that I also need to place the JSON data there as well. Do you have a rough example for an approach?

I’m saying that your code doesn’t make any sense. The approach (onResize: destroy & rebuild) is good – but it’s what I suggested you do. It’s clear you’re trying to do that but your code is insane.


/* To keep things DRY (Don't Repeat Yourself)
 * we create a function that calls 
 * PhotoShow that accepts 2 ints - for 
 * width and height respectively.
 * This function will be called when the 
 * page loads and whenever our onResize 
 * event fires.
 * The IFs allows us to keep our default 
 * values close to the PhotoShow call.
 * First... any global variables.
var $target = $('#target');

function buildPhotoShow(width, height) {
    if(!width) {
        width = 500;
    if(!height) {
        height = 390;
        gallery : "data/",
        height : width + "px",
        width : height + "px",
        auto_play : false

 * The document.ready listener fires an 
 * event when the DOM is fully loaded.
 * This will only run on the initial page load.
 * Not passing width & height values to 
 * buildPhotoShow will cause our default 
 * width/height to be used.

/* This is the onResize event listener.
 * It will 3 things...
 * 1) determine our new width & height
 * 2) remove the current PhotoShow
 * 3) create a PhotoShow with the new dimensions
    var new_width = $target.width(),
        new_height = $target.height();

    // delete the current PhotoShow
    // create a new PhotoShow
    buildPhotoShow(new_width, new_height);

makes perfect sense…but Im using JSON …should I put the json array into the build function or does it need to be XML ?

Are you kidding? Everything I wrote was an EXAMPLE . Don’t just copy/paste and expect it to work. I don’t know your EXACT setup.

Whatever you do when you make your PhotoShow – just do that again. If you use JSON , use JSON . You put XML in your example. I was just following your lead. I also used ”#target” because it’s what you used in your example. I have no idea if that’s really what you called your PhotoShow container.

Hi Mike, We you ever able to resolve the issue of the Caption hover being stuck on with the first instance load? As you recall when the gallery first loads on the page the caption is ON but if you select a new gallery (or even the same one) the caption then goes into ON Hover mode which is what it should be doing in the beginning.

This is the last glitch to finish for a client

Thanks for the awesome support :-(

Hi! The album is not showing in IE… any idea why? Thanks

Hi Makfak,

I just bought your plugin, but have 2 problems: 1. It’s not displaying the sort order I save. 2. It’s not displaying the correct preview image I select.

Any ideas on how to fix these? Many thanks!

is it working in widget areas ?

Yes. You can place a shortcode in a Text widget.

Hi Makfak

I have all informations about images in SQL base. The simplest way is to put it to HTML using PHP+MySQL. So, can you change the plugin to have more albums via HTML. Proposal:
    <!- album 1-> <!- first image is always thumbnail of this album and title is used as album title, alt is already used->
  • title01
  • next image as it was
    <!- album 2->

If this is not possible not I have to generate xml file each time when user change the information in SQL base.

Consider it, please.

I’ll consider it for a future release.

I must write it again.

Would be good to have more albums via HTML. My proposal is to place ich album in “ul”. And first “li” is a thumbnail of this album. In add “title” in first “li” can be title of album.

I’ll consider it for a future release.

I have purchase and host the files here

but the light-box is not working. Please suggest me the solution.

Thanks Pranav

I’ve responded to your email as well as answered here.

You need to include your lightbox’s JS and CSS on the page. You also need to set the “modal_ready_callback” param.

All of this is covered in the “Customization” section (specifically the “modal_*” subsection) of the documentation that came with your download.

PhotoMosaic is over?


No. CodeCanyon mistakenly deactivated it. It’s back now.


I don’t understand, I can’t use the link on picture :( they don’t work :/

If you have a question about PhotoMosaic please ask it in the PhotoMosaic comments.