Automatic Zoom

Automatically add the "zoom" feature to selected images on a page by defining* the areas with <div  id="JVautozoom"> followed by images and-- html </div>   (* see below for optional parameters) 

[NOTE: If you do not define the area, ALL images on a page can be automatically Zoomed.]

Certain widgets may not work for Autozoom with <img> elements. Just depends on the widget. If that happens, bypass that widget by adding another JVautozoom div section.  Regular HTML elements are not an issue. Some combinations of image style elements may not work if they have errors, like missing a semi-colon (;). If that happens either fix the html or bypass that image by adding more selective sections. <img> elements with onmousedown, onclick or id= elements are ignored since they conflict with the zoom feature [more may be added depending on feedback].

The selection control is coded like this:

<div id="JVautozoom>  followed by ... html with as many images and other html as needed ... </div>

One single "div" can add the zoom feature to all the images on a page. Put the first <div id="JVautozoom"> at the top and then the ending </div> at the end. You can have one to many "div" sections. Each "div" area adds the ZOOM feature to all the images discovered. 

<div id="JVautozoom">
<img src="location">
html ... etc
<img etc...>   ... as many images as you like ...
</div>

Automatic Gallery

There are two different methods to generate galleries of images on any page. One method uses all the images defined by JVautogallery sections and  the other uses all the images defined in a list and generated at JVautogallery2.

JVautogallery method

Automatically create a gallery of the selected images on a page. You create a gallery by wrapping ALL <img src=... > inside div elements named "JVautogallery"

The selection control is coded like this:

<div id="JVautogallery">  followed by as many images as needed ... </div>

JVautogallery replaces ALL the images, html and other widgets inside the 'div' with a gallery overlay. The selection control is coded like this:

<div id="JVautogallery">
<img src="location">
<img etc...>   ... as many images as you like ...
</div>

One single "div" can add the gallery feature to all the images on a page. Put the first <div id="JVautogallery"> at the top and then the ending </div> at the end. You can have one to many "div" sections. Each "div" area adds the Gallery feature to all the images discovered. NOTE: Unlike JVautozoom, all other text  or content not an <img> inside the 'div' section is removed. 

Image Description (alt=)

alt=  To put a description on an image, use alt="any description" in an image for a description. Either do this in CC editor source mode or in the CC editor, click the image, right click, pick Properties and then select Alternative Text. 

A sample looks like this in source mode: <img alt="Description of Image" src="link to source" other html ... >

Image Border Color (style=)

To set a border color, set the background-color. Do this in source mode by entering style="background-color:yellow;"(yellow example). 
The border color is then used for the next images until the color is changed again. The default is white.

See this link for Color Names

After you create the JVautozoom and JVautogallery div sections, add this script to the end your page in editor source mode

<script src="https://www.classcreator.com/000/7/7/0/13077/userfiles/file/html/JVautozoomgallery.js"></script>

Image  Zoom Size Values (zoomwidth=, zoomheight=)

The default size of an image when zooming is the full page size (adjusted to the image ratio). Images 200 x 200 or smaller* zoom to 50% this size. Normally that is what you want. However, if you want to reduce or increase the size of images, the following optional parameters let you control the image displayed. In editor Source Mode, you set the width or height in absolute or percent values. The keywords are zoomwidth and zoomheight.  Use ONE of these only, not both.

zoomwidth="50%"  where 50 represents a percent value from 1 to whatever. This is the percent of the width of the viewport of the screen. The result will vary depending on the device's resolution.  A percent value is recommended for Responsive Design.

zoomwidth="685px" where 685 represents the actual width in pixels desired.  

zoomheight="50%"  where 50 represenst a percent value from 1 to whatever. This is the percent of the height of the viewport of the screen. The result will vary depending on the device's resolution.  A percent value is recommended for Responsive Design.

zoomheight="685px" where 685 represents the actual height in pixels desired.  

A percent width sample looks like this in source mode: <img zoomwidth="50%" src="link to source" other html ... >

An absolute width sample looks like this in source mode: <img zoomwidth="685px" src="link to source" other html ... >

Zoomheight examples are exactly the same with zoomheight replacing zoomwidth. 

Note*: Images less than 100x100 are ignored, unless you put a zoomwidth or zoomheight on the image html. To zoom any image to the maximum screen size set zoomwidth='0' (only required if image is small or zoomContent is set).

JVautogallery2 method

With this method you define the images in table.  The table consists of the locations of the images vsj getting the location from images you have on a page that were created by html <img src= statements.

Gallery Image Delay

The default delay for displaying each image is 6 seconds (when autoplay is active). You can change the delay from 1 to 60 seconds by entering the gallerydelay= parameter after the script. For example, to set a delay of 30 seconds code the following:

<script src="https://www.classcreator.com/000/7/7/0/13077/userfiles/file/html/JVautozoomgallery.js?gallerydelay=30"></script>

Quick Method to ZOOM all images on a Page

Normally the <div id="JVautozoom"> is recommended to select specific images to zoom for exact control. There is an optional method you can use to enable ALL images on a page automatically. This only works if there are no "JVautogallery" or "JVautozoom" divs on the page. Since it looks for any image, it may grab images that you do not want included. Plus if you have certain widgets they may no longer work. If you have any of that happen, please disable this option and use the suggested div names instead. All you need is the following script added in source mode. Remember, no other divs can be present.

(Note: Images smaller than 100 pixels in either dimension are ignored in this mode unless they contain a zoomwidth or zoomheight value.)

<script src="https://www.classcreator.com/000/7/7/0/13077/userfiles/file/html/JVautozoomgallery.js</script>

Option to use Inner page width vs Viewport width for maximum size (zoomContent)

Your CC pages are contained inside an area. For example this page has a menu on the left side. This page starts to the right of that and stops where the background changes. Normally all images (without any sizing options) expand/zoom to fill the maximum space available. Sometimes it looks better for various subjective reasons to contain the zoom within the boundaries of the CC content. To set this option, code the following:

<script src="https://www.classcreator.com/000/7/7/0/13077/userfiles/file/html/JVautozoomgallery.js?zoomContent=1"></script> 

If some images are desired to still zoom to the full page size, set zoomwidth='0'.

(Note: If you use multiple options the subsequent options use the & instead of ?. For example ?zoomdelay=30&zoomToContent=1 )

All html and image before this point stay as they are.

Start of ZOOM images 1

<div id="JVautozoom">

Images above are at percent width: none, 50%, 70%, 120% percent settings

Images above are at pixel width: 400px, 600px, 800px, 1200px settings

 

Images above are at percent height: none, 40%, 60% 80% percent settings

</div>

Above </div> markes the End of First Images that have the ZOOM feature added. Normal image display resumes.

The next area combines all the images into a single gallery

Start of Gallery images 

- The next images past this area defined by the "div" are combined into a gallery - Any other html inside the defined area is removed. -

<div id="JVautogallery">

 

</div>

Above </div> markes the End of first set of Images combined into a gallery.

Start of Second set of Gallery images 

<div id="JVautogallery">

</div>

Above </div> markes the End of  Second set of Images that were combined into a Gallery Section

All data and images after the ending "</div>" is displayed again.

The script at the end is not visible, but is there at the end of the html above. It's right here - you just can't see it.

<script src="https://www.classcreator.com/000/7/7/0/13077/userfiles/file/html/JVautozoomgallery.js"></script>

Use a browser's "view Page source" to examine the code on the examples below.

Sample Gallery display1a LINK - courtesy of John Ralph. Uses <div id="JVautogallery">

Sample Zoom display 1b LINK - same images as 1a, except uses <div id="JVautozoom"> to get different starting display with a simple change of the div id name.

Sample Gallery display2 LINK ( uses <div id="JVautogallery">)

Sample Zoom class page display LINK showing use in a page with text and other non-image objects.