CTC Overlay jQuery

jQuery plugin to add overlay image viewer to your image gallery and content viewer to you you want to load on modal window. jQuery plugin version of overlay functionalities built-in in CT Commerec WordPress Plugin

USAGE

Plugin lets you display all of the images inside the element , you can apply it to one or multiple galleries

Including CTC Overlay jQuery plugin

Below are some of the most common ways to include ctc-overlay-jquery

1.Script tag

######

Download files

1. ctc_overlay.jquery.js,

2. ctc_overlay_style.css

Include files

1. Include jQuery :- https://code.jquery.com/jquery-3.3.1.min.js,

2. IncludeCTC Overlay(file) :- ctc_overlay.jquery.js,

3. Include CTC Overlay stylesheet(file) :- ctc_overlay_style.css

2.Node

To include CTC overlay in Node, first install with npm

npm install ctc-overlay-jquery

Plugin Options :

Overlay image viewer

	$('selector1,selector2').ctcOverlay();

Note: Apply ctcOverlay to as many gallery as you like (includes all images inside element)

Overlay content viewer

	$.ctcOverlayEl(parameter1, parameter2);

Content Viewer options

A.Parameter 1 options

       format: javascript object

1.elemHeight: 'container height':-

content div height in px do not use % or auto - optional

2.elemWidth:'container width':-

content div width in px, do not use % or auto - optional

3.ajaxUrl: 'AJAX url':-

url to make AJAX call - required for AJAX request

4.ajaxData: 'ajax data' :-

data to send to server' - jQuery AJAX request format

5.ajaxMethod:'request method':-

method you wish to use use for AJAX request default GET

6.elemSelector:'jQuery element selector':-

jQuery element selector if getting content of element not making AJAX request

7.modalMessage:'some message':-

string you wish to load on modal window with OK button

8.iframeUrl:'url of iframe' :-

url you wish to iframe inside modal window

9.hideCloseBtn:'no' :-

if set 'NO' user won't have option to close overlay, 'YES' if left empty

B.Parameter 2 options

   format: javascript object - optional(to do more with AJAX)

*Works eactly like function $.ajax() :- See http://api.jquery.com/jquery.ajax/

Note: leave parameter1 as empty var or object unless setting dimesnion

Content loading priority

a.{parameter2}

gets first priority over first width content loading parameter 1 can be use for setting dimesnion and hideCloseBtn

b.{parameter1}

content fetched from ajaxUrl

c.{parameter1}

content set for modalMessage

d.{parameter1}

content from iframeUrl

e.{parameter1}

content of element set for elemSelector

Note:precending must not be there for suceeding to work

License

MIT