複数のサムネイルをランダムで被らず表示させ、かつモーダルウィンドウを表示させたい。

実現したいこと

複数のサムネイルをリロードするたびランダムに被らず表示させ、かつモーダルウィンドウを表示させたい。

現在fancy box1.3.4を使い、画像をグループ化させることはできました。
そこにサムネイルをランダムに表示させる機能を追加させることは可能でしょうか。
また、その際どこに何を打てばいいのでしょうか。

試したこと

複数表示させるスクリプトを参考にランダム表示にするよう指示してみたのですが、fancyboxと同時に作動させる方法がわかりませんでした。
また、画像が縦に並んでしまいます。参考サイトのように横並びにしたいです。

以下使用したランダムコード

html
1<div class="clip">	
2	<script type="text/javascript">
3<!--
4
5var jumpURL = new Array();
6var imgURL = new Array();
7jumpURL[0] = "image/big/1.jpg";
8jumpURL[1] = "image/big/2.jpg";
9jumpURL[2] = "image/big/3.jpg";
10jumpURL[3] = "image/big/4.jpg";
11
12imgURL[0] = "image/small/1.jpg";
13imgURL[1] = "image/small/2.jpg";
14imgURL[2] = "image/small/3.jpg";
15imgURL[3] = "image/small/4.jpg";
16
17for(i = 0; i < 4; i++) {
18var n = parseInt(Math.random() * jumpURL.length);
19document.write('<div class="clip"><a href="'+jumpURL.slice(n,n+1)[0]+'" ><img src="'+imgURL.slice(n,n+1)[0]+'" border="0" width="125px"></a></div>'); 
20jumpURL.splice(n,1);
21imgURL.splice(n,1);
22}
23
24</script>
25<br style="clear:both;">

css
1.clip{
2　　float: left; /* 縦に並べる場合はこの部分を削除 */
3　　margin: 0pt 20px 8px;
4　　width: 80px;
5　　height: 80px;
6　}

以下使用したfancy boxコード

html
1<head>
2<link href="css/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" media="screen">
3<script type="text/javascript">
4		$(document).ready(function() {
5			/*
6			*   Examples - images
7			*/
8
9			$("a#example1").fancybox();
10
11			$("a#example2").fancybox({
12				'overlayShow'	: false,
13				'transitionIn'	: 'elastic',
14				'transitionOut'	: 'elastic'
15			});
16
17			$("a#example3").fancybox({
18				'transitionIn'	: 'none',
19				'transitionOut'	: 'none'	
20			});
21
22			$("a#example4").fancybox({
23				'opacity'		: true,
24				'overlayShow'	: false,
25				'transitionIn'	: 'elastic',
26				'transitionOut'	: 'none'
27			});
28
29			$("a#example5").fancybox();
30
31			$("a#example6").fancybox({
32				'titlePosition'		: 'outside',
33				'overlayColor'		: '#000',
34				'overlayOpacity'	: 0.9
35			});
36
37			$("a#example7").fancybox({
38				'titlePosition'	: 'inside'
39			});
40
41			$("a#example8").fancybox({
42				'titlePosition'	: 'over'
43			});
44
45			$("a[rel=example_group]").fancybox({
46				'transitionIn'		: 'none',
47				'transitionOut'		: 'none',
48				'titlePosition' 	: 'over',
49				'titleFormat'		: function(title, currentArray, currentIndex, currentOpts) {
50					return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
51				}
52			});
53
54			/*
55			*   Examples - various
56			*/
57
58			$("#various1").fancybox({
59				'titlePosition'		: 'inside',
60				'transitionIn'		: 'none',
61				'transitionOut'		: 'none'
62			});
63
64			$("#various2").fancybox();
65
66			$("#various3").fancybox({
67				'width'				: '75%',
68				'height'			: '75%',
69				'autoScale'			: false,
70				'transitionIn'		: 'none',
71				'transitionOut'		: 'none',
72				'type'				: 'iframe'
73			});
74
75			$("#various4").fancybox({
76				'padding'			: 0,
77				'autoScale'			: false,
78				'transitionIn'		: 'none',
79				'transitionOut'		: 'none'
80			});
81		});
82	</script>
83
84
85</head>
86
87<body>
88   <div>
89		<a rel="example_group" href="image/big/1.jpg"><img alt="" src="image/small/1.jpg" /></a>
90		<a rel="example_group" href="image/big/2.jpg" title=""><img alt="" src="image/small/2.jpg" /></a>
91		<a rel="example_group" href="image/big/3.jpg" title=""><img alt="" src="image/small/3" /></a>
92		<a rel="example_group" href="image/big/4.jpg" title=""><img alt="" src="image/small/4.jpg" /></a>
93   </div>
94
95
96<script type="text/javascript">
97
98	$(document).ready(function(){
99		$(".fancybox").fancybox();
100	});
101
102</script>
103</body>

m.ts10806

2018/04/06 01:58

試してみたご自身のコードを提示してください。（未完成で結構です）　また参考先などのURLは省略せず、リンク機能を利用してください。https://teratail.com/help/question-tips#questionTips3-3-1

行動規範の内容に同意します

回答1件

ベストアンサー

簡単に書くとこんな感じで。
ランダム＋fancyしかやっていません。
グルーピングについてはご自身で調整してください。

html
1<div id="image_list"></div>

javascript
1$(function($) {
2  imageDisplay();
3  $(".clip a").fancybox();
4});
5    
6function imageDisplay(){
7    for(i = 0; i < 4; i++) {
8        var n = parseInt(Math.random() * jumpURL.length);
9        $("#image_list").append('<div class="clip"><a href="'+jumpURL.slice(n,n+1)[0]+'"><img src="'+imgURL.slice(n,n+1)[0]+'"></a></div>'); 
10        jumpURL.splice(n,1);
11        imgURL.splice(n,1);
12    }
13}

document.write()でされているところを変更しています。
document.write()でその場に出力することが可能ですが、
それだとjavascriptとHTMLがごちゃ混ぜになって非常に読みづらいソースとなってしまいます。
基本は対象の場所に対して「挿入する処理」で追加していく方が見やすいです。

あとはお好きなように$(".clip a").fancybox()　の設定をいじってください。
relとかも入れられるのであれば$("#image_list").append('～～～')の～～～の部分のhtmlに任意に入れればOKです。

縦並びについては提示されたCSSに
「 /* 縦に並べる場合はこの部分を削除 */」てコメントありますよね。
float: left;で回り込み設定されているため横並びになってます。
そのコメント通り削除したら良いです。

投稿2018/04/06 04:50

m.ts10806

総合スコア80850