jquery.previewer.js

Introduction

This is a jQuery plugin to built to preview images or texts in webpages.

Usage

$(selector).previewer({
    trigger: 'click',         // Define what event triggers resource preview, 'click' or 'hover'. (default: click)
    type: 'image',            // Define resource type, 'image' or 'text' or 'video'. (default: image)
    src: '',                  // Define resource url. Only valid when 'type' is set to 'image'. (default: '')
    text: '',                 // Define text to be previewed. Only valid when 'type' is set to 'text'. (default: '')
    containerCSS: {},         // Styles applied to the popup layer (image/text container). (default: {}, see Example 5)
    beforeShow: function(){}, // Called before popup layer is shown (see Example 6). 
                              // The function context is HTML DOM that trigger preview event. 
                              // The function has no parameters.
    onShow: function(arg1){}  // Called after popup layer is shown. (see Example 6)
                              // The function context is HTML DOM that trigger preview event. 
                              // The function has one parameter 'arg1', which is the popup layer (a div DOM).

});

Examples

Example 1: Mouseenter event to trigger image preview.
#block1

Hover over this block to preview image.

$('#block1').previewer({
    trigger: 'hover', 
    type: 'image', 
    src: 'img/USA.gif'
});
Example 2: Click event to trigger image preview.
#block2

Click here to preview image.

$('#block2').previewer({
    trigger: 'click',
    type: 'image',
    src: 'img/China.jpg'
});
Example 3: Mouseenter event to trigger text preview.
#block3

Hover over this block to preview text information with self defined styles.

$('#block3').previewer({
    trigger: 'hover',
    type: 'text',
    text: 'Hello! This is a jQuery plugin by Horst Xu.',
    containerCSS: {
        'border': '5px solid #FFCC00',
        'background-color': '#FFCC00',
        'border-radius': '5px'
    }
});
Example 4: Click event to trigger text preview.
#block4

Click here to preview text information.

$('#block4').previewer({
    trigger: 'click',
    type: 'text',
    text: 'Hello! This is a jQuery plugin by Horst Xu.'
});
Example 5: Mouseenter event to trigger video preview.
Video Source: https://github.com/eisneim/react-html5-video
#block5

Hover over this block to preview video.

$('#block5').previewer({
    trigger: 'hover',
    type: 'video',
    src: 'movie/h5video.mp4'
});
Example 6: Click event to trigger video preview.
Video Source: http://www.w3schools.com/html/html5_video.asp
#block6

Click here to preview video.

$('#block6').previewer({
    src: 'movie/animal.ogg',
    type: 'video',
    trigger: 'click'
});
Example 7: Self defined container style.
#block7

Hover over this block to see self defined container style.

$('#block7').previewer({ 
    trigger: 'hover',
    src: 'img/Australia.png',
    containerCSS:{
        'border': '20px solid #000000',
        'border-radius': '8px',
        'background-color': '#000000'
    }
});
Example 8: Usage of beforeShow and onShow.
#block8

Click here to see the change of textarea. You may refer to the browser console to see function context.

$('#block8').previewer({
    src: 'img/GreatBritain.jpg',
    beforeShow: function(){
        var text = $('textarea#textarea-block8').val();
        var mytext = 'The function beforeShow is called.';
        $('textarea#textarea-block8').val(text + mytext + '\n');
        console.log(mytext);
        console.log(this);
    },
    onShow: function(div){
        var text = $('textarea#textarea-block8').val();
        var mytext = 'The function onShow is called.';
        $('textarea#textarea-block8').val(text + mytext + '\n');
        console.log(mytext);
        console.log(this);
        console.log(div);
    }
});