Changeset 21171


Ignore:
Timestamp:
2011/08/09 22:11:38 (13 years ago)
Author:
nanasess
bzr:base-revision:
ohkouchi@loop-az.jp-20110809101927-q90z2txogt4ky0bc
bzr:committer:
Kentaro Ohkouchi <ohkouchi@loop-az.jp>
bzr:file-ids:

data/Smarty/templates/sphone/products/detail.tpl 19775@1e3b908f-19a9-db11-a64c-001125224ba8:branches%2Fversion-2_5-dev%2Fdata%2FSmarty%2Ftemplates%2Fsphone%2Fproducts%2Fdetail.tpl
html/user_data/packages/sphone/js/jquery.flickslide.js 21059@1e3b908f-19a9-db11-a64c-001125224ba8:branches%2Fversion-2_11-dev%2Fhtml%2Fuser_data%2Fpackages%2Fsphone%2Fjs%2Fjquery.flickslide.js
bzr:mapping-version:
v4
bzr:merge:

ohkouchi@loop-az.jp-20110809131110-puv14k3mzczcoo9y
bzr:repository-uuid:
1e3b908f-19a9-db11-a64c-001125224ba8
bzr:revision-id:
ohkouchi@loop-az.jp-20110809131135-gp1a2irg5jbejn5g
bzr:revno:
3874
bzr:revprop:branch-nick:
branches/version-2_11-dev
bzr:root:
branches/version-2_11-dev
bzr:testament:

bazaar-ng testament short form 2.1
revision-id: ohkouchi@loop-az.jp-20110809131135-gp1a2irg5jbejn5g
sha1: bb1e2c7c118d2530eb02fa25ca5309298927dbcc
bzr:text-parents:

data/Smarty/templates/sphone/products/detail.tpl ohkouchi@loop-az.jp-20110809065554-lpx5jlm2iqty439j
html/user_data/packages/sphone/js/jquery.flickslide.js ohkouchi@loop-az.jp-20110809051905-j2dlbyfwb9tbhkoc
bzr:timestamp:
2011-08-09 22:11:35.177000046 +0900
bzr:user-agent:
bzr2.3.1+bzr-svn1.1.0dev0
Message:

#1413 画像の縦横比に応じて, 表示を可変するよう修正

Location:
branches/version-2_11-dev
Files:
2 edited

Legend:

Unmodified
Added
Removed

  • branches/version-2_11-dev/data/Smarty/templates/sphone/products/detail.tpl

    r21164 r21171  
    3232} 
    3333$(function(){ 
    34     $('#detailphotoblock ul li').flickSlide({target:'#detailphotoblock>ul', duration:5000, parentArea:'#detailphotoblock'}); 
    35     $('#whobought_area ul li').flickSlide({target:'#whobought_area>ul', duration:5000, parentArea:'#whobought_area'}); 
     34    $('#detailphotoblock ul li').flickSlide({target:'#detailphotoblock>ul', duration:5000, parentArea:'#detailphotoblock', height: 200}); 
     35    $('#whobought_area ul li').flickSlide({target:'#whobought_area>ul', duration:5000, parentArea:'#whobought_area', height: 80}); 
    3636 
    3737    //お勧め商品のリンクを張り直し(フリックスライドによるエレメント生成後) 
    … …  
    7777<h2 class="title"><!--{$tpl_subtitle|h}--></h2> 
    7878<!--★画像★--> 
     79 
    7980<div id="detailphotoblock" class="mainImageInit"> 
    8081    <ul> 
    8182        <!--{assign var=key value="main_image"}--> 
    8283        <li id="mainImage0"> 
     84 
     85        <!--{* 画像の縦横倍率を算出 *}--> 
     86        <!--{assign var=detail_image_size value=200}--> 
     87        <!--{assign var=main_image_factor value=`$arrFile[$key].width/$detail_image_size`}--> 
    8388        <!--{if $arrProduct.main_large_image|strlen >= 1}--> 
    8489            <a rel="external" class="expansion" href="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct.main_large_image|h}-->" target="_blank"> 
    85                 <img src="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct.main_large_image|h}-->" alt="<!--{$arrProduct.name|h}-->" width="200" height="200" /></a> 
     90                <img src="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct.main_image|h}-->" alt="<!--{$arrProduct.name|h}-->" width="<!--{$arrFile.main_image.width/$main_image_factor}-->" height="<!--{$arrFile.main_image.height/$main_image_factor}-->" /></a> 
    8691        <!--{else}--> 
    87             <img src="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct.main_large_image|h}-->" alt="<!--{$arrProduct.name|h}-->" width="200" height="200" /> 
     92            <img src="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct.main_image|h}-->" alt="<!--{$arrProduct.name|h}-->" width="<!--{$arrFile.main_image.width/$main_image_factor}-->" height="<!--{$arrFile.main_image.height/$main_image_factor}-->" /> 
    8893        <!--{/if}--> 
    8994        </li> 
    9095        <!--★サブ画像★--> 
    9196        <!--{section name=cnt loop=$smarty.const.PRODUCTSUB_MAX}--> 
    92         <!--{assign var=key value="sub_title`$smarty.section.cnt.index+1`"}--> 
    93         <!--{if $arrProduct[$key] != ""}--> 
    94             <!--{assign var=key value="sub_image`$smarty.section.cnt.index+1`"}--> 
    95             <!--{assign var=lkey value="sub_large_image`$smarty.section.cnt.index+1`"}--> 
     97        <!--{assign var=sub_image_factor value=`$arrFile[$key].width/$detail_image_size`}--> 
     98        <!--{assign var=key value="sub_image`$smarty.section.cnt.index+1`"}--> 
     99        <!--{assign var=lkey value="sub_large_image`$smarty.section.cnt.index+1`"}--> 
     100        <!--{if $arrFile[$key].filepath != ""}--> 
    96101            <li id="mainImage<!--{$smarty.section.cnt.index+1}-->"> 
     102            <!--{if $arrProduct[$lkey] != ""}--> 
    97103              <a rel="external" class="expansion" href="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct[$lkey]|h}-->" target="_blank"> 
    98               <img src="<!--{$arrFile[$key].filepath}-->" alt="<!--{$arrProduct.name|h}-->" width="200" height="200" /></a> 
    99               </li> 
     104              <img src="<!--{$arrFile[$key].filepath|h}-->" alt="<!--{$arrProduct.name|h}-->" width="<!--{$arrFile[$key].width/$sub_image_factor}-->" height="<!--{$arrFile[$key].height/$sub_image_factor}-->" /></a> 
     105            <!--{else}--> 
     106              <img src="<!--{$arrFile[$key].filepath|h}-->" alt="<!--{$arrProduct.name|h}-->" width="<!--{$arrFile[$key].width/$sub_image_factor}-->" height="<!--{$arrFile[$key].height/$sub_image_factor}-->" /> 
     107            <!--{/if}--> 
     108            </li> 
    100109        <!--{/if}--> 
    101110        <!--{/section}--> 
    … …  
    123132    <div class="product_detail"> 
    124133 
    125         <!--★ダウンロード販売★--> 
    126         <!--{if $arrProduct.down == 2}--> 
    127             <div><font color="red">本商品はダウンロード販売となります。<br /> 購入後はMYページの購入履歴からダウンロード可能です。</font></div><br /> 
    128         <!--{/if}--> 
    129                      
    130134        <!--★商品名★--> 
    131135        <h3 class="product_name"><!--{$arrProduct.name|h}--></h3> 
    … …  
    304308 
    305309            <!--★サブ画像★--> 
     310            <!--{assign var=sub_image_size value=80}--> 
    306311            <!--{assign var=key value="sub_image`$smarty.section.cnt.index+1`"}--> 
    307312            <!--{assign var=lkey value="sub_large_image`$smarty.section.cnt.index+1`"}--> 
    308313            <!--{assign var=ckey value="sub_comment`$smarty.section.cnt.index+1`"}--> 
     314            <!--{assign var=sub_image_factor value=`$arrFile[$key].width/$sub_image_size`}--> 
    309315            <!--{if $arrProduct[$key]|strlen >= 1}--> 
    310316                <p class="subphotoimg"> 
    311317                <!--{if $arrProduct[$lkey]|strlen >= 1}--> 
    312                     <a rel="external" href="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct[$lkey]|h}-->" target="_blank"> 
    313                     <img src="<!--{$arrFile[$key].filepath}-->" alt="<!--{$arrProduct.name|h}-->" width="80" height="80" /> 
     318                    <a rel="external" class="expansion" href="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct[$lkey]|h}-->" target="_blank"> 
     319                    <img src="<!--{$arrFile[$key].filepath}-->" alt="<!--{$arrProduct.name|h}-->" width="<!--{$arrFile[$key].width/$sub_image_factor}-->" height="<!--{$arrFile[$key].height/$sub_image_factor}-->" /> 
    314320                    </a> 
    315321                <!--{else}--> 
    316                     <img src="<!--{$arrFile[$key].filepath}-->" alt="<!--{$arrProduct.name|h}-->" width="80" height="80" /> 
     322                    <img src="<!--{$arrFile[$key].filepath}-->" alt="<!--{$arrProduct.name|h}-->" width="<!--{$arrFile[$key].width/$sub_image_factor}-->" height="<!--{$arrFile[$key].height/$sub_image_factor}-->" /> 
    317323                <!--{/if}--> 
    318324                </p> 

  • branches/version-2_11-dev/html/user_data/packages/sphone/js/jquery.flickslide.js

    r21160 r21171  
    22// Copyright (c) 2011 Kosuke Araki - twitterF@kaleido_kosuke 
    33// Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php 
    4 (function($){$.fn.flickSlide=function(settings){var currentX; var maxX;var strUA=navigator.userAgent.toLowerCase(),webkitUA=['iphone','android','ipad'],runiLayout=false,iLayoutLocation='',currentX=0,maxX=0,slideObj={},slideLock=1,slideTimer={},slideLotation={},slideDuration=4000,slideCount=0,pagerMax=0,orientationChangeDelay=0;for(var i=0;i<webkitUA.length;i++){if(strUA.indexOf(webkitUA[i],0)!=-1){runiLayout=true;if(webkitUA[i]==='android'){orientationChangeDelay=400} 
    5 if(webkitUA[i]==='iphone'){orientationChangeDelay=0}}} 
     4(function($){ 
     5     $.fn.flickSlide=function(settings){ 
     6         var currentX; 
     7         var maxX; 
     8         var strUA=navigator.userAgent.toLowerCase(), 
     9         webkitUA=['iphone','android','ipad'], 
     10         runiLayout=false, 
     11         iLayoutLocation='', 
     12         currentX=0, 
     13         maxX=0, 
     14         slideObj={}, 
     15         slideLock=1, 
     16         slideTimer={}, 
     17         slideLotation={}, 
     18         slideDuration=4000, 
     19         slideCount=0, 
     20         pagerMax=0, 
     21         orientationChangeDelay=0; 
     22         for(var i=0;i<webkitUA.length;i++){ 
     23             if(strUA.indexOf(webkitUA[i],0)!=-1){ 
     24                 runiLayout=true; 
     25                 if(webkitUA[i]==='android'){ 
     26                     orientationChangeDelay=400; 
     27                 } 
     28                 if(webkitUA[i]==='iphone'){ 
     29                     orientationChangeDelay=0; 
     30                 } 
     31             } 
     32         } 
    633//if(runiLayout!==true){return;} 
    734//if(typeof $(this)===undefined||$(this).length===0){return;} 
    8 window.addEventListener("orientationchange",function(){if(runiLayout!==true){return} 
    9 switch(window.orientation){case 0:orientationChangeCore();break;case 90:orientationChangeCore();break;case-90:orientationChangeCore();break;}},false);function orientationChangeCore(){clearTimeout(slideTimer);setTimeout(function(){var styles=getComputedStyle($('.moveWrap').get(0));if(styles){$('.resizable').css('width',styles.width);$('.slideMask').css('height',$('.move').outerHeight()).css('width',styles.width-1); 
    10 maxX=Number($(settings.parentArea + ' .flickSlideContainer li.slideUnit').length-1)*Number(getComputedStyle($(settings.parentArea + ' .flickSlideContainer li.slideUnit').get(0)).width.replace('px',''))*-1; 
    11 $('div.flickSlideContainer ul.move').get(0).style.webkitTransform='translate3d(0,0,0)'; 
    12 currentX=0;slideCount=0;slidePager();slideTimer=setTimeout(lotation,slideDuration);}else{}},orientationChangeDelay);} 
    13 function lotation(){ 
    14 //if(slideLock===0){var slideUnitWidth=slideObj.children('li.slideUnit').outerWidth();slideObj.get(0).style.webkitTransition='-webkit-transform 0.6s ease-out';diffX=-151;if(currentX===maxX){slideObj.get(0).style.webkitTransform='translate3d(0, 0, 0)';currentX=0;slideCount=0;slidePager();}else{currentX=currentX-slideUnitWidth;slideObj.get(0).style.webkitTransform='translate3d('+currentX+'px, 0, 0)';slideCount++;slidePager();}} 
    15 //slideLock=0;slideTimer=setTimeout(lotation,slideDuration); 
     35         window.addEventListener("orientationchange", 
     36                                 function(){ 
     37                                     if(runiLayout!==true){ 
     38                                         return; 
     39                                     } 
     40                                     switch(window.orientation){ 
     41                                     case 0: 
     42                                         orientationChangeCore(); 
     43                                         break; 
     44 
     45                                     case 90: 
     46                                         orientationChangeCore(); 
     47                                         break; 
     48 
     49                                     case -90: 
     50                                         orientationChangeCore(); 
     51                                         break; 
     52                                     } 
     53                                 },false); 
     54 
     55         function orientationChangeCore(){ 
     56             clearTimeout(slideTimer); 
     57             setTimeout(function(){ 
     58                            var styles=getComputedStyle($('.moveWrap').get(0)); 
     59                            if(styles){ 
     60                                $('.resizable').css('width',styles.width); 
     61                                $('.slideMask').css('height',$('.move').outerHeight()) 
     62                                               .css('width',styles.width-1); 
     63                                maxX = Number( 
     64                                    $(settings.parentArea + ' .flickSlideContainer li.slideUnit').length-1) * Number( 
     65                                        getComputedStyle( 
     66                                            $(settings.parentArea + ' .flickSlideContainer li.slideUnit').get(0)) 
     67                                            .width.replace('px',''))*-1; 
     68 
     69                                $('div.flickSlideContainer ul.move').get(0).style.webkitTransform = 'translate3d(0,0,0)'; 
     70                                currentX=0; 
     71                                slideCount=0; 
     72                                slidePager(); 
     73                                slideTimer=setTimeout(lotation,slideDuration); 
     74                            }else{ 
     75                            } 
     76                        },orientationChangeDelay); 
     77         } 
     78         function lotation(){ 
     79             //if(slideLock===0){var slideUnitWidth=slideObj.children('li.slideUnit').outerWidth();slideObj.get(0).style.webkitTransition='-webkit-transform 0.6s ease-out';diffX=-151;if(currentX===maxX){slideObj.get(0).style.webkitTransform='translate3d(0, 0, 0)';currentX=0;slideCount=0;slidePager();}else{currentX=currentX-slideUnitWidth;slideObj.get(0).style.webkitTransform='translate3d('+currentX+'px, 0, 0)';slideCount++;slidePager();}} 
     80             //slideLock=0;slideTimer=setTimeout(lotation,slideDuration); 
     81         } 
     82         function slidePager(){ 
     83             var currentPager=$('.slidePagerPointer.active'); 
     84             var nextID='#pager'+String(slideCount); 
     85             currentPager.removeClass('active'); 
     86             $(nextID).addClass('active'); 
     87             switch(slideCount){ 
     88             case 0: 
     89                 $('.flickSlideBottom .bottomLeft').addClass('off'); 
     90                 $('.flickSlideBottom .bottomRight').removeClass('off'); 
     91                 break; 
     92 
     93             case pagerMax: 
     94                 $('.flickSlideBottom .bottomRight').addClass('off'); 
     95                 $('.flickSlideBottom .bottomLeft').removeClass('off'); 
     96                 break; 
     97 
     98             default: 
     99                 $('.flickSlideBottom .bottomLeft').removeClass('off'); 
     100                 $('.flickSlideBottom .bottomRight').removeClass('off'); 
     101                 break; 
     102             } 
     103         } 
     104 
     105         $.fn.slideButton=function(settings){ 
     106             var settings = $.extend({ 
     107                                       direction:'prev', 
     108                                       widthSource:{} 
     109                                   },settings); 
     110             var self=$(this); 
     111             self.click(function(){ 
     112                            var slideUnitWidth=settings.widthSource.outerWidth(); 
     113                            slideLock=1; 
     114                            clearTimeout(slideTimer); 
     115                            slideObj.get(0).style.webkitTransition='-webkit-transform 0.6s ease-out'; 
     116                            if(settings.direction==='prev'){ 
     117                                if(currentX==0){ 
     118                                    slideObj.get(0).style.webkitTransform='translate3d(0, 0, 0)'; 
     119                                    slideTimer=setTimeout(lotation,slideDuration); 
     120                                    slideLock=0; 
     121                                }else{ 
     122                                    currentX = currentX+slideUnitWidth; 
     123                                    slideObj.get(0).style.webkitTransform = 'translate3d('+currentX+'px, 0, 0)'; 
     124                                    slideCount--; 
     125                                    slidePager(); 
     126                                    slideTimer=setTimeout(lotation,slideDuration); 
     127                                    slideLock=0; 
     128                                } 
     129                            }else if(settings.direction==='next'){ 
     130                                if(currentX===maxX){ 
     131                                    slideObj.get(0).style.webkitTransform='translate3d('+maxX+'px, 0, 0)'; 
     132                                    slideTimer=setTimeout(lotation,slideDuration); 
     133                                    slideLock=0; 
     134                                }else{ 
     135                                    currentX=currentX-slideUnitWidth; 
     136                                    slideObj.get(0).style.webkitTransform='translate3d('+currentX+'px, 0, 0)'; 
     137                                    slideCount++; 
     138                                    slidePager(); 
     139                                    slideTimer=setTimeout(lotation,slideDuration); 
     140                                    slideLock=0; 
     141                                } 
     142                            } 
     143                        }); 
     144         }; 
     145 
     146         $.fn.touchDrag=function(settings){ 
     147             var settings=$.extend({ 
     148                                       slideDuration:4000, 
     149                                       targetWidth:150 
     150                                   },settings); 
     151             var diffX=0; 
     152             slideObj=$(this); 
     153             slideDuration=settings.slideDuration; 
     154             slideObj.bind('touchstart',{type:'start'},touchHandler); 
     155             slideObj.bind('touchmove',{type:'move'},touchHandler); 
     156             slideObj.bind('touchend',{type:'end'},touchHandler); 
     157             function touchHandler(e){ 
     158                 var slideUnitWidth=slideObj.children('li.slideUnit').outerWidth(); 
     159                 var touch=e.originalEvent.touches[0]; 
     160                 if(e.type=="touchstart"){ 
     161                     clearTimeout(slideTimer); 
     162                     diffX=0; 
     163                     startX=touch.pageX; 
     164                     startY=touch.pageY; 
     165                     startTime=(new Date()).getTime(); 
     166                 }else if(e.type=="touchmove"){ 
     167                     diffX=touch.pageX-startX; 
     168                     diffY=touch.pageY-startY; 
     169                     if(Math.abs(diffX)-Math.abs(diffY)>0){ 
     170                         e.preventDefault(); 
     171                         moveX=Number(currentX+diffX); 
     172                         slideObj.css('-webkit-transition','none'); 
     173                         slideObj.get(0).style.webkitTransform='translate3d( '+moveX+'px, 0, 0)'; 
     174                     } 
     175                 }else if(e.type=="touchend"){ 
     176                     var endTime=(new Date()).getTime(); 
     177                     var diffTime=endTime-startTime; 
     178                     if(diffTime<300){ 
     179                         slideObj.get(0).style.webkitTransition='-webkit-transform 0.5s ease-out'; 
     180                     }else{ 
     181                         slideObj.get(0).style.webkitTransition='-webkit-transform 0.6s ease-out'; 
     182                     } 
     183                     if(diffX>settings.targetWidth||(diffX>60&&diffTime<400&&orientationChangeDelay===0)){ 
     184                         if(currentX==0){ 
     185                             slideObj.get(0).style.webkitTransform='translate3d(0, 0, 0)'; 
     186                         }else{ 
     187                             currentX=currentX+slideUnitWidth; 
     188                             slideObj.get(0).style.webkitTransform='translate3d('+currentX+'px, 0, 0)'; 
     189                             slideCount--; 
     190                             slidePager(); 
     191                         } 
     192                     }else if(diffX<(settings.targetWidth*-1)||(diffX<-60&&diffTime<400&&orientationChangeDelay===0)){ 
     193                         if(currentX===maxX){ 
     194                             slideObj.get(0).style.webkitTransform='translate3d('+maxX+'px, 0, 0)'; 
     195                         }else{ 
     196                             currentX=currentX-slideUnitWidth; 
     197                             slideObj.get(0).style.webkitTransform='translate3d('+currentX+'px, 0, 0)'; 
     198                             slideCount++;slidePager(); 
     199                         } 
     200                     }else{ 
     201                         if(currentX===0){ 
     202                             slideObj.get(0).style.webkitTransform='translate3d(0, 0, 0)'; 
     203                         }else if(currentX===maxX){ 
     204                             slideObj.get(0).style.webkitTransform='translate3d('+maxX+'px, 0, 0)'; 
     205                         }else{ 
     206                             slideObj.get(0).style.webkitTransform='translate3d('+currentX+'px, 0, 0)'; 
     207                         } 
     208                     } 
     209                     slideTimer=setTimeout(lotation,slideDuration);slideLock=0;}} 
     210             slideTimer=setTimeout(lotation,slideDuration); 
     211         }; 
     212 
     213         var settings=$.extend({ 
     214                                   target:'', 
     215                                   colum:1, 
     216                                   height:170, 
     217                                   duration:4000, 
     218                                   parentArea:'' 
     219                               },settings); 
     220         var contents=$(this); 
     221         var targetWidth=contents.outerWidth(); 
     222         var contentsLength=contents.length; 
     223         var wrap=$('<div class="flickSlideContainer"><div class="moveWrap"><ul class="move"></ul></div></div>'); 
     224         var slideMask=$('<div class="slideMask resizable"></div>'); 
     225         var bottom=$('<div class="flickSlideBottom"><div class="bottomLeft off">&lt;</div><ul class="slidePager"></ul><div class="bottomRight">&gt;</div></div>');var bottom2=$('<div class="flickSlideBottom"><div class="bottomLeft off"></div><ul class="slidePager"></ul><div class="bottomRight"></div></div>'); 
     226 
     227         var img = $(this).contents().find('img'); 
     228 
     229         /* 
     230         img.removeAttr('width') 
     231            .removeAttr('height') 
     232            .css({ 
     233                     width:'100%', 
     234                     height:'auto' 
     235                 }); 
     236          */ 
     237         var loop=Math.floor(contentsLength/settings.colum); 
     238         loop=contentsLength%settings.colum>0?loop++:loop; 
     239         pagerMax=loop-1; 
     240 
     241         var contentsCount=0; 
     242         for(var i=0;i<loop;i++){ 
     243             var unitElem=$('<li/>') 
     244                 .addClass('slideUnit'). 
     245                 addClass('resizable'); 
     246 
     247             var pager=$('<li id="pager'+i+'" class="slidePagerPointer"></li>'); 
     248             if(i===0){ 
     249                 pager.addClass('active'); 
     250             } 
     251             for(var j=0;j<settings.colum;j++){ 
     252                 var itemElem=$('<div/>'); 
     253                 if(typeof contents[contentsCount]!==undefined){ 
     254                     itemElem.append($(contents[contentsCount]).children()); 
     255                 } 
     256                 unitElem.append(itemElem); 
     257                 contentsCount++; 
     258             } 
     259             // 画像の高さに合わせて padding-top を入れるよう変更 
     260             var imgHeight = unitElem.children().find('img').attr('height'); 
     261             if (imgHeight < 1) { 
     262                  imgHeight = settings.height; 
     263             } 
     264             var paddingSize = (settings.height / 2) - (imgHeight / 2); 
     265             unitElem.css('padding-top', paddingSize + 'px'); 
     266             wrap.contents().find('ul.move').append(unitElem); 
     267             bottom.children('ul.slidePager').append(pager); 
     268         } 
     269         //スライド最大幅を表示エリアの横幅×liの数→liの横幅×liの数に変更 
     270         $(settings.target).after(wrap); 
     271         $(settings.target).remove(); 
     272         bottom.children('.bottomLeft').slideButton({ 
     273                                                        direction:'prev', 
     274                                                        widthSource:wrap.contents().find('li.slideUnit') 
     275                                                    }); 
     276         bottom.children('.bottomRight').slideButton({ 
     277                                                         direction:'next', 
     278                                                         widthSource:wrap.contents().find('li.slideUnit') 
     279                                                     }); 
     280         wrap.contents().find('ul.move').touchDrag({ 
     281                                                       duration:settings.duration, 
     282                                                       targetWidth:(targetWidth*0.4) 
     283                                                   }); 
     284         if(contentsLength > 1) { 
     285             wrap.after(bottom); 
     286         } else { 
     287             wrap.after(bottom2); 
     288         }; 
     289         $(window).bind('load',function(){ 
     290                            var styles=getComputedStyle($('.moveWrap').get(0)); 
     291                            if(styles){ 
     292                                $('.resizable').css('width',styles.width); 
     293                                $('.slideMask').css('height',$('.move').outerHeight()) 
     294                                               .css('width',styles.width-1); 
     295 
     296                                if ($(settings.parentArea + ' .flickSlideContainer li.slideUnit').get(0)){ 
     297                                    maxX=Number($(settings.parentArea + ' .flickSlideContainer li.slideUnit').length-1)*Number(getComputedStyle($(settings.parentArea + ' .flickSlideContainer li.slideUnit').get(0)).width.replace('px',''))*-1; 
     298                                } 
     299                            } 
     300                            var slideFirstChild=$('ul.move li:first').clone(); 
     301                            $('ul.move').show(); 
     302                        }); 
     303     }; 
     304 })(jQuery); 
     305var is={ 
     306    ie:navigator.appName=='Microsoft Internet Explorer', 
     307    java:navigator.javaEnabled(), 
     308    ns:navigator.appName=='Netscape', 
     309    ua:navigator.userAgent.toLowerCase(), 
     310    version:parseFloat(navigator.appVersion.substr(21))|| parseFloat(navigator.appVersion),win:navigator.platform=='Win32' 
     311}; 
     312is.mac=is.ua.indexOf('mac')>=0; 
     313if(is.ua.indexOf('opera')>=0){ 
     314    is.ie=is.ns=false;is.opera=true; 
    16315} 
    17 function slidePager(){var currentPager=$('.slidePagerPointer.active');var nextID='#pager'+String(slideCount);currentPager.removeClass('active');$(nextID).addClass('active');switch(slideCount){case 0:$('.flickSlideBottom .bottomLeft').addClass('off');$('.flickSlideBottom .bottomRight').removeClass('off');break;case pagerMax:$('.flickSlideBottom .bottomRight').addClass('off');$('.flickSlideBottom .bottomLeft').removeClass('off');break;default:$('.flickSlideBottom .bottomLeft').removeClass('off');$('.flickSlideBottom .bottomRight').removeClass('off');break;}} 
    18 $.fn.slideButton=function(settings){var settings=$.extend({direction:'prev',widthSource:{}},settings);var self=$(this);self.click(function(){var slideUnitWidth=settings.widthSource.outerWidth();slideLock=1;clearTimeout(slideTimer);slideObj.get(0).style.webkitTransition='-webkit-transform 0.6s ease-out';if(settings.direction==='prev'){if(currentX==0){slideObj.get(0).style.webkitTransform='translate3d(0, 0, 0)';slideTimer=setTimeout(lotation,slideDuration);slideLock=0;}else{currentX=currentX+slideUnitWidth;slideObj.get(0).style.webkitTransform='translate3d('+currentX+'px, 0, 0)';slideCount--;slidePager();slideTimer=setTimeout(lotation,slideDuration);slideLock=0;}}else if(settings.direction==='next'){if(currentX===maxX){slideObj.get(0).style.webkitTransform='translate3d('+maxX+'px, 0, 0)';slideTimer=setTimeout(lotation,slideDuration);slideLock=0;}else{currentX=currentX-slideUnitWidth;slideObj.get(0).style.webkitTransform='translate3d('+currentX+'px, 0, 0)';slideCount++;slidePager();slideTimer=setTimeout(lotation,slideDuration);slideLock=0;}}});} 
    19 $.fn.touchDrag=function(settings){var settings=$.extend({slideDuration:4000, targetWidth:150},settings);var diffX=0;slideObj=$(this);slideDuration=settings.slideDuration;slideObj.bind('touchstart',{type:'start'},touchHandler);slideObj.bind('touchmove',{type:'move'},touchHandler);slideObj.bind('touchend',{type:'end'},touchHandler);function touchHandler(e){var slideUnitWidth=slideObj.children('li.slideUnit').outerWidth();var touch=e.originalEvent.touches[0];if(e.type=="touchstart"){clearTimeout(slideTimer);diffX=0;startX=touch.pageX;startY=touch.pageY;startTime=(new Date()).getTime();}else if(e.type=="touchmove"){diffX=touch.pageX-startX;diffY=touch.pageY-startY;if(Math.abs(diffX)-Math.abs(diffY)>0){e.preventDefault();moveX=Number(currentX+diffX);slideObj.css('-webkit-transition','none');slideObj.get(0).style.webkitTransform='translate3d( '+moveX+'px, 0, 0)';}}else if(e.type=="touchend"){var endTime=(new Date()).getTime();var diffTime=endTime-startTime;if(diffTime<300){slideObj.get(0).style.webkitTransition='-webkit-transform 0.5s ease-out';}else{slideObj.get(0).style.webkitTransition='-webkit-transform 0.6s ease-out';} 
    20 if(diffX>settings.targetWidth||(diffX>60&&diffTime<400&&orientationChangeDelay===0)){if(currentX==0){slideObj.get(0).style.webkitTransform='translate3d(0, 0, 0)';}else{currentX=currentX+slideUnitWidth;slideObj.get(0).style.webkitTransform='translate3d('+currentX+'px, 0, 0)';slideCount--;slidePager();}}else if(diffX<(settings.targetWidth*-1)||(diffX<-60&&diffTime<400&&orientationChangeDelay===0)){if(currentX===maxX){slideObj.get(0).style.webkitTransform='translate3d('+maxX+'px, 0, 0)';}else{currentX=currentX-slideUnitWidth;slideObj.get(0).style.webkitTransform='translate3d('+currentX+'px, 0, 0)';slideCount++;slidePager();}}else{if(currentX===0){slideObj.get(0).style.webkitTransform='translate3d(0, 0, 0)';}else if(currentX===maxX){slideObj.get(0).style.webkitTransform='translate3d('+maxX+'px, 0, 0)';}else{slideObj.get(0).style.webkitTransform='translate3d('+currentX+'px, 0, 0)';}} 
    21 slideTimer=setTimeout(lotation,slideDuration);slideLock=0;}} 
    22 slideTimer=setTimeout(lotation,slideDuration);} 
    23 var settings=$.extend({target:'',colum:1,height:170,duration:4000,parentArea:''},settings);var contents=$(this);var targetWidth=contents.outerWidth();var contentsLength=contents.length;var wrap=$('<div class="flickSlideContainer"><div class="moveWrap"><ul class="move"></ul></div></div>');var slideMask=$('<div class="slideMask resizable"></div>');var bottom=$('<div class="flickSlideBottom"><div class="bottomLeft off">&lt;</div><ul class="slidePager"></ul><div class="bottomRight">&gt;</div></div>');var bottom2=$('<div class="flickSlideBottom"><div class="bottomLeft off"></div><ul class="slidePager"></ul><div class="bottomRight"></div></div>') 
    24 //$(this).contents().find('img').removeAttr('width').removeAttr('height').css({width:'100%',height:'auto'}); 
    25 var loop=Math.floor(contentsLength/settings.colum);loop=contentsLength%settings.colum>0?loop++:loop;pagerMax=loop-1;var contentsCount=0;for(var i=0;i<loop;i++){var unitElem=$('<li/>').addClass('slideUnit').addClass('resizable');var pager=$('<li id="pager'+i+'" class="slidePagerPointer"></li>');if(i===0){pager.addClass('active')} 
    26 for(var j=0;j<settings.colum;j++){var itemElem=$('<div/>');if(typeof contents[contentsCount]!==undefined){itemElem.append($(contents[contentsCount]).children());} 
    27 unitElem.append(itemElem);contentsCount++;} 
    28 wrap.contents().find('ul.move').append(unitElem);bottom.children('ul.slidePager').append(pager);} 
    29 //スライド最大幅を表示エリアの横幅×liの数→liの横幅×liの数に変更 
    30 $(settings.target).after(wrap);$(settings.target).remove(); 
    31 bottom.children('.bottomLeft').slideButton({direction:'prev',widthSource:wrap.contents().find('li.slideUnit')});bottom.children('.bottomRight').slideButton({direction:'next',widthSource:wrap.contents().find('li.slideUnit')});wrap.contents().find('ul.move').touchDrag({duration:settings.duration,targetWidth:(targetWidth*0.4)});if(contentsLength > 1) {wrap.after(bottom)} else {wrap.after(bottom2)};$(window).bind('load',function(){var styles=getComputedStyle($('.moveWrap').get(0));if(styles){$('.resizable').css('width',styles.width);$('.slideMask').css('height',$('.move').outerHeight()).css('width',styles.width-1); 
    32 if ($(settings.parentArea + ' .flickSlideContainer li.slideUnit').get(0)){maxX=Number($(settings.parentArea + ' .flickSlideContainer li.slideUnit').length-1)*Number(getComputedStyle($(settings.parentArea + ' .flickSlideContainer li.slideUnit').get(0)).width.replace('px',''))*-1;}} 
    33 var slideFirstChild=$('ul.move li:first').clone();$('ul.move').show();});}})(jQuery);var is={ie:navigator.appName=='Microsoft Internet Explorer',java:navigator.javaEnabled(),ns:navigator.appName=='Netscape',ua:navigator.userAgent.toLowerCase(),version:parseFloat(navigator.appVersion.substr(21))||parseFloat(navigator.appVersion),win:navigator.platform=='Win32'} 
    34 is.mac=is.ua.indexOf('mac')>=0;if(is.ua.indexOf('opera')>=0){is.ie=is.ns=false;is.opera=true;} 
    35 if(is.ua.indexOf('gecko')>=0){is.ie=is.ns=false;is.gecko=true;} 
     316if(is.ua.indexOf('gecko')>=0){ 
     317    is.ie=is.ns=false;is.gecko=true; 
     318} 
Note: See TracChangeset for help on using the changeset viewer.