デモ用画像としては縦横比 16:9 が望ましい。
サムネイルは縦幅 100px を基準とする。
サムネイル保存場所はルート上任意のフォルダで良い。
当ボードでは ./images/demo_slider/ フォルダに保存している。
overall_header.html
<script type="text/javascript" src="Script/crawl.js">
// Image Crawler Script (c)2009 John Davenport Scheuer
// This Notice Must Remain for Legal Use
</script>
<link href="Script/last_x_att_style.css" rel="stylesheet" type="text/css" />
index_body.html
<p class="{S_CONTENT_FLOW_END} responsive-center time<!-- IF S_USER_LOGGED_IN --> rightside<!-- ENDIF -->"><!-- IF S_USER_LOGGED_IN -->{LAST_VISIT_DATE}<!-- ELSE -->{CURRENT_TIME}<!-- ENDIF --></p>
<!-- IF S_USER_LOGGED_IN --><p class="responsive-center time">{CURRENT_TIME}</p><!-- ENDIF -->
<!-- INCLUDE demo_slider.html -->
<!-- EVENT index_body_markforums_before -->
prosilver フォルダからインクルード demo_slider.html
-------------------------------------------------------------------------
<div class="forabg">
<div class="inner">
<div class="corners-top"></div>
<ul class="topiclist">
<li class="row bg1">
<div id="mycrawler">
<span class="highslide-gallery">
<a href="./images/demo_slider/angel_001.jpg" title="" class="highslide" onclick="return hs.expand(this, { slideshowGroup: 'photo_gp' } )"><img src="./images/demo_slider/angel_001s.jpg" title="" alt="" /></a>
</span>
<span class="highslide-gallery">
<a href="./images/demo_slider/angel_002.jpg" title="" class="highslide" onclick="return hs.expand(this, { slideshowGroup: 'photo_gp' } )"><img src="./images/demo_slider/angel_002s.jpg" title="" alt="" /></a>
</span>
<span class="highslide-gallery">
<a href="./images/demo_slider/angel_003.jpg" title="" class="highslide" onclick="return hs.expand(this, { slideshowGroup: 'photo_gp' } )"><img src="./images/demo_slider/angel_003s.jpg" title="" alt="" /></a>
</span>
<span class="highslide-gallery">
<a href="./images/demo_slider/angel_004.jpg" title="" class="highslide" onclick="return hs.expand(this, { slideshowGroup: 'photo_gp' } )"><img src="./images/demo_slider/angel_004s.jpg" title="" alt="" /></a>
</span>
<span class="highslide-gallery">
<a href="./images/demo_slider/angel_005.jpg" title="" class="highslide" onclick="return hs.expand(this, { slideshowGroup: 'photo_gp' } )"><img src="./images/demo_slider/angel_005s.jpg" title="" alt="" /></a>
</span>
<span class="highslide-gallery">
<a href="./images/demo_slider/angel_006.jpg" title="" class="highslide" onclick="return hs.expand(this, { slideshowGroup: 'photo_gp' } )"><img src="./images/demo_slider/angel_006s.jpg" title="" alt="" /></a>
</span>
<span class="highslide-gallery">
<a href="./images/demo_slider/angel_007.jpg" title="" class="highslide" onclick="return hs.expand(this, { slideshowGroup: 'photo_gp' } )"><img src="./images/demo_slider/angel_007s.jpg" title="" alt="" /></a>
</span>
<span class="highslide-gallery">
<a href="./images/demo_slider/angel_008.jpg" title="" class="highslide" onclick="return hs.expand(this, { slideshowGroup: 'photo_gp' } )"><img src="./images/demo_slider/angel_008s.jpg" title="" alt="" /></a>
</span>
<span class="highslide-gallery">
<a href="./images/demo_slider/angel_009.jpg" title="" class="highslide" onclick="return hs.expand(this, { slideshowGroup: 'photo_gp' } )"><img src="./images/demo_slider/angel_009s.jpg" title="" alt="" /></a>
</span>
<span class="highslide-gallery">
<a href="./images/demo_slider/angel_010.jpg" title="" class="highslide" onclick="return hs.expand(this, { slideshowGroup: 'photo_gp' } )"><img src="./images/demo_slider/angel_010s.jpg" title="" alt="" /></a>
</span>
<span class="highslide-gallery">
<a href="./images/demo_slider/angel_011.jpg" title="" class="highslide" onclick="return hs.expand(this, { slideshowGroup: 'photo_gp' } )"><img src="./images/demo_slider/angel_011s.jpg" title="" alt="" /></a>
</span>
<span class="highslide-gallery">
<a href="./images/demo_slider/angel_012.jpg" title="" class="highslide" onclick="return hs.expand(this, { slideshowGroup: 'photo_gp' } )"><img src="./images/demo_slider/angel_012s.jpg" title="" alt="" /></a>
</span>
<span class="highslide-gallery">
<a href="./images/demo_slider/angel_013.jpg" title="" class="highslide" onclick="return hs.expand(this, { slideshowGroup: 'photo_gp' } )"><img src="./images/demo_slider/angel_013s.jpg" title="" alt="" /></a>
</span>
<span class="highslide-gallery">
<a href="./images/demo_slider/angel_014.jpg" title="" class="highslide" onclick="return hs.expand(this, { slideshowGroup: 'photo_gp' } )"><img src="./images/demo_slider/angel_014s.jpg" title="" alt="" /></a>
</span>
<span class="highslide-gallery">
<a href="./images/demo_slider/angel_015.jpg" title="" class="highslide" onclick="return hs.expand(this, { slideshowGroup: 'photo_gp' } )"><img src="./images/demo_slider/angel_015s.jpg" title="" alt="" /></a>
</span>
<span class="highslide-gallery">
<a href="./images/demo_slider/angel_016.jpg" title="" class="highslide" onclick="return hs.expand(this, { slideshowGroup: 'photo_gp' } )"><img src="./images/demo_slider/angel_016s.jpg" title="" alt="" /></a>
</span>
<span class="highslide-gallery">
<a href="./images/demo_slider/angel_017.jpg" title="" class="highslide" onclick="return hs.expand(this, { slideshowGroup: 'photo_gp' } )"><img src="./images/demo_slider/angel_017s.jpg" title="" alt="" /></a>
</span>
<span class="highslide-gallery">
<a href="./images/demo_slider/angel_018.jpg" title="" class="highslide" onclick="return hs.expand(this, { slideshowGroup: 'photo_gp' } )"><img src="./images/demo_slider/angel_018s.jpg" title="" alt="" /></a>
</span>
<span class="highslide-gallery">
<a href="./images/demo_slider/angel_019.jpg" title="" class="highslide" onclick="return hs.expand(this, { slideshowGroup: 'photo_gp' } )"><img src="./images/demo_slider/angel_019s.jpg" title="" alt="" /></a>
</span>
</div>
</li>
</ul>
<div class="corners-bottom"></div>
</div>
</div>
<script>
marqueeInit({
uniqueid: 'mycrawler',
style: {
'padding': '0px',
'width': '99%',
'height': '120px',
'margin-top': '0px',
'margin-left': 'auto',
'margin-right': 'auto'
},
inc: 4, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 2,
neutral: 600, // neutral region in the middle in px
savedirection: false
});
</script>
-------------------------------------------------------------------------
crawl.js
コード: 全て選択
/* Text and/or Image Crawler Script 2009 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/
///////////////// DO NOT EDIT /////////////////
function marqueeInit(config){
if(!document.createElement) return;
marqueeInit.ar.push(config);
marqueeInit.run(config.uniqueid);
}
(function(){
if(!document.createElement) return;
marqueeInit.ar = [];
document.write('<style type="text/css">.marquee{white-space:nowrap;overflow:hidden;visibility:hidden;}' +
'#marq_kill_marg_bord{border:none!important;margin:0!important;}<\/style>');
var c = 0, tTRE = [new RegExp('^\\s*$'), new RegExp('^\\s*'), new RegExp('\\s*$')],
req1 = {'position': 'relative', 'overflow': 'hidden'}, defaultconfig = {
style: { //default style object for marquee containers without configured style
'margin': '0 auto'
},
direction: 'left',
inc: 2, //default speed - pixel increment for each iteration of a marquee's movement
mouse: 'pause' //default mouseover behavior ('pause' 'cursor driven' or false)
}, dash, ie = false, oldie = 0, ie5 = false, iever = 0;
/*@cc_on @*/
/*@if(@_jscript_version >= 5)
ie = true;
try{document.documentMode = 2000}catch(e){};
iever = Math.min(document.documentMode, navigator.appVersion.replace(/^.*MSIE (\d+\.\d+).*$/, '$1'));
if(iever < 6)
oldie = 1;
if(iever < 5.5){
Array.prototype.push = function(el){this[this.length] = el;};
ie5 = true;
dash = new RegExp('(-(.))');
String.prototype.encamel = function(s, m){
s = this;
while((m = s.match(dash)))
s = s.replace(m[1], m[2].toUpperCase());
return s;
};
}
@end @*/
if(!ie5){
dash = new RegExp('-(.)', 'g');
function toHump(a, b){return b.toUpperCase();};
String.prototype.encamel = function(){return this.replace(dash, toHump);};
}
if(ie && iever < 8){
marqueeInit.table = [];
window.attachEvent('onload', function(){
marqueeInit.OK = true;
for(var i = 0; i < marqueeInit.table.length; ++i)
marqueeInit.run(marqueeInit.table[i]);
});
}
function intable(el){
while((el = el.parentNode))
if(el.tagName && el.tagName.toLowerCase() === 'table')
return true;
return false;
};
marqueeInit.run = function(id){
if(ie && !marqueeInit.OK && iever < 8 && intable(document.getElementById(id))){
marqueeInit.table.push(id);
return;
}
if(!document.getElementById(id))
setTimeout(function(){marqueeInit.run(id);}, 300);
else
new Marq(c++, document.getElementById(id));
}
function trimTags(tag){
var r = [], i = 0, e;
while((e = tag.firstChild) && e.nodeType == 3 && tTRE[0].test(e.nodeValue))
tag.removeChild(e);
while((e = tag.lastChild) && e.nodeType == 3 && tTRE[0].test(e.nodeValue))
tag.removeChild(e);
if((e = tag.firstChild) && e.nodeType == 3)
e.nodeValue = e.nodeValue.replace(tTRE[1], '');
if((e = tag.lastChild) && e.nodeType == 3)
e.nodeValue = e.nodeValue.replace(tTRE[2], '');
while((e = tag.firstChild))
r[i++] = tag.removeChild(e);
return r;
}
function Marq(c, tag){
var p, u, s, a, ims, ic, i, marqContent, cObj = this;
this.mq = marqueeInit.ar[c];
for (p in defaultconfig)
if((this.mq.hasOwnProperty && !this.mq.hasOwnProperty(p)) || (!this.mq.hasOwnProperty && !this.mq[p]))
this.mq[p] = defaultconfig[p];
this.mq.style.width = !this.mq.style.width || isNaN(parseInt(this.mq.style.width))? '100%' : this.mq.style.width;
if(!tag.getElementsByTagName('img')[0])
this.mq.style.height = !this.mq.style.height || isNaN(parseInt(this.mq.style.height))? tag.offsetHeight + 3 + 'px' : this.mq.style.height;
else
this.mq.style.height = !this.mq.style.height || isNaN(parseInt(this.mq.style.height))? 'auto' : this.mq.style.height;
u = this.mq.style.width.split(/\d/);
this.cw = this.mq.style.width? [parseInt(this.mq.style.width), u[u.length - 1]] : ['a'];
marqContent = trimTags(tag);
tag.className = tag.id = '';
tag.removeAttribute('class', 0);
tag.removeAttribute('id', 0);
if(ie)
tag.removeAttribute('className', 0);
tag.appendChild(tag.cloneNode(false));
tag.className = ['marquee', c].join('');
tag.style.overflow = 'hidden';
this.c = tag.firstChild;
this.c.appendChild(this.c.cloneNode(false));
this.c.style.visibility = 'hidden';
a = [[req1, this.c.style], [this.mq.style, this.c.style]];
for (i = a.length - 1; i > -1; --i)
for (p in a[i][0])
if((a[i][0].hasOwnProperty && a[i][0].hasOwnProperty(p)) || (!a[i][0].hasOwnProperty))
a[i][1][p.encamel()] = a[i][0][p];
this.m = this.c.firstChild;
if(this.mq.mouse == 'pause'){
this.c.onmouseover = function(){cObj.mq.stopped = true;};
this.c.onmouseout = function(){cObj.mq.stopped = false;};
}
this.m.style.position = 'absolute';
this.m.style.left = '-10000000px';
this.m.style.whiteSpace = 'nowrap';
if(ie5) this.c.firstChild.appendChild((this.m = document.createElement('nobr')));
if(!this.mq.noAddedSpace)
this.m.appendChild(document.createTextNode('\xa0'));
for(i = 0; marqContent[i]; ++i)
this.m.appendChild(marqContent[i]);
if(ie5) this.m = this.c.firstChild;
ims = this.m.getElementsByTagName('img');
if(ims.length){
for(ic = 0, i = 0; i < ims.length; ++i){
ims[i].style.display = 'inline';
ims[i].style.verticalAlign = ims[i].style.verticalAlign || 'top';
if(typeof ims[i].complete == 'boolean' && ims[i].complete)
ic++;
else {
ims[i].onload = function(){
if(++ic == ims.length)
cObj.setup();
};
}
if(ic == ims.length)
this.setup();
}
}
else this.setup()
}
Marq.prototype.setup = function(){
if(this.mq.setup) return;
this.mq.setup = this;
var s, cObj = this;
if(this.c.style.height === 'auto')
this.c.style.height = this.m.offsetHeight + 4 + 'px';
this.c.appendChild(this.m.cloneNode(true));
this.m = [this.m, this.m.nextSibling];
if(this.mq.mouse == 'cursor driven'){
this.r = this.mq.neutral || 16;
this.sinc = this.mq.inc;
this.c.onmousemove = function(e){cObj.mq.stopped = false; cObj.directspeed(e)};
if(this.mq.moveatleast){
this.mq.inc = this.mq.moveatleast;
if(this.mq.savedirection){
if(this.mq.savedirection == 'reverse'){
this.c.onmouseout = function(e){
if(cObj.contains(e)) return;
cObj.mq.inc = cObj.mq.moveatleast;
cObj.mq.direction = cObj.mq.direction == 'right'? 'left' : 'right';};
} else {
this.mq.savedirection = this.mq.direction;
this.c.onmouseout = function(e){
if(cObj.contains(e)) return;
cObj.mq.inc = cObj.mq.moveatleast;
cObj.mq.direction = cObj.mq.savedirection;};
}
} else
this.c.onmouseout = function(e){if(!cObj.contains(e)) cObj.mq.inc = cObj.mq.moveatleast;};
}
else
this.c.onmouseout = function(e){if(!cObj.contains(e)) cObj.slowdeath();};
}
this.w = this.m[0].offsetWidth;
this.m[0].style.left = 0;
this.c.id = 'marq_kill_marg_bord';
this.m[0].style.top = this.m[1].style.top = Math.floor((this.c.offsetHeight - this.m[0].offsetHeight) / 2 - oldie) + 'px';
this.c.id = '';
this.c.removeAttribute('id', 0);
this.m[1].style.left = this.w + 'px';
s = this.mq.moveatleast? Math.max(this.mq.moveatleast, this.sinc) : (this.sinc || this.mq.inc);
while(this.c.offsetWidth > this.w - s)
this.c.style.width = isNaN(this.cw[0])? this.w - s + 'px' : --this.cw[0] + this.cw[1];
this.c.style.visibility = 'visible';
this.runit();
}
Marq.prototype.slowdeath = function(){
var cObj = this;
if(this.mq.inc){
this.mq.inc -= 1;
this.timer = setTimeout(function(){cObj.slowdeath();}, 100);
}
}
Marq.prototype.runit = function(){
var cObj = this, d = this.mq.direction == 'right'? 1 : -1;
if(this.mq.stopped || this.mq.stopMarquee){
setTimeout(function(){cObj.runit();}, 300);
return;
}
if(this.mq.mouse != 'cursor driven')
this.mq.inc = Math.max(1, this.mq.inc);
if(d * parseInt(this.m[0].style.left) >= this.w)
this.m[0].style.left = parseInt(this.m[1].style.left) - d * this.w + 'px';
if(d * parseInt(this.m[1].style.left) >= this.w)
this.m[1].style.left = parseInt(this.m[0].style.left) - d * this.w + 'px';
this.m[0].style.left = parseInt(this.m[0].style.left) + d * this.mq.inc + 'px';
this.m[1].style.left = parseInt(this.m[1].style.left) + d * this.mq.inc + 'px';
setTimeout(function(){cObj.runit();}, 30 + (this.mq.addDelay || 0));
}
Marq.prototype.directspeed = function(e){
e = e || window.event;
if(this.timer) clearTimeout(this.timer);
var c = this.c, w = c.offsetWidth, l = c.offsetLeft, mp = (typeof e.pageX == 'number'?
e.pageX : e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft) - l,
lb = (w - this.r) / 2, rb = (w + this.r) / 2;
while((c = c.offsetParent)) mp -= c.offsetLeft;
this.mq.direction = mp > rb? 'left' : 'right';
this.mq.inc = Math.round((mp > rb? (mp - rb) : mp < lb? (lb - mp) : 0) / lb * this.sinc);
}
Marq.prototype.contains = function(e){
if(e && e.relatedTarget){var c = e.relatedTarget; if(c == this.c) return true;
while ((c = c.parentNode)) if(c == this.c) return true;}
return false;
}
function resize(){
for(var s, m, i = 0; i < marqueeInit.ar.length; ++i){
if(marqueeInit.ar[i] && marqueeInit.ar[i].setup){
m = marqueeInit.ar[i].setup;
s = m.mq.moveatleast? Math.max(m.mq.moveatleast, m.sinc) : (m.sinc || m.mq.inc);
m.c.style.width = m.mq.style.width;
m.cw[0] = m.cw.length > 1? parseInt(m.mq.style.width) : 'a';
while(m.c.offsetWidth > m.w - s)
m.c.style.width = isNaN(m.cw[0])? m.w - s + 'px' : --m.cw[0] + m.cw[1];
}
}
}
if (window.addEventListener)
window.addEventListener('resize', resize, false);
else if (window.attachEvent)
window.attachEvent('onresize', resize);
})();last_x_att_style.css
コード: 全て選択
/* Last X [attachments] on Forum - Stylesheet
------------ */
a.linkrahmen:link .bildrahmen {
border:3px #888 double;
}
a.linkrahmen:visited .bildrahmen {
border:3px #888 double;
}
a.linkrahmen:hover .bildrahmen {
border:3px #ccc double;
}
a.linkrahmen:active .bildrahmen {
border:3px #888 double;
}