パノラマギャラリーの写真のタイトルを表示したい
Q&A
Closed
解決したいこと
パノラマギャラリーの写真のタイトルを表示したい
↓のページを参考に、パノラマギャラリーを作りました。
ソースは、ほぼ掲載元のままで、写真だけ差し替えています。
ギャラリーの360°写真に、それぞれタイトルをつけたいのですが、写真ごとに個別にタイトルをつける方法がわかりません。
どのように変更すれば、個別のタイトルを付けられるようになるでしょうか?
javascript
$(function(){
var setElm = $('.viewer360'),
imgType = ".jpg";
setElm.each(function(){
var self = $(this),
setScreen = self.children('div').attr('id'),
setNum = self.attr('data-num'),
setImgPass = self.attr('data-pass');
self.children('div').wrapAll('<div class="screenWrap"></div>').end().append('<nav></nav>');
var thisNav = self.find('nav');
if(setNum > 0){
for (var i=0; i<setNum; i++) {
thisNav.append('<a href="javascript:void(0);" class="view' + (i+1) + '"></a>');
}
}
thisNav.find('a').click(function(){
self.find('.pnlm-ui.pnlm-grab, .pnlm-render-container').addClass('targetHide');
setTimeout(function(){self.find('.targetHide').remove();},600);
var acvPos = $(this).index()+1;
pannellum.viewer(setScreen, {
"panorama": setImgPass + acvPos + imgType,
"autoLoad": true,
"autoRotate": -3,
"yaw": 80,
"hfov": 120,
"title": ""
});
thisNav.find('a').removeClass('active');
$(this).addClass('active');
});
thisNav.find('a:first').click()
self.find('.screenWrap').append('<a href="javascript:void(0);" class="prev"></a><a href="javascript:void(0);" class="next"></a>');
self.find('.prev').click(function(){
var acvPos = thisNav.find('a.active').index()+1,
navLength = thisNav.find('a').length;
if(acvPos == 1){
thisNav.find('a').eq(navLength-1).click();
} else {
thisNav.find('a.active').prev().click();
}
});
self.find('.next').click(function(){
var acvPos = thisNav.find('a.active').index()+1,
navLength = thisNav.find('a').length;
if(acvPos == navLength){
thisNav.find('a').eq(0).click();
} else {
thisNav.find('a.active').next().click();
}
});
});
});
HTML
<!DOCTYPE html>
<html xml:lang="ja" lang="ja">
<head>
<meta charset="utf-8">
<title>jQuery 360°Viewer</title>
<link rel="stylesheet" href="http://black-flag.net/data/css/reset.css">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/pannellum.css">
</head>
<body>
<h1> jQuery 360°Viewer </h1>
<div id="container">
<div class="viewer360" data-num="4" data-pass="img/view">
<div id="screen"></div>
</div><!-- /.viewer360 -->
</div><!-- /#container -->
<h2>© 2010 <a href="http://black-flag.net/">BLACKFLAG</a></h2>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="js/pannellum.js"></script>
<script src="js/viewer.js"></script>
</body>
</html>
0 likes
