Shop

GlassCase – jQuery Image Zoom Plugin

$20.00

Category:

Description

LIVE PREVIEWBUY FOR $20

    <strong>GlassCase</strong> is a responsive jQuery plugin that helps you to
    <strong>add Image Zoom feature</strong> with
    <strong>HTML5 Video &#38;&#38; IFrame</strong> capabilities to your product view and gives to your customers an amazing viewing experience.


    <strong>GlassCase</strong> is well designed, built from scratch and gives you some unique features.
    <br /> You can easily integrate it in your project and deliver faster to your customers.

<h2 id="item-description__-key-features"> Key Features:</h2>
<a href="http://www.tinycomp.net/products/glasscase-jquery-image-zoom-plugin/features" rel="nofollow"><img src="http://www.tinycomp.net/images/features.jpg?v=1.1" alt="GlassCase - jQuery Image Zoom Plugin - 1" /></a>
<h4 id="item-description__note">Note</h4>
<ul>
    <li>This is not a WordPress Plugin. GlassCase is a jQuery based plugin.</li>
</ul>

    Take a minute to
    <a href="http://www.tinycomp.net/products/glasscase-jquery-image-zoom-plugin/features" rel="nofollow">
        <strong>see it</strong>
    </a> by yourself <img src="/images/smileys/wink.png" alt="GlassCase - jQuery Image Zoom Plugin - 2" />

Have a
    <strong>pre-purchase question</strong> to be sure that it&#8217;s suitable for you?
    <br /> Then please send us a quick message via our
    <strong>profile contact form.</strong>

<h2 id="item-description__-what-buyers-are-saying"> What buyers are saying: </h2>

    &#8220;I highly recommend this product to others who may be interested in purchasing GlassCase! tinyComp has been quick to respond
    to support request and listened to thoughts on ways to improve GlassCase.
    <br /> Five Stars well deserved!&#8221; 
    <br />
    <strong>-ubhape2</strong>


    &#8220;Hi I rarely writes comments, but this deserves one. Thanks for this one. This is a great plugin, it does what it should,
    and it took not more than a half an hour to set up.&#8221; 
    <br />
    <strong>-amja</strong>


    &#8220;Hi, Lovely plugin and really easy to implement.&#8221; 
    <br />
    <strong>-loudon</strong>


    &#8221;... I just had to say how brilliant this is. It is working so perfectly and it solves so many image issues I was having.
    I simply love this. It is now fully integrated into my website. To anyone thinking about getting this, it is quite simply
    brilliant!!!!!!&#8221; 
    <br />
    <strong>-pauld123</strong>


    &#8220;Im very glad to fing classcase for my project. It&#8217;s very usefull.&#8221; 
    <br />
    <strong>-soluma</strong>


    You can find more reviews from real buyers on
    <a href="https://codecanyon.net/item/glasscase-jquery-product-image-zoom-plugin/7843419/comments">
        <strong>comments</strong>
    </a> page.

<h2 id="item-description__-change-log"> Change Log:</h2> 
<h3 id="item-description__-3-0-1-08-april-2018">
    <strong>3.0.1</strong> &#8211; 08 April 2018</h3>
<strong>Fix</strong>:
<ul>
    <li>
        Fixed issue related to event handler declaration, Firefox specific;</li>
</ul>
<h3 id="item-description__-3-0-24-november-2017">
    <strong>3.0</strong> &#8211; 24 November 2017</h3>
<strong>New</strong>:
<ul>
    <li>The whole component was re-written from scratch. It was changed how the component works internally, all the options have
        been kept, except
        <strong>
            <code>isDownloadEnabled</code>
        </strong> that was deprecated. No changes were done to the option names.</li>
    <li>To the component was added the capability of showing HTML5 Video and IFrame content. Were added the following options:
        <ul>
            <li>
                <strong>
                    <code>iframeWidth</code>
                </strong> &#8211; The IFrame width;</li>
            <li>
                <strong>
                    <code>iframeHeight</code>
                </strong> &#8211; The IFrame height;</li>
            <li>
                <strong>
                    <code>txtImgThumbIframe</code>
                </strong> &#8211; The text that is used by the image thumb holder, for the IFrame thumb image;</li>
            <li>
                <strong>
                    <code>videoWidth</code>
                </strong> &#8211; The HTML5 video width;</li>
            <li>
                <strong>
                    <code>videoHeight</code>
                </strong> &#8211; The HTML5 video height;</li>
            <li>
                <strong>
                    <code>txtImgThumbVideo</code>
                </strong> &#8211; The text that is used by the image thumb holder, for the video thumb image;</li>
        </ul>
        Also, were added data attributes(related to HTML5 Video &#38;&#38; IFrame):
        <ul>
            <li>
                <strong>
                    <code>data-gc-type</code>
                </strong> &#8211; The type of the element. Possible values: IFrame, video;</li>
            <li>
                <strong>
                    <code>data-gc-width</code>
                </strong> &#8211; Defines the width of the container. Overrides the value defined in the plugin&#8217;s options. This data attribute
                affects the following type of elements: IFrame, video;</li>
            <li>
                <strong>
                    <code>data-gc-height</code>
                </strong> &#8211; Defines the height of the container. Overrides the value defined in the plugin&#8217;s options;</li>
            <li>
                <strong>
                    <code>data-gc-formats</code>
                </strong> &#8211; This attribute is used only by the video element type. It is used for specifying multiple source files(multiple
                formats) as a fallback in case the user&#8217;s browser doesn&#8217;t support one of them. The type of this attribute
                is an array of strings;</li>
            <li>
                <strong>
                    <code>data-gc-poster</code>
                </strong> &#8211; This attribute is used only by the video element type. Provides an image to show before the video loads;</li>
        </ul>
    </li>
    <li>To the component was added the capability of autoplay. Were added the following options:
        <ul>
            <li>
                <strong>
                    <code>isAutoPlayDisplay</code>
                </strong> &#8211; Enable or disables the auto play of the images;</li>
            <li>
                <strong>
                    <code>pauseTimeDisplay</code>
                </strong> &#8211; Time between the change of images enabled by isAutoPlayDisplay. Value is in milliseconds;</li>
            <li>
                <strong>
                    <code>isPauseOnHoverDisplay</code>
                </strong> &#8211; If set to true, on hovering the display image the auto play display will pause;</li>
        </ul>
    </li>
    <li>To the thumb slider was added the option
        <strong>
            <code>slideType</code>
        </strong> &#8211; The sliding effect related to the thumbs area. Possible values: &#8216;slideRow&#8217;, &#8216;slideElement&#8217;.</li>
</ul>
<h3 id="item-description__-2-1-11-february-2015">
    <strong>2.1</strong> &#8211; 11 February 2015</h3>
<strong>New</strong>:
<ul>
    <li>The posibility to add captions. Captions can be added in the Zoom Area;</li>
    <li>
        <strong>
            <code>isZCapEnabled</code>
        </strong> &#8211; enables / disables the Zoom Captions;</li>
    <li>
        <strong>
            <code>capZType</code>
        </strong> &#8211; the type of Zoom Caption:
        <strong>
            <code>in</code>
        </strong> &#8211; placed inside the Zoom Area;
        <strong>
            <code>out</code>
        </strong> &#8211; Captions are placed outside the Zoom Area;</li>
    <li>
        <strong>
            <code>capZPos</code>
        </strong> &#8211; the position of the Caption in relation to the Zoom Area;</li>
    <li>
        <strong>
            <code>capZAlign</code>
        </strong> &#8211; the alignment of the text placed in Caption for Zoom;</li>
    <li>
        <strong>
            <code>mouseEnterDisplayCB</code>
        </strong> &#8211; callback for the mouseEnter event of the display image;</li>
    <li>
        <strong>
            <code>mouseLeaveDisplayCB</code>
        </strong> &#8211; callback for the mouseLeave event of the display image;</li>
    <li>When processing the images, the ones that have the same href will be removed.</li>
</ul>
<strong>Fix</strong>:
<ul>
    <li>The image&#8217;s
        <strong>
            <code>ALT</code>
        </strong> is saved and passed;</li>
</ul>
<h3 id="item-description__-2-0-30-october-2014">
    <strong>2.0</strong> &#8211; 30 October 2014</h3>
<strong>New</strong>:
<ul>
    <li>The component was made touch friendly;</li>
    <li>Were added the options to set the thumbs on left or right side of the Display Image;</li>
    <li>The icons were changed to another set;</li>
    <li>Was changed the loading wheel(it uses CSS3)</li>
    <li>New option:
        <strong>
            <code>isHoverShowThumbs</code>
        </strong> &#8211; on hovering a thumb it will change the Display Image;</li>
    <li>Was added a new Zoom position: Inner &#8211; The Zoom will be shown inside the Display; </li>
    <li>New option:
        <strong>
            <code>autoInnerZoom</code>
        </strong> If the Display and Zoom do not fit on the page, Zoom will be shown in inner position;</li>
    <li>Was handled the case when an image is not loaded: in this case it will appear a holder.</li>
</ul>
<h3 id="item-description__-1-4-16-september-2014">
    <strong>1.4</strong> &#8211; 16 September 2014</h3>
<strong>New</strong>:
<ul>
    <li>
        The zoom&#8217;s width and height can be customized. It can be aligned to the image container or the image area;
        <ul>
            <li>
                <strong>
                    <code>isZoomDiffWH</code>
                </strong> &#8211; Determines if the zoom&#8217;s width and height have different values;</li>
            <li>
                <strong>
                    <code>zoomWidth</code>
                </strong> &#8211; The width of the zoom. The value is in px;</li>
            <li>
                <strong>
                    <code>zoomHeight</code>
                </strong> &#8211; The height of the zoom. The value is in px;</li>
            <li>
                <strong>
                    <code>zoomAlignment</code>
                </strong> &#8211; Possible values: &#8216;displayImage&#8217;, &#8216;displayArea&#8217;.</li>
        </ul>
    </li>
    <li>
        <strong>
            <code>zoomMargin</code>
        </strong> &#8211; The distance between the zoom and display area;</li>
    <li>
        <strong>
            <code>thumbsMargin</code>
        </strong> &#8211; The distance between the thumbs and display area;</li>
</ul>
<strong>Fix</strong>:
<ul>
    <li>
        The opacity of the image in the overlay, in ie8;</li>
    <li>
        The issue related to: clicking on a selected thumb, it disables the selection of another image;</li>
</ul>
<h3 id="item-description__-1-3-5-september-2014">
    <strong>1.3</strong> &#8211; 5 September 2014</h3>
<strong>New</strong>:
<ul>
    <li>
        <strong>
            <code>isOverlayFullImage</code>
        </strong> &#8211; If true the image in overlay will be shown in full size and only. If false the image will fit the display. On double
        clicking, the image size will be toggled. If the image is in fit =&gt; after double click it will be shown in full size.
        If the image is in full size =&gt; after double click it will fit the display;</li>
    <li>
        In overlay, clicking outside the image will close it;</li>
    <li>
        <strong>
            <code>isSlowZoom</code>
        </strong> &#8211; Enables the effect of &#8220;slowing&#8221; the movement of zoom;</li>
    <li>
        <strong>
            <code>speedSlowZoom</code>
        </strong> &#8211; Determines how long the animation will run. The speed is given in milliseconds;</li>
    <li>
        <strong>
            <code>isSlowLens</code>
        </strong> &#8211; Enables the effect of &#8220;slowing&#8221; the movement of lens;</li>
    <li>
        <strong>
            <code>speedSlowLens</code>
        </strong> &#8211; Determines how long the animation will run. The speed is given in milliseconds;</li>
    <li>
        <strong>
            <code>speed</code>
        </strong> &#8211; Determines how long the animation will run. The speed is given in milliseconds. This value is used in the animation
        of lens; zoom; overlay; slide;</li>
    <li>
        Added to the selector &#8221;.gc-zoom-container img&#8221;: &#8220;max-width: none !important;&#8221;.</li>
</ul>
<h3 id="item-description__-1-2-1-24-august-2014">
    <strong>1.2.1</strong> &#8211; 24 August 2014</h3>
<strong>Fix</strong>:
<ul>
    <li>
        If firstThumbSelected will be greater than the total number of thumbs then to firstThumbSelected will be assigned it&#8217;s default
        value.
    </li>
</ul>
<h3 id="item-description__-1-2-31-july-2014">
    <strong>1.2</strong> &#8211; 31 July 2014</h3>
<strong>New</strong>:
<ul>
    <li>
        The GlassCase component was made responsive;</li>
</ul>
<strong>Fix</strong>:
<ul>
    <li>
        Corrected the height of the component when it has no thumbs and only the display is used.</li>
</ul>
<h3 id="item-description__-1-1-1-12-july-2014">
    <strong>1.1.1</strong> &#8211; 12 July 2014</h3>
<strong>Fix</strong>:
<ul>
    <li>
        Bug related to the case when the number of images is one more than the number of thumbs per row.</li>
</ul>
<h3 id="item-description__-1-1-09-july-2014">
    <strong>1.1</strong> &#8211; 09 July 2014</h3>
<strong>New</strong>:
<ul>
    <li>
        <strong>
            <code>isZoomEnabled</code>
        </strong> &#8211; Enables or disables the zoom;</li>
    <li>
        <strong>
            <code>isOverlayEnabled</code>
        </strong> &#8211; Enables or disables the overlay.</li>
</ul>
<strong>Fix</strong>:
<ul>
    <li>
        Changed the script so it could properly work in IE8;</li>
</ul>


Source

Reviews

There are no reviews yet.

Be the first to review “GlassCase – jQuery Image Zoom Plugin”

Your email address will not be published.

%d bloggers like this: