[Svn-src-all:911] [version-2_5-dev 19799] #706(拡大画像の表示の jQuery 化)
Seasoft
admin ＠ mail.ec-cube.net
2010年 12月 31日 (金) 02:27:02 JST
Subversion committed to /home/svn/open 19799
http://svn.ec-cube.net/open_trac/changeset/19799
┌────────────────────────────┐
│更新者 : Seasoft │
│更新日時: 2010-12-31 02:27:02 +0900 (金, 31 12月 2010)│
└────────────────────────────┘
Log:
--------------------------------------------------------
#706(拡大画像の表示の jQuery 化)
* Facebox を使った参考実装。最終的にこのライブラリを使うかは未確定です。
Changed: [U:修正，A:追加，D:削除]
--------------------------------------------------------
U branches/version-2_5-dev/data/Smarty/templates/default/products/detail.tpl
A branches/version-2_5-dev/html/js/jquery.facebox/
A branches/version-2_5-dev/html/js/jquery.facebox/closelabel.png
A branches/version-2_5-dev/html/js/jquery.facebox/facebox.css
A branches/version-2_5-dev/html/js/jquery.facebox/facebox.js
A branches/version-2_5-dev/html/js/jquery.facebox/loading.gif
変更: branches/version-2_5-dev/data/Smarty/templates/default/products/detail.tpl
===================================================================
--- branches/version-2_5-dev/data/Smarty/templates/default/products/detail.tpl 2010-12-30 10:59:05 UTC (rev 19798)
+++ branches/version-2_5-dev/data/Smarty/templates/default/products/detail.tpl 2010-12-30 17:27:02 UTC (rev 19799)
@@ -19,9 +19,8 @@
* along with this program; if not, write to the Free Software
* Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA.
*}-->
-<script type="text/javascript" src="<!--{$smarty.const.URL_DIR}-->js/jquery.fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
-<script type="text/javascript" src="<!--{$smarty.const.URL_DIR}-->js/jquery.fancybox/jquery.fancybox-1.3.4.pack.js"></script>
-<link rel="stylesheet" href="<!--{$smarty.const.URL_DIR}-->js/jquery.fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
+<script type="text/javascript" src="<!--{$smarty.const.URL_DIR}-->js/jquery.facebox/facebox.js"></script>
+<link rel="stylesheet" type="text/css" href="<!--{$smarty.const.URL_DIR}-->js/jquery.facebox/facebox.css" media="screen" />
<script type="text/javascript">//<![CDATA[
// 規格2に選択肢を割り当てる。
function fnSetClassCategories(form, classcat_id2_selected) {
@@ -153,7 +152,9 @@
}
}
$(document).ready(function() {
- $("a.expansion").fancybox({
+ $('a.expansion').facebox({
+ loadingImage : '<!--{$smarty.const.URL_DIR}-->js/jquery.facebox/loading.gif',
+ closeImage : '<!--{$smarty.const.URL_DIR}-->js/jquery.facebox/closelabel.png'
});
});
//]]>
追加: branches/version-2_5-dev/html/js/jquery.facebox/closelabel.png
===================================================================
(バイナリファイルが異なっています)
Property changes on: branches/version-2_5-dev/html/js/jquery.facebox/closelabel.png
___________________________________________________________________
追加: svn:mime-type
+ application/octet-stream
追加: branches/version-2_5-dev/html/js/jquery.facebox/facebox.css
===================================================================
--- branches/version-2_5-dev/html/js/jquery.facebox/facebox.css (rev 0)
+++ branches/version-2_5-dev/html/js/jquery.facebox/facebox.css 2010-12-30 17:27:02 UTC (rev 19799)
@@ -0,0 +1,80 @@
+#facebox {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 100;
+ text-align: left;
+}
+
+
+#facebox .popup{
+ position:relative;
+ border:3px solid rgba(0,0,0,0);
+ -webkit-border-radius:5px;
+ -moz-border-radius:5px;
+ border-radius:5px;
+ -webkit-box-shadow:0 0 18px rgba(0,0,0,0.4);
+ -moz-box-shadow:0 0 18px rgba(0,0,0,0.4);
+ box-shadow:0 0 18px rgba(0,0,0,0.4);
+}
+
+#facebox .content {
+ display:table;
+ width: 370px;
+ padding: 10px;
+ background: #fff;
+ -webkit-border-radius:4px;
+ -moz-border-radius:4px;
+ border-radius:4px;
+}
+
+#facebox .content > p:first-child{
+ margin-top:0;
+}
+#facebox .content > p:last-child{
+ margin-bottom:0;
+}
+
+#facebox .close{
+ position:absolute;
+ top:5px;
+ right:5px;
+ padding:2px;
+ background:#fff;
+}
+#facebox .close img{
+ opacity:0.3;
+}
+#facebox .close:hover img{
+ opacity:1.0;
+}
+
+#facebox .loading {
+ text-align: center;
+}
+
+#facebox .image {
+ text-align: center;
+}
+
+#facebox img {
+ border: 0;
+ margin: 0;
+}
+
+#facebox_overlay {
+ position: fixed;
+ top: 0px;
+ left: 0px;
+ height:100%;
+ width:100%;
+}
+
+.facebox_hide {
+ z-index:-100;
+}
+
+.facebox_overlayBG {
+ background-color: #000;
+ z-index: 99;
+}
\ No newline at end of file
追加: branches/version-2_5-dev/html/js/jquery.facebox/facebox.js
===================================================================
--- branches/version-2_5-dev/html/js/jquery.facebox/facebox.js (rev 0)
+++ branches/version-2_5-dev/html/js/jquery.facebox/facebox.js 2010-12-30 17:27:02 UTC (rev 19799)
@@ -0,0 +1,309 @@
+/*
+ * Facebox (for jQuery)
+ * version: 1.2 (05/05/2008)
+ * @requires jQuery v1.2 or later
+ *
+ * Examples at http://famspam.com/facebox/
+ *
+ * Licensed under the MIT:
+ * http://www.opensource.org/licenses/mit-license.php
+ *
+ * Copyright 2007, 2008 Chris Wanstrath [ chris ＠ ozmm.org ]
+ *
+ * Usage:
+ *
+ * jQuery(document).ready(function() {
+ * jQuery('a[rel*=facebox]').facebox()
+ * })
+ *
+ * <a href="#terms" rel="facebox">Terms</a>
+ * Loads the #terms div in the box
+ *
+ * <a href="terms.html" rel="facebox">Terms</a>
+ * Loads the terms.html page in the box
+ *
+ * <a href="terms.png" rel="facebox">Terms</a>
+ * Loads the terms.png image in the box
+ *
+ *
+ * You can also use it programmatically:
+ *
+ * jQuery.facebox('some html')
+ * jQuery.facebox('some html', 'my-groovy-style')
+ *
+ * The above will open a facebox with "some html" as the content.
+ *
+ * jQuery.facebox(function($) {
+ * $.get('blah.html', function(data) { $.facebox(data) })
+ * })
+ *
+ * The above will show a loading screen before the passed function is called,
+ * allowing for a better ajaxy experience.
+ *
+ * The facebox function can also display an ajax page, an image, or the contents of a div:
+ *
+ * jQuery.facebox({ ajax: 'remote.html' })
+ * jQuery.facebox({ ajax: 'remote.html' }, 'my-groovy-style')
+ * jQuery.facebox({ image: 'stairs.jpg' })
+ * jQuery.facebox({ image: 'stairs.jpg' }, 'my-groovy-style')
+ * jQuery.facebox({ div: '#box' })
+ * jQuery.facebox({ div: '#box' }, 'my-groovy-style')
+ *
+ * Want to close the facebox? Trigger the 'close.facebox' document event:
+ *
+ * jQuery(document).trigger('close.facebox')
+ *
+ * Facebox also has a bunch of other hooks:
+ *
+ * loading.facebox
+ * beforeReveal.facebox
+ * reveal.facebox (aliased as 'afterReveal.facebox')
+ * init.facebox
+ * afterClose.facebox
+ *
+ * Simply bind a function to any of these hooks:
+ *
+ * $(document).bind('reveal.facebox', function() { ...stuff to do after the facebox and contents are revealed... })
+ *
+ */
+(function($) {
+ $.facebox = function(data, klass) {
+ $.facebox.loading()
+
+ if (data.ajax) fillFaceboxFromAjax(data.ajax, klass)
+ else if (data.image) fillFaceboxFromImage(data.image, klass)
+ else if (data.div) fillFaceboxFromHref(data.div, klass)
+ else if ($.isFunction(data)) data.call($)
+ else $.facebox.reveal(data, klass)
+ }
+
+ /*
+ * Public, $.facebox methods
+ */
+
+ $.extend($.facebox, {
+ settings: {
+ opacity : 0.2,
+ overlay : true,
+ loadingImage : '/facebox/loading.gif',
+ closeImage : '/facebox/closelabel.png',
+ imageTypes : [ 'png', 'jpg', 'jpeg', 'gif' ],
+ faceboxHtml : '\
+ <div id="facebox" style="display:none;"> \
+ <div class="popup"> \
+ <div class="content"> \
+ </div> \
+ <a href="#" class="close"><img src="/facebox/closelabel.png" title="close" class="close_image" /></a> \
+ </div> \
+ </div>'
+ },
+
+ loading: function() {
+ init()
+ if ($('#facebox .loading').length == 1) return true
+ showOverlay()
+
+ $('#facebox .content').empty()
+ $('#facebox .body').children().hide().end().
+ append('<div class="loading"><img src="'+$.facebox.settings.loadingImage+'"/></div>')
+
+ $('#facebox').css({
+ top: getPageScroll()[1] + (getPageHeight() / 10),
+ left: $(window).width() / 2 - 205
+ }).show()
+
+ $(document).bind('keydown.facebox', function(e) {
+ if (e.keyCode == 27) $.facebox.close()
+ return true
+ })
+ $(document).trigger('loading.facebox')
+ },
+
+ reveal: function(data, klass) {
+ $(document).trigger('beforeReveal.facebox')
+ if (klass) $('#facebox .content').addClass(klass)
+ $('#facebox .content').append(data)
+ $('#facebox .loading').remove()
+ $('#facebox .body').children().fadeIn('normal')
+ $('#facebox').css('left', $(window).width() / 2 - ($('#facebox .popup').width() / 2))
+ $(document).trigger('reveal.facebox').trigger('afterReveal.facebox')
+ },
+
+ close: function() {
+ $(document).trigger('close.facebox')
+ return false
+ }
+ })
+
+ /*
+ * Public, $.fn methods
+ */
+
+ $.fn.facebox = function(settings) {
+ if ($(this).length == 0) return
+
+ init(settings)
+
+ function clickHandler() {
+ $.facebox.loading(true)
+
+ // support for rel="facebox.inline_popup" syntax, to add a class
+ // also supports deprecated "facebox[.inline_popup]" syntax
+ var klass = this.rel.match(/facebox\[?\.(\w+)\]?/)
+ if (klass) klass = klass[1]
+
+ fillFaceboxFromHref(this.href, klass)
+ return false
+ }
+
+ return this.bind('click.facebox', clickHandler)
+ }
+
+ /*
+ * Private methods
+ */
+
+ // called one time to setup facebox on this page
+ function init(settings) {
+ if ($.facebox.settings.inited) return true
+ else $.facebox.settings.inited = true
+
+ $(document).trigger('init.facebox')
+ makeCompatible()
+
+ var imageTypes = $.facebox.settings.imageTypes.join('|')
+ $.facebox.settings.imageTypesRegexp = new RegExp('\.(' + imageTypes + ')$', 'i')
+
+ if (settings) $.extend($.facebox.settings, settings)
+ $('body').append($.facebox.settings.faceboxHtml)
+
+ var preload = [ new Image(), new Image() ]
+ preload[0].src = $.facebox.settings.closeImage
+ preload[1].src = $.facebox.settings.loadingImage
+
+ $('#facebox').find('.b:first, .bl').each(function() {
+ preload.push(new Image())
+ preload.slice(-1).src = $(this).css('background-image').replace(/url\((.+)\)/, '$1')
+ })
+
+ $('#facebox .close').click($.facebox.close)
+ $('#facebox .close_image').attr('src', $.facebox.settings.closeImage)
+ }
+
+ // getPageScroll() by quirksmode.com
+ function getPageScroll() {
+ var xScroll, yScroll;
+ if (self.pageYOffset) {
+ yScroll = self.pageYOffset;
+ xScroll = self.pageXOffset;
+ } else if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict
+ yScroll = document.documentElement.scrollTop;
+ xScroll = document.documentElement.scrollLeft;
+ } else if (document.body) {// all other Explorers
+ yScroll = document.body.scrollTop;
+ xScroll = document.body.scrollLeft;
+ }
+ return new Array(xScroll,yScroll)
+ }
+
+ // Adapted from getPageSize() by quirksmode.com
+ function getPageHeight() {
+ var windowHeight
+ if (self.innerHeight) { // all except Explorer
+ windowHeight = self.innerHeight;
+ } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
+ windowHeight = document.documentElement.clientHeight;
+ } else if (document.body) { // other Explorers
+ windowHeight = document.body.clientHeight;
+ }
+ return windowHeight
+ }
+
+ // Backwards compatibility
+ function makeCompatible() {
+ var $s = $.facebox.settings
+
+ $s.loadingImage = $s.loading_image || $s.loadingImage
+ $s.closeImage = $s.close_image || $s.closeImage
+ $s.imageTypes = $s.image_types || $s.imageTypes
+ $s.faceboxHtml = $s.facebox_html || $s.faceboxHtml
+ }
+
+ // Figures out what you want to display and displays it
+ // formats are:
+ // div: #id
+ // image: blah.extension
+ // ajax: anything else
+ function fillFaceboxFromHref(href, klass) {
+ // div
+ if (href.match(/#/)) {
+ var url = window.location.href.split('#')[0]
+ var target = href.replace(url,'')
+ if (target == '#') return
+ $.facebox.reveal($(target).html(), klass)
+
+ // image
+ } else if (href.match($.facebox.settings.imageTypesRegexp)) {
+ fillFaceboxFromImage(href, klass)
+ // ajax
+ } else {
+ fillFaceboxFromAjax(href, klass)
+ }
+ }
+
+ function fillFaceboxFromImage(href, klass) {
+ var image = new Image()
+ image.onload = function() {
+ $.facebox.reveal('<div class="image"><img src="' + image.src + '" /></div>', klass)
+ }
+ image.src = href
+ }
+
+ function fillFaceboxFromAjax(href, klass) {
+ $.get(href, function(data) { $.facebox.reveal(data, klass) })
+ }
+
+ function skipOverlay() {
+ return $.facebox.settings.overlay == false || $.facebox.settings.opacity === null
+ }
+
+ function showOverlay() {
+ if (skipOverlay()) return
+
+ if ($('#facebox_overlay').length == 0)
+ $("body").append('<div id="facebox_overlay" class="facebox_hide"></div>')
+
+ $('#facebox_overlay').hide().addClass("facebox_overlayBG")
+ .css('opacity', $.facebox.settings.opacity)
+ .click(function() { $(document).trigger('close.facebox') })
+ .fadeIn(200)
+ return false
+ }
+
+ function hideOverlay() {
+ if (skipOverlay()) return
+
+ $('#facebox_overlay').fadeOut(200, function(){
+ $("#facebox_overlay").removeClass("facebox_overlayBG")
+ $("#facebox_overlay").addClass("facebox_hide")
+ $("#facebox_overlay").remove()
+ })
+
+ return false
+ }
+
+ /*
+ * Bindings
+ */
+
+ $(document).bind('close.facebox', function() {
+ $(document).unbind('keydown.facebox')
+ $('#facebox').fadeOut(function() {
+ $('#facebox .content').removeClass().addClass('content')
+ $('#facebox .loading').remove()
+ $(document).trigger('afterClose.facebox')
+ })
+ hideOverlay()
+ })
+
+})(jQuery);
追加: branches/version-2_5-dev/html/js/jquery.facebox/loading.gif
===================================================================
(バイナリファイルが異なっています)
Property changes on: branches/version-2_5-dev/html/js/jquery.facebox/loading.gif
___________________________________________________________________
追加: svn:mime-type
+ application/octet-stream
Svn-src-all メーリングリストの案内