Home› Plugins

ThumbsZoom Plugin: I'm working on it

bic Member, Translator
in Plugins
Hi, I've added a new functionality to my theme, to have a zoom effect on the thumbs (in album and search result pages) when the mouse stops on them. You can see how it works here:
http://www.antonioranesi.it/mamma_mia

This is a theme based mod, but if you like it I can make a plugin to have it working for almost every official theme of zenphoto.
I'm testing the plugin right now, it can work without theme support using an ajax call.
«1

Comments

  • acrylian Administrator, Developer
    A plugin would be better. New plugins are always welcome. ( It will of course not work on mobile/tablet devices as they don't have a "hover" but they can just use the normal "big" view then)

    See the contributor guidelines about submitting a plugin (see "get involved"). Then we add an entry to the extensions section.

    PS: You should rename it btw. Those are not "album thumbs" but the "image thumbs".
  • bic Member, Translator
    I am adding an option to the plugin, so that any user can choice if use the ajax engine (default) or add the theme support, if using a custom theme.
    The second method is of course more responsive, because doesn't need a server request.
    Anyway I'm making the ajax call cacheable.

    I have a question:
    Since I need the filter only in album pages and in search result pages I'm looking for the best way to detect the context. So far I have found this method, though I'm quite sure that there must be a better way.
    To detect if we are in an album page:
    `if (in_context(ZP_ALBUM)&&!in_context(ZP_IMAGE))`

    Edit:
    yes, I should rename the topic also, but the time for editing is over... can you do it for me?
  • acrylian Administrator, Developer
    I changed the topic name.

    You are detecting the context which will work but you can also simply check for the gallery page by using `if($_zp_gallery_page == ' album.php'). This what we generally do. It will of course not work if anyone uses a special custom theme structure.
  • bic Member, Translator
    Thanks acrylian, I'll use your tip that will work for official themes at least.

    For the name, don't you think it's better ImgThumbsZoom?
    This plugin will not work on all the possible thumbs in zenphoto, only on the image thumbs.
  • acrylian Administrator, Developer
    Regarding the name I guess you will have some usage instruction. Even with "imgThumbs" zoom you could think it will work with other thumbs.
  • bic Member, Translator
    Ok, then shorter is better, thanks again.
    Furthermore, I can always add new functionality in the future for other kinds of thumbs...
  • bic Member, Translator
    Update:
    The plugin is up and running in my local environment.
    I've tested it with mod rewrite on or off and with ajax or theme based engine.
    It works with every official not mobile theme but Stopdesign.
    It's quite tricky to add support for Stopdesign theme, because it not only uses a different class for thumbs and a different child structure for images thumbs (that are background images), but it also have a text-indent: -9999px; rule (.thumbs a) in CSS that prevents the possibility to easily preserve the link to the main image page in zoomed thumbs.
  • acrylian Administrator, Developer
    Great, so ready for a extension page entry? If so let us know where to link to

    I am not overly familiar with all Stopdesign details as it is quite a special theme (as Eff+). But that rule is normally just used to hide text as an image replacement technique. We use the same one for example for our logo on our site.

    Anyway, it is virutally impossible to support all themes since they can be quite different. People need to do some customizing anyway for a lot of things. Maybe just put a note in your instructions that it may not work with all themes by default.
  • bic Member, Translator
    Yes, it's virtually ready. I just need to publish an instruction and download page on my site to host it, and may be make some optimization for the code, adding also some understandable comments on it.

    In an optimization perspective, how would you deal with a very few css rules, that are needed for positioning the zoom over the original thumbs?
    At the moment they are in the js instructions, because I don't think they are enough to worth a separate css file or an inline style script, that I should place between <head> tags enabling an otherwise unneeded theme_head filter.
  • acrylian Administrator, Developer
    Actually inline css should be avoided but in this case it makes sense. Inline css also has always priority overriding css file rules. Disadvantage is of course that no one can set custom styles but that is probably not needed for this effect.

    Otherwise the theme_head filter would be the way.
  • sbillard Member
    I think you should ignore stopdesign. As acrylian has said, it is a very complex, special theme. The developers also find that they cannot support all extensions on that theme as well.

    As to the thumbnails, they are implemnted as background images which may make your mouse-over stuff impossible. It is actually the "frame" that is the image.
  • bic Member, Translator
    Actually it could be possible to add the support for Stopdesign, adding the proper selector in js file, but then is not easy to deal with the text-indent rule. The plugin puts the zoomed image inside the tag a, to have the same link of the corresponding thumb to image page, but the text-indent rule moves the zoomed image out of the screen.
    I could add a temporary jquery css rule to override text-indent while the zoom is visible or may be add a specific rule for "a" tag inside my container...

    I was also trying to add support for translation, using gettext_pl() function, but I was not able to get it work.
    I've compiled the .mo file for italian language, putted .po and .mo files in the locale folder inside my plugin folder, but no way to see the translation.
    Btw in the documentation (http://www.zenphoto.org/news/translating-tutorial#plugin-translation) is missing an important info, that I found in functions-i18n.php. Beside the text to be translated, also the name of the plugin is required by the function:
    `gettext_pl('some text','plugin name')`
  • acrylian Administrator, Developer
    Thanks for the note! The translation tutorial indeed is missing that info.
  • bic Member, Translator
    Eureka!
    The file .mo has to have the same name of the plugin!
    This info is missing too in the tutorial, or may be it's not so clear..
    Now the translation works!
  • acrylian Administrator, Developer
    That actually was there once for sure! Somehow my last edit has killed the formatting of the example completely, too. Fixed now. Thanks for letting us know again.
  • bic Member, Translator
    You are welcome acrylian, I know how hard are you working on this project, with a very few people constantly engaged in the development. Any time I can give a little help I'm really very glad.
    The couple of hours I spent, figuring out how to get the plugin translation working, now make sense, because this will save time to other people.
  • acrylian Administrator, Developer
    Thanks. Let us know in case you find anything more or unclear descriptions (hopefully not that much...;-)).
  • bic Member, Translator
    I've added the support for Stopdesign, quite tricky for several reasons. Of course, as sbillard said, the mouse over effect can't be associated with the images (because they are backgrounds) but with their container. Anyway it's not a big difference for users I suppose.

    Now I'm writing the documentation and download page on my site, but I'm having problems with the download manager (download list plugin) of Zenphoto.

    For some reason the downloaded file provided by PrintDownloadLink function is corrupted, while the same file, downloaded via a direct link in the address bar of the browser, is ok.

    I've tried .zip and .tar files, and also .jpg and .pdf files to make a check.
    The strange think is that only pdf files are downloaded correctly, while the other 3 formats are leading to corrupted files.

    Any idea about the reason?
  • bic Member, Translator
    Now comes the most strange think I discovered:

    I've downloaded 2 small zip files, one with the link provided by `PrintDownloadLink`, the other one with a link I manually added to my page, pointing directly to the file.

    Then I've opened both files with a text editor (notepad++) and, surprise, the first file as a blank line at the very beginning, that the other (working) file has not.

    More: once I deleted the blank line in notepad++ and saved the corrupted file, it was no more corrupted!
  • acrylian Administrator, Developer
    Hm, no idea why that would happen. Did you try another browser? Actually it should send the right headers with mimetype and such.

    It is working on our own site (the older versions archive).
  • bic Member, Translator
    I've tried with firefox and opera, same behavior...

    Edit:
    The blank line actually contains two symbols: [CR][LF]
  • acrylian Administrator, Developer
    I have no idea right now, sorry. Maybe server related. Hopefully sbillard will have any more ideas.
  • bic Member, Translator
    I have no idea either, the symbols are obviously just a line break.
  • bic Member, Translator
    Googling around I've just found that adding the line `ob_clean();` just before the line `flush();` (603 in downloadList.php), solves the problem. May be I should open a ticket.
  • acrylian Administrator, Developer
    Yeah, a ticket is a good idea. Still weird that it works for us and not for you...
  • bic Member, Translator
    Maybe it's because I'm on a windows system and you on Mac (if I remember well). I've tried with files downloaded from localhost and from remote server (linux), and the result is the same. So the problem must be the way in which Windows manages the files when opens them.

    I've opened the ticket, where I've also noticed that possibly can also be added the Content-Length Header after the fix (?)
  • acrylian Administrator, Developer
    That might be indeed. THose behave quite differently sometimes. But actually sbillard should have notice that on localhost as well. Anyway, he surely will respond and then we know more.
  • bic Member, Translator
    No, as sbillard said in a comment to the ticket, there must be something wrong in my theme. I tried a download with an official theme and the file was ok.
    Sorry for not trying it before open the ticket, but I really could not imagine that this was theme related. :(
  • bic Member, Translator
    I didn't forget to post the link for the extension page, the matter is that I have also regular work to do, so I have not yet finished to write the hosting page for the plugin.

    Since all I have learned about coding in the latest 3 years (before I didn't even know what php and javascript were) is due also to the support of the Zenphoto team, in this forum and in the bugtracker, I would like to add sbillard and acrylian to the acknowledgments.
    I was wondering if you prefer a link to your own sites, or just another link to Zenphoto page. Keep in mind that I already have more than one link to Zenphoto in that page.
  • acrylian Administrator, Developer
    No hurry with the plugin and no need to apologize. It all can wait until next year..:-).

    Thanks, if there is already a Zenphoto,org link we indeed don't need another one. We probably don't really need links to our sites since we were not directly involved actually. But if you like you find the links to our sites on the Zenphoto team page.
Sign In or Register to comment.