Macadames' blog

Le silence est d'or, jusqu'à ce qu'il devienne plomb.

Archive for the ‘javascript’ Category

jquery PostMessage, pour une application en iframe

leave a comment »

Ce petit produit javascript est indispensable pour intégrer une application sous forme d’iframe à l’intérieur d’un portail.

Ca permet d’échanger côté client entre les deux serveurs, à condition d’autoriser la communication.

Applications immédiates :

  • taille de l’iframe
  • impression correcte de l’iframe à l’intérieur de la page qui l’appelle
  • style de l’iframe pouvant s’adapter dynamiquement
  • échange de données entre les deux applications en passant par le client.

C’est compatible avec tous les navigateurs, y compris ceux qui ne supportent pas la méthode window.postMessage comme IE6, avec quelques contraintes mineures dans ce cas.

Après l’avoir utilisé à fond même pour des choses qui me paraissaient difficiles (soucis avec l’impression entre autre) je constate que cet outil est juste parfait.

http://benalman.com/projects/jquery-postmessage-plugin/

 

 

 

 

Publicités

Written by macadames

10, janvier 2013 at 11:11

Publié dans javascript, jquery

Three Plone addons – part 1 : Plone Quick Upload

with 9 comments

Three Plone addons – part 1 : Plone Quick Upload

As good things usually happen in threes, i present you three new Plone addons i released in September 2010, i hope you will find them useful.

The first product is Plone Quick Upload (pypi package name is « collective.quickupload »), a pure javascript multiple upload tool for Plone, look at the first screencast, you could think « oh i know it’s a new Flash Upload tool » and you would be wrong, FlashUpload has no drag and drop 😉

http://www.youtube.com/watch?v=stiSEYqmeiQ&feature=channel

Plone Quick Upload has a control panel with useful options (limit size, limit parallel uploads, direct upload on select, fill titles before upload, …)  :

http://www.youtube.com/watch?v=sUf7tGQXiuA&feature=channel

As you can see, Plone Quick Upload manage errors and returns i18n messages when an upload raise an error (file always exist, file is too big, no permission to add content, bad content type, etc …).

For unfortunate MSIE users, the pure javascipt way cannot allow multiple selection and drag and drop, so the upload form has a graceful fallback, look at the next screencast, it’s not so bad.
And you can also choose in Plone Quick Upload control panel, to replace the pure javascript client script by a Flash Upload based script, it’s not recommended and it cannot work behind an HTTP authenticated server, but  some people want it :

http://www.youtube.com/watch?v=7hMTVk7C-pw&feature=channel

More information about Plone Quick Upload (installation, use it in your own template, etc …) here  :

http://plone.org/products/collective.quickupload/

Written by macadames

24, septembre 2010 at 11:04

Resizing and cropping thumbnails with jquery

with 3 comments

Resizing and cropping images with jquery

Sometimes, we need images with fixed dimensions (carousels, photo albums …), but all images don’t have the good dimensions or good ratio height /width.

This little jquery script will help you for this usecase.

In this example we will fix the dimension and position of thumbnails placed in blocks using the class « imageContainer ». « imageContainer » have a fixed width and height (in this example 250px/150px). The size of thumbs will be increased or reduced, and the thumb will be moved inside its container to get a centered cropping. Of course images and its containers must have a relative position.

Your html template code looks like :

  <a class="imageContainer" href="the_link">
    <img src="the_image_src" alt="" width="450" height="300" />
  </a>
  <a class="imageContainer" href="another_link">
    <img src="another_image_src" alt="" width="200" height="100" />
  </a>

In your css, you must fix at least :

.imageContainer,
.imageContainer img {
  position: relative;
}

.imageContainer {
  width: 250px;
  height: 150px;
  overflow: hidden;
  border: 1px solid grey;
}

The javascript code is simple :

var canImproveResolution = false;

thumbResize = function(thumb, min_width, min_height, orientation) {
    twidth = jQuery(thumb).width();
    theight = jQuery(thumb).height();
    new_height = theight;
    new_width = twidth;
    // strange 1px bug on MSIE
    if (jQuery.browser.msie) {
        min_width = min_width+1;
        min_height = min_height+1;
    }
    //calculate the good size
    if (orientation=='landscape') {
        ratio = min_width/min_height;
        tratio = twidth/theight;
        if (tratio>ratio) {
            new_height = min_height;
            new_width = parseInt(new_height*tratio);
        }
        else {
            new_width = min_width;
            new_height = parseInt(new_width/tratio);
        }
    }
    else {
        ratio = min_height/min_width;
        tratio = theight/twidth;
        if (tratio>ratio) {
            new_width = min_width;
            new_height = parseInt(new_width*tratio);
        }
        else {
            new_height = min_height;
            new_width = parseInt(new_height/tratio);
        }
    }

    // resize thumb
    if (theight!=new_height || twidth!=new_width) {
        jQuery(thumb).height(new_height);
        jQuery(thumb).width(new_width);
    }
    // adjust position (vertical and horizontal centering for css cropping)
    if (new_width > min_width) {
        moveleft = parseInt((new_width-min_width)/2);
        jQuery(thumb).css('left', '-'+moveleft+'px');
    }
    if (new_height > min_height) {
        movetop = parseInt((new_height-min_height)/2);
        jQuery(thumb).css('top', '-'+movetop+'px');
    }
    // improve resolution
    if (canImproveResolution && (new_width > twidth || new_height > theight)) improveResolution(thumb);
}

resizeThumbs = function(thumbs, min_width, min_height) {
    orientation = (min_height > min_width) ? 'portrait' : 'landscape';
    // hide images before resizing to avoid bad visual effect
    thumbs.each( function() {
            jQuery(this).css('visibility', 'hidden');
        })
    // use window.load because on document.ready images are not always loaded
    jQuery(window).load(function() {
        thumbs.each( function() {
            thumbResize(this, min_width, min_height, orientation );
            jQuery(this).css('visibility', 'visible');
        })
    });
}

// change image src for a better resolution
// this is just an example for Plone, adapt it with
// your own sizes rules

improveResolution = function(img) {
    img_src = img.src;
    img_src = img_src.replace(/\/image_preview/gi, '/image');
    img_src = img_src.replace(/\/image_mini/gi, '/image_preview');
    img_src = img_src.replace(/\/image_thumb/gi, '/image_mini');
    img.src = img_src;
}

For Plone users, there is a small improvement, if you fix the variable :

canImproveResolution = true;

you will get a better resolution when increasing image size  (works only with standard plone image thumb sizes …).

At last launch the script for the wanted thumbnails :

jQuery(document).ready(function(){
  resizeThumbs(jQuery('.imageContainer img'), 250, 150)});

Written by macadames

4, mars 2010 at 12:18