ujw0l / ctc-overlay

overlay image gallery built with jquery

Welcome to ctc-overlay-viewer 👋

jQuery plugin for image gallery overlay and modal content loading

Install

npm i ctc-overlay-viewer

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.4.0.min.js,
2. IncludeCTC Overlay(file) :- ctc_overlay.jquery.js,
3. Include CTC Overlay stylesheet(file) :- ctc_overlay_style.css

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:= 'AJAXdata' ( 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 will not 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} ( ontent from iframeUrl )
e.{parameter1} ( content of element set for elemSelector )

Note:precending must not be there for suceeding to work

Contributing

Contributions, issues and feature requests are welcome. Feel free to check issues page if you want to contribute.

Author

👤 ujw0l

• Twitter 👉 @bastakotiujwol
• Github 👉 @ujw0l

Show your support

Please ⭐️ this repository if you like it.

License

Copyright © 2019 ujw0l.

📜 This project is MIT licensed.

---

This README was generated with ❤️ by readme-md-generator