How To Enable Zoom Scalable in Protostar Template? Topic is solved

Everything to do with Joomla! 3.x templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10.
Locked
IvanVk
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 156
Joined: Fri Feb 24, 2006 9:52 pm

How To Enable Zoom Scalable in Protostar Template?

Post by IvanVk » Sun Sep 02, 2018 1:34 pm

I'm trying to make a Zoom image in an Article [ redacted ]on my website article 'CV in Excel'[/url] and others. I use the latest version of Joomla 3x.
The goal is to have the image clicked on the image and enlarge it for images that are larger than the width of the column.
There are more images that are larger than the middle column. If a visitor wants to see details on a particular image, I want to enable zooming. I do not need a "Slide Show" and so on.
Simply, by clicking the mouse on the picture enlarge/zoom the image if the visitor wants.

This was at Head

Code: Select all

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Now I set this up (I tried both variants but none works).

Code: Select all

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=1" />
or

Code: Select all

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2, user-scalable=Yes"/>
I found this on internet

Code: Select all

Your joomla templates have a parameter in the template manager to enable zooming:
Advanced Options -> User scalable on?
It is set to No by default.
But, I can't find this path.
I do not want to install extensions or plugins.

How To Enable Zoom Image in Protostar Template?
Is this possible in the Protostar template?

Can somebody help me?
Last edited by toivo on Mon Sep 03, 2018 7:17 am, edited 1 time in total.
Reason: mod note: URL removed

KianWilliam
Joomla! Guru
Joomla! Guru
Posts: 561
Joined: Thu Jan 12, 2017 10:13 am

Re: How To Enable Zoom Scalable in Protostar Template?

Post by KianWilliam » Mon Sep 03, 2018 10:55 am

You may achieve this with a very simple jQuery plugin.
Kian William

IvanVk
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 156
Joined: Fri Feb 24, 2006 9:52 pm

Re: How To Enable Zoom Scalable in Protostar Template?

Post by IvanVk » Mon Sep 03, 2018 1:05 pm

OK thank you
I thought I could do this in the template.

KianWilliam
Joomla! Guru
Joomla! Guru
Posts: 561
Joined: Thu Jan 12, 2017 10:13 am

Re: How To Enable Zoom Scalable in Protostar Template?

Post by KianWilliam » Tue Sep 04, 2018 8:36 am

You may use addScript() to add a js file or addScriptDeclaration() to add simple jQuery plugin in index.php file of template.
Also in a custom module, using sorcerer or jumi extensions , you may add jQuery codes.
Kian William

IvanVk
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 156
Joined: Fri Feb 24, 2006 9:52 pm

Re: How To Enable Zoom Scalable in Protostar Template?

Post by IvanVk » Tue Sep 04, 2018 1:28 pm

Hi @KianWilliam
Thank you for these extensive advice.
Best Regards

KianWilliam
Joomla! Guru
Joomla! Guru
Posts: 561
Joined: Thu Jan 12, 2017 10:13 am

Re: How To Enable Zoom Scalable in Protostar Template?

Post by KianWilliam » Wed Sep 05, 2018 9:17 am

You are welcome
Kian William

annahersh
Joomla! Guru
Joomla! Guru
Posts: 734
Joined: Wed Aug 15, 2018 8:23 pm

Re: How To Enable Zoom Scalable in Protostar Template?

Post by annahersh » Mon Oct 01, 2018 3:45 am

Though you've found a solution, the codes you posted are related to "pinch zoom" on touch screen devices. The attribute you needed to enable the function is minimum-scale=1.0

Code: Select all

<meta name="viewport" content="width=device-width; initial-scale=1.0; minimum-scale=1.0;" />
Joomla already includes the jQuery plugin to allow image "zoom" in modal popup. You simply post your image as

Code: Select all

<a href=mybigimage.jpg" class="modal"><img src="mysmallimgae.jpg" /></a>
If you set that method and the image opens in a new window, it just means you need to add the modal behavior to the template. Add it to the top of the file within the PHP coding.

Code: Select all

JHtml::_('behavior.modal');

IvanVk
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 156
Joined: Fri Feb 24, 2006 9:52 pm

Re: How To Enable Zoom Scalable in Protostar Template?

Post by IvanVk » Mon Oct 01, 2018 1:12 pm

Hi @annahersh
Thank you for your advice, but it does not suit me.
In your advice i should have two pictures (smaller and bigger).

Situation:
1. When I create an article I add a picture to it.
2. When I finished and visit web article, Joomla reduces this image to the width of the middle column.
3. I want to enable the visitor to see the picture in real size.

I want to have the option as a blogger. There is an option to click on the image and it is enlarged.
But I do not want to install extension or plugin (If it's possible).

-----------
I have an additional question.

Which option code separator is correct (the semi-colon or comma)

Code: Select all

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=2.0; user-scalable=Yes"/>

or

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=Yes"/>
Best regards

annahersh
Joomla! Guru
Joomla! Guru
Posts: 734
Joined: Wed Aug 15, 2018 8:23 pm

Re: How To Enable Zoom Scalable in Protostar Template?

Post by annahersh » Mon Oct 01, 2018 7:57 pm

You do not need 2 images, that's just a method commonly used. Any image can be wrapped with an anchor that links to the same image and it will enlarge when clicked. The method to use "modal" does not require an extension because it is already part of Joomla's framework.

Joomla does not reduce your image, that is the standard behavior of any screen responsive website where images and other elements proportionately adjust according to screen width.

Either delimiter is fine. None better than the other, just a matter of user preference.

IvanVk
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 156
Joined: Fri Feb 24, 2006 9:52 pm

Re: How To Enable Zoom Scalable in Protostar Template?

Post by IvanVk » Tue Oct 02, 2018 1:20 pm

Hi @annahersh
I have tried your advice but it does not work.
Please see my Joomla web article. Nothing happens when I click on the picture.
Also, please see 'web page source' for image code.

I've set these changes below:
Untitled-1.png
Untitled-2.png
You do not have the required permissions to view the files attached to this post.

annahersh
Joomla! Guru
Joomla! Guru
Posts: 734
Joined: Wed Aug 15, 2018 8:23 pm

Re: How To Enable Zoom Scalable in Protostar Template?

Post by annahersh » Tue Oct 02, 2018 9:11 pm

IvanVk wrote:
Tue Oct 02, 2018 1:20 pm
Hi @annahersh
I have tried your advice but it does not work.
That's because you placed the "modal" class in the image element. There must be an anchor element and the class placed in the anchor, as shown in my earlier post.

Code: Select all

<a href=mybigimage.jpg" class="modal"><img src="mybigimage.jpg" /></a>

IvanVk
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 156
Joined: Fri Feb 24, 2006 9:52 pm

[SOLVED]: How To Enable Zoom Scalable in Protostar Template?

Post by IvanVk » Wed Oct 03, 2018 1:15 pm

Hi @annahersh
That's it. This is what I wanted, Joomla article with zoom image.
When I click on the picture it is magnified.

Now my "image code" looks like this.

Code: Select all

<a class="modal" href="/images/excel2013/43a/curriculum-vitae.png"><img title="Creating a CV with your photography in Excel" src="/images/excel2013/43a/curriculum-vitae.png" alt="Sample-Resume-Or-Cv-In-Excel-Example-Template" /></a>
Thank you very much for help.
Definitely the problem is resolved.
Best bregards

annahersh
Joomla! Guru
Joomla! Guru
Posts: 734
Joined: Wed Aug 15, 2018 8:23 pm

Re: How To Enable Zoom Scalable in Protostar Template?

Post by annahersh » Wed Oct 03, 2018 7:19 pm

Good that you got it.

Since you are using JCE Editor (based on the image screenshot), if you add a CSS file named editor.css to protostar/css and add the classes you will use often when writing posts, the will be included in the style selector and be easily inserted
example editor.css

Code: Select all

.modal, .hasTip, .btn .btn-small, .btn .btn-large, .alert .alert-info, .alert .alert-warning, .alert .alert-success
{border: 0;} /*this property is added merely as a place holder but does nothing. The classes will not be listed if this is empty*/
The usage
The classes will be available in the element add advanced tab and also in the style list.
class-selectable.jpg
text-area-selectable.jpg
When hasTip is used in an element with a title attribute, a tooltip with the title text will popup when the element is hovered. It's great for giving source references which you prefer not to display on the page. Similar to what wikipedia.com does when links in the pages are hovered.
tooltip-example.jpg
The caveat however is that the title text must be prepended by double colons eg: title="Check this::when the file is used it will be great". The text before the colons serve as a preceding title before the text. Without the colons, all attribute values will be included in the tooltip.

As with the the modal popup, if the tooltip does not display, you will need to add the following code bit to your index.php.

Code: Select all

JHtml::_('behavior.tooltip');
Tooltip Styling

Code: Select all

.tip-wrap {
   background: #eeeeee;
   max-width: 320px;
   box-shadow: 10px 10px 20px #111111, 10px 10px 20px #111111;
}
.tip {
   background: #eeeeee !important;
   color: #111111;
   font-size: 12px;
}
You do not have the required permissions to view the files attached to this post.

IvanVk
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 156
Joined: Fri Feb 24, 2006 9:52 pm

Re: How To Enable Zoom Scalable in Protostar Template?

Post by IvanVk » Thu Oct 04, 2018 1:04 pm

Hi @annahersh
Thank you so much for these tips and explanations. Very interesting for me.
I will note these instructions for the future. Now I do not have time to do this, also I do not have enough knowledge about editing and programming files. I have it good to explore.
Thanks again.
Best regards


Locked

Return to “Templates for Joomla! 3.x”