Pixelart Display - Image zoom with mouse

Go down

Pixelart Display - Image zoom with mouse

Post by Wecoc on March 1st 2018, 9:45 pm

I made this code for my forum some time ago, it can be useful in forums about pixelart, game resources, etc.
It defines a new type of image which can be clicked several times to apply every time more zoom.

Here's how it works, you can configure it on the javascript if you want a more simple case.

Mouse clickZoom in
Mouse click + CTRLZoom out
Mouse click + AltZoom back to 100%

How to use it


It inserts a new SCEditor icon which works basically the same as the Code snippet found on this forum; it adds a new table type where you will insert the image code inside. It will look like this.

Code:
[table class="pixelart"][tr][td][img](LINK)[/img][/td][/tr][/table]


And this is the result.

Example:


After 3 clicks it looks like this

It works in phpBB2, phpBB3, punBB, Invision and modernBB.
If you are using modernBB or custom tables maybe you will have to make some extra edits for table.pixelart in CSS, to hide the table margin.

Implementation


1) First insert this Javascript, don't forget to activate the 'In all pages' tick.

Code:
/*
* -- Pixelart Display --
* Version: 1.0 EN (2017-08-29)
* Author: Wecoc
* Reference: 'Add Code snippet to the editor' by Zzbaivong
* Description: New 'pixelart' image type you can zoom in & with mouse
*/

// Insert pixelart SCEditor button

jQuery(function($) {
 
    'use strict';
 
    $('head').append($('<style>', {
        text: '.sceditor-button-pixel div{background-image:url(https://i62.servimg.com/u/f62/14/49/87/10/pixela10.png)!important}'
    }));
 
    if (!$.sceditor) return;
 
    function inlineCode(editor) {
        editor.insert('[table class="pixelart"][tr style=][td]', '[/td][/tr][/table]');
    }
 
    $.sceditor.command.set('pixel', {
        exec: function() {
            inlineCode(this);
        },
        txtExec: function() {
            inlineCode(this);
        },
        tooltip: 'Insert pixelart'
    });
 
    toolbar = toolbar.replace(/image/, 'image,pixel');
 
});

// Zoom function

function ZoomClick(ev) {
    if (!$(this).data("data-zoom")) {
        $(this).data("data-zoom", 0);
    }

    var keyAlt = ev.altKey;
    var keyCtrl = ev.ctrlKey;
    var i = $(this);
    var z = i.data("data-zoom");

    // define here the zoom changes based on keyboard
    if (keyCtrl) {
        z = Math.max(0, z - 1);
    } else if (keyAlt) {
        z = 0;
    } else {
        z += 1;
    }
 
    // skip 100% zoom if image was already at 100%
    if (z === 1 && i.width() === i[0].naturalWidth && i.height() === i[0].naturalHeight) {
        z = 2;
    }

    i.data("data-zoom", z);

    if (z > 1) {
        i.width(i[0].naturalWidth * z);
        i.height(i[0].naturalHeight * z);
    } else {
        i.width("").height("");
    }

    if (z > 0 && !i.hasClass("zoomed")) {
        i.addClass("zoomed");
    } else if (z === 0 && i.hasClass("zoomed")) {
        i.removeClass("zoomed");
    }
}

$(document).ready(function() {
 
  // Apply Zoom function on pixelart image
  $("table.pixelart img").on("click", { canvas: false }, ZoomClick);
 
  // Add icon to differentiate it from a default image
  var zoom_icon = "https://i62.servimg.com/u/f62/14/49/87/10/pixel_10.png";
  $("table.pixelart img").after('<div style="display:inline"><img class="zoom_icon" src="' + zoom_icon + '"></div>');
 
});

2) Add this in your CSS

Code:
/* Pixelart Display */

table.pixelart img:not(.zoom_icon) {
  image-rendering: optimizeSpeed;            /* Legal fallback                */
  image-rendering: -moz-crisp-edges;          /* Firefox                        */
  image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
  image-rendering: pixelated;                /* CSS3                          */
  -ms-interpolation-mode: nearest-neighbor;  /* IE8+                          */
  cursor: url('https://i62.servimg.com/u/f62/14/49/87/10/w10cur10.png') 11 11, auto;
}

table.pixelart img.zoom_icon {
  margin-left:-16px;
  vertical-align: bottom;
}

Hope you like it Smile
avatar
Wecoc
Forumember

Male Posts : 127
Reputation : 82
Language : Catalan, Spanish, English

http://www.mundo-maker.com/

Back to top Go down

Re: Pixelart Display - Image zoom with mouse

Post by SarkZKalie on March 24th 2018, 1:11 pm

I really love this and hope it have a mouseover effect without clicking hehe.
avatar
SarkZKalie
Forumember

Male Posts : 756
Reputation : 111
Language : English

http://rotavn.forumotion.com

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum