summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rwxr-xr-xcss/modal.css30
-rw-r--r--images/x.pngbin0 -> 1066 bytes
-rwxr-xr-xjs/lightbox_me.js234
-rwxr-xr-xjs/modal.js26
-rwxr-xr-xtemplates/page-front.tpl.php70
5 files changed, 341 insertions, 19 deletions
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
--- /dev/null
+++ b/images/x.png
Binary files 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 = $('<iframe id="foo" style="z-index: ' + (opts.zIndex + 1) + ';border: none; margin: 0; padding: 0; position: absolute; width: 100%; height: 100%; top: 0; left: 0; filter: mask();"/>');
+
+ 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 = $('<div class="lb_overlay_clear js_lb_overlay"/>');
+ } else {
+ $overlay = $('<div class="' + opts.classPrefix + '_overlay js_lb_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 @@
<script type="text/javascript" src="<?php print $GLOBALS['base_url']; ?>/sites/all/themes/scilab/js/menu.js"></script>
<script type="text/javascript" src="<?php print $GLOBALS['base_url']; ?>/sites/all/themes/scilab/js/slideshow.js"></script>
<script type="text/javascript" src="<?php print $GLOBALS['base_url']; ?>/sites/all/themes/scilab/js/testimonials_script.js"></script>
+ <script type="text/javascript" src="<?php print $GLOBALS['base_url']; ?>/sites/all/themes/scilab/js/lightbox_me.js"></script>
+ <script type="text/javascript" src="<?php print $GLOBALS['base_url']; ?>/sites/all/themes/scilab/js/modal.js"></script>
<script type="text/javascript" src="<?php print $GLOBALS['base_url']; ?>/sites/all/themes/scilab/js/nice-bar.js"></script>
+ <link rel="stylesheet" type="text/css" href="<?php print $GLOBALS['base_url']; ?>/sites/all/themes/scilab/css/modal.css" />
<link rel="stylesheet" type="text/css" href="<?php print $GLOBALS['base_url']; ?>/sites/all/themes/scilab/css/dropdown-menu.css" />
<link rel="stylesheet" type="text/css" href="<?php print $GLOBALS['base_url']; ?>/sites/all/themes/scilab/css/nice-bar.css" />
<link rel="stylesheet" type="text/css" href="<?php print $GLOBALS['base_url']; ?>/sites/all/themes/scilab/css/testimonials_front.css" />
- <link rel="stylesheet" type="text/css" href="<?php print $GLOBALS['base_url']; ?>/sites/all/themes/scilab/orbit/orbit-1.2.3.css">
- <style type="text/css">
+ <link rel="stylesheet" type="text/css" href="<?php print $GLOBALS['base_url']; ?>/sites/all/themes/scilab/orbit/orbit-1.2.3.css">
+ <style type="text/css">
#slideshow img
{
display:none;
@@ -356,23 +359,52 @@
</div>
</div>
- <div id="testimonials_front">
- <ul>
- <?php
- $query = "SELECT * FROM testimonials ORDER BY id ASC LIMIT 10";
- $result = db_query($query);
- while ($row = db_fetch_object($result))
- {
- echo "<li><h4><i>Testimonials</i></h4><i><p style='text-align:left;margin-top:2px'>{$row->body}</p>
- <br/><p style='text-align:right;margin-top:-30px'>{$row->name},</p>
- <p style='text-align:right;margin-top:-15px'>{$row->department},
- {$row->university},</p>
- <p style='text-align:right;margin-top:-15px''>{$row->contribution},{$row->reference}</p></i>
- </li>";
- }
- ?>
- </ul>
- </div>
+ <div id="testimonials_front">
+ <div style='mar:-50px' id='panel'>
+ <?php
+ echo "<a href='testimonials-page-1' title='View all Testimonials' class='testimonial_head'>Testimonials</a>";
+ ?>
+ </div>
+ <ul>
+ <?php
+
+ $query = "SELECT * FROM testimonials";
+
+ $result = db_query($query);
+ $id=$row->id;
+ while ($row = db_fetch_object($result))
+ {
+ $string = strip_tags($row->body);
+ $length=strlen($string);
+ if($length>300)
+ {
+ $cut1= drupal_substr($string, 0, 300);
+ $cut=$cut1."...";
+ }
+ else {
+ $cut= drupal_substr($string, 0, 300);
+ }
+ echo "<li><i><p style='margin-top:16px'>{$cut}</i> <a href='' id='$row->id' data-target='#dialog{$row->id}' class='testimonial_read_more'>Read more..</a></p>
+ <div id='dialog{$row->id}' class='dialog'>
+ <img src='sites/all/themes/scilab/images/x.png' style='margin-top:-25px ;margin-left:704px;' class='lightbox_close'>
+ <i><p style='margin-top:-1px'>{$row->body}</i><hr/><br/>
+ <p style='text-align:right;margin-top:-15px'>{$row->name},</p>
+ <p style='text-align:right;margin-top:-15px'>{$row->department},
+ {$row->university},</p>
+ <p style='text-align:right;margin-top:-15px''>{$row->contribution},{$row->reference}.</p>
+ </div>
+ <br/>
+
+ <p style='text-align:right;margin-top:-30px'>{$row->name},{$row->university},
+ {$row->contribution},</p>
+ <p style='text-align:right;margin-top:-15px''>{$row->reference}.</p>
+ </li>";
+
+ }
+ ?>
+ </ul>
+ </div> <!-- /#testimonials_front -->
+
</div> <!-- /.section, /#content -->
<?php endif; ?>
</div>
generated by cgit (git 2.34.1) at 2025-03-13 05:48:43 +0000