デモ版スライダー組み込み

phpBB3 設置に関わる資料
返信する
アバター
mansyuu
管理人
記事: 77
登録日時: 2023年6月03日(土) 00:38

デモ版スライダー組み込み

投稿記事 by mansyuu »

 
デモ用画像としては縦横比 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>&nbsp;
</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>&nbsp;
</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>&nbsp;
</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>&nbsp;
</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>&nbsp;
</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>&nbsp;
</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>&nbsp;
</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>&nbsp;
</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>&nbsp;
</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>&nbsp;
</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>&nbsp;
</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>&nbsp;
</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>&nbsp;
</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>&nbsp;
</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>&nbsp;
</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>&nbsp;
</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>&nbsp;
</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>&nbsp;
</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;
}
返信する