From 30a0af931604f18308712b874a9d547f6130340f Mon Sep 17 00:00:00 2001 From: Garry Collum Date: Wed, 20 Jul 2016 15:15:38 -0400 Subject: [PATCH] Added Slider.js to homepage --- .../opac/css/js-image-slider.css.tt2 | 114 +++++++++++++++++++++ Open-ILS/src/kcpl_templates/opac/parts/base.tt2 | 51 +++++++++ .../src/kcpl_templates/opac/parts/homesearch.tt2 | 39 +++++++ 3 files changed, 204 insertions(+) create mode 100644 Open-ILS/src/kcpl_templates/opac/css/js-image-slider.css.tt2 create mode 100644 Open-ILS/src/kcpl_templates/opac/parts/base.tt2 create mode 100644 Open-ILS/src/kcpl_templates/opac/parts/homesearch.tt2 diff --git a/Open-ILS/src/kcpl_templates/opac/css/js-image-slider.css.tt2 b/Open-ILS/src/kcpl_templates/opac/css/js-image-slider.css.tt2 new file mode 100644 index 0000000000..bdc49d629b --- /dev/null +++ b/Open-ILS/src/kcpl_templates/opac/css/js-image-slider.css.tt2 @@ -0,0 +1,114 @@ +/* http://www.menucool.com */ + +/*slider frame*/ +#sliderFrame +{ + width:690px; + margin:0 auto; /*remove the "margin:0 auto;" if you want to align the whole slider to the left side*/ + padding:20px; + box-shadow: 0 0 5px #BBB;border:1px solid #CCC; background-color:#FFF; +} + + + +#slider { + float:left; + width:400px;height:315px;/* Make it the same size as your images. */ + background:#fff url(loading.gif) no-repeat 50% 50%; + position:relative; + margin:0 auto;/*make the image slider center-aligned */ +} +#slider img { + position:absolute; + border:none; + visibility:hidden; +} + +/* the link style (if an image is wrapped in a link) */ +#slider a.imgLink { + z-index:2; + display:none;position:absolute; + top:0px;left:0px;border:0;padding:0;margin:0; + width:100%;height:100%; +} + +/* Caption styles */ +div.mc-caption-bg, div.mc-caption-bg2 { + position:absolute; + width:400px; + height:auto; + padding:10px; + left:120px; /*if the caption needs to be aligned from right, specify by right instead of left. i.e. right:20px;*/ + bottom:10px;/*if the caption needs to be aligned from top, specify by top instead of bottom. i.e. top:150px;*/ + z-index:3; + overflow:hidden; + font-size:0; +} +div.mc-caption-bg { + background:#DDD; /*Caption background color. Can be set to "background:transparent;", or set to semi-transparent through the sliderOptions.captionOpacity setting in the javascript.*/ + border:1px solid white; + border-radius: 5px; +} +div.mc-caption { + font:bold 13px/16px Arial; + color:#069; + z-index:4; + text-align:center; +} + +/* ADded to manke the captions invisible */ +div.mc-caption-bg, div.mc-caption-bg2 { + display: none; +} +div.mc-caption a { + color:#060; +} + + +/* ------ built-in navigation bullets wrapper that is relative to the #slider ------*/ +div.navBulletsWrapper { + display:none; +} + + +/*thumbnails*/ +#thumbs +{ + float:left; + margin-left:10px; + width:230px; + font:normal 11px/13px Arial; + border-top:1px solid #CCC; + color:#666; +} +#thumbs .thumb +{ + border:1px solid #CCC; + border-top:1px solid #FFF; + padding:11px 8px; + background:#EEE; +} +#thumbs .thumb-on +{ + background:#FFF; +} + +#thumbs img{border:1px solid #DDD; cursor:pointer; width:70px; height:44px;} + +#thumbs .frame {float:left;padding:2px;border:1px solid #CCC;background:white;border-radius:3px;box-shadow:0 0 3px #BBB;font-size:0;line-height:0;} +#thumbs .thumb-content {float:left;width:110px;padding-left:18px;} + +/* Captions in #thumbs .thumb-content */ +#thumbs .thumb-content p {font-weight:bold; color:#BF5D9B; margin:0 0 3px;padding:0;} +#thumbs .thumb-on .thumb-content p {color:#BB0000;} + + +/* --------- Others ------- */ +#slider +{ + transform: translate3d(0,0,0); + -ms-transform:translate3d(0,0,0); + -moz-transform:translate3d(0,0,0); + -o-transform:translate3d(0,0,0); +} + diff --git a/Open-ILS/src/kcpl_templates/opac/parts/base.tt2 b/Open-ILS/src/kcpl_templates/opac/parts/base.tt2 new file mode 100644 index 0000000000..9d6e16bc3e --- /dev/null +++ b/Open-ILS/src/kcpl_templates/opac/parts/base.tt2 @@ -0,0 +1,51 @@ + + + + + + [% IF ctx.refresh %] + + [% ELSIF ctx.authtime AND !ctx.is_staff %] + + [% END %] + + + + + [%- libname = ctx.get_aou(ctx.search_ou).name; + libname = libname | html; + libsname = ctx.get_aou(ctx.search_ou).shortname; %] + [%- IF ctx.user_stats.messages.unread; + l('([_1])', ctx.user_stats.messages.unread); + END; + -%] + [% l('[_1] - [_2]', ctx.page_title, libname) %] + + + [%-# Hook for page-specific metadata such as %] + [%- ctx.metalinks.push(''); %] + [%- ctx.metalinks.push(''); %] + [% FOREACH meta IN ctx.metalinks; meta _ "\n"; END; -%] + [% IF want_dojo %] + + [% END %] + + [% IF !ctx.is_staff %] + [% INCLUDE 'opac/parts/goog_analytics.tt2' %] + [% END %] + [% PROCESS 'opac/parts/stripe.tt2' %] + + +

[% l('Catalog') %]

+ [%#Each content page needs (at minimum) an

describing the content%] + [% content %] +

[% l('Additional Resources') %]

+ [% INCLUDE 'opac/parts/footer.tt2' %] + [% INCLUDE 'opac/parts/js.tt2' %] + [%- IF ENV.OILS_CHILIFRESH_ACCOUNT %] + [%- INCLUDE 'opac/parts/chilifresh.tt2' %] + [%- END %] + + diff --git a/Open-ILS/src/kcpl_templates/opac/parts/homesearch.tt2 b/Open-ILS/src/kcpl_templates/opac/parts/homesearch.tt2 new file mode 100644 index 0000000000..efeafd8405 --- /dev/null +++ b/Open-ILS/src/kcpl_templates/opac/parts/homesearch.tt2 @@ -0,0 +1,39 @@ + + +
+
+ Slider image 1 + Slider image 2 + Slider image 3 + Slider image 4 +
+ +
+
+
Slider thumb1
+

Freegal

Download 5 Free Songs Each Week
+
+
+
+
Slider thumb2
+

eBooks

New eBooks Available
+
+
+
+
Slider thumb3
+

Download Magazines

Free on your PC, MAC or tablet
+
+
+
+
Slider thumb4
+

Download Music, Videos and Audio Books

Hoopla Digital
+
+
+
+ +
+
-- 2.11.0