From 4c2780b87434084147858f4fe69a5a45d6e509c7 Mon Sep 17 00:00:00 2001
From: Jayaram R Pai
Date: Thu, 31 Jul 2014 18:13:41 +0530
Subject: added lightbox display for testimonials
changes submitted by Priyanka Bhagwat
---
css/modal.css | 30 ++++++
images/x.png | Bin 0 -> 1066 bytes
js/lightbox_me.js | 234 +++++++++++++++++++++++++++++++++++++++++++
js/modal.js | 26 +++++
templates/page-front.tpl.php | 70 +++++++++----
5 files changed, 341 insertions(+), 19 deletions(-)
create mode 100755 css/modal.css
create mode 100644 images/x.png
create mode 100755 js/lightbox_me.js
create mode 100755 js/modal.js
diff --git a/css/modal.css b/css/modal.css
new file mode 100755
index 0000000..7bf28cd
--- /dev/null
+++ b/css/modal.css
@@ -0,0 +1,30 @@
+.dialog {
+ display: none;
+ width:55%;
+ height:auto;
+ padding: 15px;
+ -moz-border-radius:8px;
+ -webkit-border-radius:8px;
+ border-radius:8px;
+ box-shadow: 1px 1px 4px 1px #888888;
+ background: #FFF;
+ font-color:white;
+}
+
+.dialog hr{
+
+
+}
+
+.ui-dialog-content, .ui-widget-content {
+
+ width:800px;
+ background-color:#F0F0F0 ;
+ font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
+ font-size: 62.5%;
+ font-color:white;
+
+}
+
+ /*filter:alpha(opacity=70);
+ opacity:0.7;*/
diff --git a/images/x.png b/images/x.png
new file mode 100644
index 0000000..c11f7af
Binary files /dev/null and b/images/x.png differ
diff --git a/js/lightbox_me.js b/js/lightbox_me.js
new file mode 100755
index 0000000..548e8eb
--- /dev/null
+++ b/js/lightbox_me.js
@@ -0,0 +1,234 @@
+/*
+* $ lightbox_me
+* By: Buck Wilson
+* Version : 2.4
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+
+(function($) {
+
+ $.fn.lightbox_me = function(options) {
+
+ return this.each(function() {
+
+ var
+ opts = $.extend({}, $.fn.lightbox_me.defaults, options),
+ $overlay = $(),
+ $self = $(this),
+ $iframe = $('');
+
+ if (opts.showOverlay) {
+ //check if there's an existing overlay, if so, make subequent ones clear
+ var $currentOverlays = $(".js_lb_overlay:visible");
+ if ($currentOverlays.length > 0){
+ $overlay = $('');
+ } else {
+ $overlay = $('');
+ }
+ }
+
+ /*----------------------------------------------------
+ DOM Building
+ ---------------------------------------------------- */
+ $('body').append($self.hide()).append($overlay);
+
+
+ /*----------------------------------------------------
+ Overlay CSS stuffs
+ ---------------------------------------------------- */
+
+ // set css of the overlay
+ if (opts.showOverlay) {
+ setOverlayHeight(); // pulled this into a function because it is called on window resize.
+ $overlay.css({ position: 'absolute', width: '100%', top: 0, left: 0, right: 0, bottom: 0, zIndex: (opts.zIndex + 2), display: 'none' });
+ if (!$overlay.hasClass('lb_overlay_clear')){
+ $overlay.css(opts.overlayCSS);
+ }
+ }
+
+ /*----------------------------------------------------
+ Animate it in.
+ ---------------------------------------------------- */
+ //
+ if (opts.showOverlay) {
+ $overlay.fadeIn(opts.overlaySpeed, function() {
+ setSelfPosition();
+ $self[opts.appearEffect](opts.lightboxSpeed, function() { setOverlayHeight(); setSelfPosition(); opts.onLoad()});
+ });
+ } else {
+ setSelfPosition();
+ $self[opts.appearEffect](opts.lightboxSpeed, function() { opts.onLoad()});
+ }
+
+ /*----------------------------------------------------
+ Hide parent if parent specified (parentLightbox should be jquery reference to any parent lightbox)
+ ---------------------------------------------------- */
+ if (opts.parentLightbox) {
+ opts.parentLightbox.fadeOut(200);
+ }
+
+
+ /*----------------------------------------------------
+ Bind Events
+ ---------------------------------------------------- */
+
+ $(window).resize(setOverlayHeight)
+ .resize(setSelfPosition)
+ .scroll(setSelfPosition);
+
+ $(window).bind('keyup.lightbox_me', observeKeyPress);
+
+ if (opts.closeClick) {
+ $overlay.click(function(e) { closeLightbox(); e.preventDefault; });
+ }
+ $self.delegate(opts.closeSelector, "click", function(e) {
+ closeLightbox(); e.preventDefault();
+ });
+ $self.bind('close', closeLightbox);
+ $self.bind('reposition', setSelfPosition);
+
+
+
+ /*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
+ -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
+
+
+ /*----------------------------------------------------
+ Private Functions
+ ---------------------------------------------------- */
+
+ /* Remove or hide all elements */
+ function closeLightbox() {
+ var s = $self[0].style;
+ if (opts.destroyOnClose) {
+ $self.add($overlay).remove();
+ } else {
+ $self.add($overlay).hide();
+ }
+
+ //show the hidden parent lightbox
+ if (opts.parentLightbox) {
+ opts.parentLightbox.fadeIn(200);
+ }
+ if (opts.preventScroll) {
+ $('body').css('overflow', '');
+ }
+ $iframe.remove();
+
+ // clean up events.
+ $self.undelegate(opts.closeSelector, "click");
+ $self.unbind('close', closeLightbox);
+ $self.unbind('repositon', setSelfPosition);
+
+ $(window).unbind('resize', setOverlayHeight);
+ $(window).unbind('resize', setSelfPosition);
+ $(window).unbind('scroll', setSelfPosition);
+ $(window).unbind('keyup.lightbox_me');
+ opts.onClose();
+ }
+
+
+ /* Function to bind to the window to observe the escape/enter key press */
+ function observeKeyPress(e) {
+ if((e.keyCode == 27 || (e.DOM_VK_ESCAPE == 27 && e.which==0)) && opts.closeEsc) closeLightbox();
+ }
+
+
+ /* Set the height of the overlay
+ : if the document height is taller than the window, then set the overlay height to the document height.
+ : otherwise, just set overlay height: 100%
+ */
+ function setOverlayHeight() {
+ if ($(window).height() < $(document).height()) {
+ $overlay.css({height: $(document).height() + 'px'});
+ $iframe.css({height: $(document).height() + 'px'});
+ } else {
+ $overlay.css({height: '100%'});
+ }
+ }
+
+
+ /* Set the position of the modal'd window ($self)
+ : if $self is taller than the window, then make it absolutely positioned
+ : otherwise fixed
+ */
+ function setSelfPosition() {
+ var s = $self[0].style;
+
+ // reset CSS so width is re-calculated for margin-left CSS
+ $self.css({left: '50%', marginLeft: ($self.outerWidth() / 2) * -1, zIndex: (opts.zIndex + 3) });
+
+
+ /* we have to get a little fancy when dealing with height, because lightbox_me
+ is just so fancy.
+ */
+
+ // if the height of $self is bigger than the window and self isn't already position absolute
+ if (($self.height() + 80 >= $(window).height()) && ($self.css('position') != 'absolute')) {
+
+ // we are going to make it positioned where the user can see it, but they can still scroll
+ // so the top offset is based on the user's scroll position.
+ var topOffset = $(document).scrollTop() + 40;
+ $self.css({position: 'absolute', top: topOffset + 'px', marginTop: 0})
+ } else if ($self.height()+ 80 < $(window).height()) {
+ //if the height is less than the window height, then we're gonna make this thing position: fixed.
+ if (opts.centered) {
+ $self.css({ position: 'fixed', top: '50%', marginTop: ($self.outerHeight() / 2) * -1})
+ } else {
+ $self.css({ position: 'fixed'}).css(opts.modalCSS);
+ }
+ if (opts.preventScroll) {
+ $('body').css('overflow', 'hidden');
+ }
+ }
+ }
+
+ });
+
+
+
+ };
+
+ $.fn.lightbox_me.defaults = {
+
+ // animation
+ appearEffect: "fadeIn",
+ appearEase: "",
+ overlaySpeed: 250,
+ lightboxSpeed: 300,
+
+ // close
+ closeSelector: ".close",
+ closeClick: true,
+ closeEsc: true,
+
+ // behavior
+ destroyOnClose: false,
+ showOverlay: true,
+ parentLightbox: false,
+ preventScroll: false,
+
+ // callbacks
+ onLoad: function() {},
+ onClose: function() {},
+
+ // style
+ classPrefix: 'lb',
+ zIndex: 999,
+ centered: false,
+ modalCSS: {top: '40px'},
+ overlayCSS: {background: 'black', opacity: .3}
+ }
+})(jQuery);
diff --git a/js/modal.js b/js/modal.js
new file mode 100755
index 0000000..f9bec31
--- /dev/null
+++ b/js/modal.js
@@ -0,0 +1,26 @@
+$(document).ready(function(e){
+ $(".testimonial_read_more").click(function(e) {
+ var target = $(this).attr("data-target");
+ console.log(target);
+ e.preventDefault();
+
+ $(target).lightbox_me({
+ centered: true
+ });
+ });
+
+ $(".lightbox_close").click(function(e) {
+ $target = $(this).parent();
+ $target.trigger('close');
+ });
+
+
+});
+
+/* $(target).dialog({
+//open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); },
+modal: true,
+width:800,
+});
+
+//$(target).dialog();*/
diff --git a/templates/page-front.tpl.php b/templates/page-front.tpl.php
index c6d3ecd..94ef612 100755
--- a/templates/page-front.tpl.php
+++ b/templates/page-front.tpl.php
@@ -123,12 +123,15 @@
+
+
+
-
-