<!DOCTYPE html> <!--[if IE 6]><html id="ie6" dir="ltr" lang="en-US"> <![endif]--> <!--[if IE 7]><html id="ie7" dir="ltr" lang="en-US"> <![endif]--> <!--[if IE 8]><html id="ie8" dir="ltr" lang="en-US"> <![endif]--> <!--[if !(IE 6) | !(IE 7) | !(IE 8) ]><!--><html dir="ltr" lang="en-US"> <!--<![endif]--><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" />
<link type="text/css" media="all" href="css/autoptimize.css" rel="stylesheet" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css"/>
<script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/jquery-ui.min.js" type="text/javascript"></script> <script src="js/jquery.elevatezoom.min.js" type="text/javascript"></script> <script src="jsl/jquery.fancybox.pack.js" type="text/javascript"></script> <script type="text/javascript" src="js/prism.js"></script> <script type="text/javascript">var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-12402473-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();</script> <script type="text/javascript" src="js/plusone.js"></script> </head><body class="home page page-id-236 page-template page-template-widehome-php logged-in admin-bar single-author singular two-column right-sidebar">
<div id="page" class="hfeed">
<div class="TopNavListOuter" style=" width:100%;background-color:#444;">
<div class="TopNavList" id="TopNavList" style="background-color:#444;">
<div style="float:left; width:980px;">
<div class="zoom-wrapper">
<div class="zoom-left">
<img style="" id="img_01" src="img/small/01.jpg" data-zoom-image="img/large/01.jpg" width="411" />
<div id="gal1" style="width=" 500pxfloat:left; ">
<a href="#" class="elevatezoom-gallery" data-image="img/small/01.jpg" data-zoom-image="img/large/01.jpg"><img id="img_01" src="img/small/01.jpg" width="99" /></a>
<a href="#" class="elevatezoom-gallery" data-image="img/small/02.jpg" data-zoom-image="img/large/02.jpg"><img id="" src="img/small/02.jpg" width="99" /></a>
<a href="#" class="elevatezoom-gallery" data-image="img/small/03.jpg" data-zoom-image="img/large/03.jpg"><img id="" src="img/small/03.jpg" width="99" /></a>
<a href="#" class="elevatezoom-gallery" data-image="img/small/04.jpg" data-zoom-image="img/large/04.jpg"><img id="" src="img/small/04.jpg" width="99" /></a></div>
</div>
<div style="float: left;width: 500px;padding: 10px;padding-left:10px;">
<h3><a name="window-position">写真のタイトル</a></h3>
<ul>
<li><font FACE="メイリオ" STYLE="font-family : メイリオ;">コメント他<br>
小さい画像をクリックすると、上の大きな画像に表示されます。<br>
大きい画像にマウスを乗せると、左側に拡大写真が表示され、<br>
マウスのスクロールボタンを操作すると、その画面の拡大･縮小が出来ます。<br></font></li>
</ul>
</div>
<div style="clear:both;"></div>
<script type="text/javascript">$(document).ready(function () {
$("#zoom_06").elevateZoom({
zoomType: "inner",
debug : true,
cursor: "crosshair"
});
});</script>
<div class="scripts view_script_05">
</div>
<script type="text/javascript">$(document).ready(function () {
$("#select").change(function(e){
var currentValue = $("#select").val();
if(currentValue == 1){
smallImage = 'img/small/01.jpg';
largeImage = 'img/large/01.jpg';
}
if(currentValue == 2){
smallImage = 'img/small/02.jpg';
largeImage = 'img/large/02.jpg';
}
if(currentValue == 3){
smallImage = 'img/small/03.jpg';
largeImage = 'img/large/03.jpg';
}
if(currentValue == 4){
smallImage = 'img/small/04.jpg';
largeImage = 'img/large/04.jpg';
}
// Using default configuration
var ez = $('#img_01').data('elevateZoom');
ez.swaptheimage(smallImage, largeImage);
});
// Using custom configuration
$("#img_01").elevateZoom({
zoomWindowFadeIn : 500,
zoomLensFadeIn: 500,
gallery: "gal1",
imageCrossfade: true,
zoomWindowWidth:411,
zoomWindowHeight:274,
zoomWindowOffetx: 10,
scrollZoom: true,
cursor:"pointer"
});
$("#img_01").bind("click", function(e) {
var ez = $('#img_01').data('elevateZoom');
$.fancybox(ez.getGalleryList());
return false;
});
$("#img_02").elevateZoom({
gallery: "gal2",
tint: true,
cursor:"crosshair",
windowHeight:600
});
$("#img_03").elevateZoom({
zoomType : "lens",
lensShape : "round",
lensSize : 200
});
$("#img_02").bind("click", function(e) {
var ez = $('#img_02').data('elevateZoom');
$.fancybox(ez.getGalleryList());
return false;
});
});</script>
</div>
</div>
</div>
</div>
</div>
</body></html> |
