The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Pixelart Display - Image zoom with mouse

2 posters

Go down

Pixelart Display - Image zoom with mouse Empty Pixelart Display - Image zoom with mouse

Post by Wecoc Thu 1 Mar 2018 - 21:45

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
Wecoc
Wecoc
Forumember

Male Posts : 144
Reputation : 111
Language : Catalan, Spanish, English

Back to top Go down

Pixelart Display - Image zoom with mouse Empty Re: Pixelart Display - Image zoom with mouse

Post by SarkZKalie Sat 24 Mar 2018 - 13:11

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


Pixelart Display - Image zoom with mouse Sarkzk10
SarkZKalie
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 1407
Reputation : 218
Language : English

https://rotavn.forumotion.com/

Back to top Go down

Back to top

- Similar topics

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