Hiệu ứng nội dung hình ảnh.

[nguyenartv3]

Mình làm diễn đàn mỹ thuật nên rất thích cái này. Không biết bên FM mình có làm được không ? Mạo mụi post 1 bài ở đây, có gì không phải anh em cho ý kiến nhé. THANKS !
Trước khi mở ảnh:

Hiệu ứng sau khi mở ảnh:

[maiquang]

làm kiểu gì thế bạn?

[nguyenartv3]

"làm kiểu gì thế bạn ?". bạn hỏi vậy ý là sao. Mình ko biết mình mới hỏi mà
Cái này lúc xem thì bình thường, nhưng khi click vào nó sẽ ra kích thước ảnh full size, có cái nền tối phía sau nữa..

[maiquang]

chi VBB ?

[nguyenartv3]

Ờ, mình thấy cái này bên VBB

[TrungHieu]

Dùng lightbox, tìm bài viết của Huylord và maxf thử đi, quên mất ở đâu rồi :>

[nguyenartv3]

Hiz, ko xem demo được http://diendan.chinhphuc.info/forum-f20/topic-t5055.htm?highlight=lightbox

[HMT™]

Cái này là bật bật cửa sổ ảnh popup. Nhưng mà tham khảo mấy bài ấy làm chẳng được, hay là bị lỗi rồi

[talàvipnhất]

Cái nì chẳng biết làm thế nào

[nguyenartv3]

Ờ, chính xác đó, mình đã thử nhưng nó hiện ra cửa sổ mới thôi, chứ ko có popup gì hết

[HuyLord]

thử code cùi của mình xem: http://diendan.chinhphuc.info/forum-f37/topic-t7223.htm?highlight=lightbox
Nó ko hoạt động trong IE thôi .

[haitac261189]

àh cái này mình có lâu ùi nay bạn hỏi mình xin chia sẽ :

chèn đoạn sao vô CSS:

Code:


/* SLIMBOX */
#lbOverlay{position:fixed;z-index: 999;left:0;top:0;width:100%;height:100%;background-color:#000;cursor:pointer;}
#lbCenter,#lbBottomContainer{position:absolute;z-index: 999;overflow:hidden;background-color:#fff;}
.lbLoading{background:#fff url(http://i28.servimg.com/u/f28/13/98/42/59/novfao10.gif) no-repeat center;}
#lbImage{position:absolute;left:0;top:0;border:10px solid #fff;background-repeat:no-repeat;}
#lbPrevLink,#lbNextLink{display:block;position:absolute;top:0;width:50%;outline:none;}
#lbPrevLink{left:0;}
#lbPrevLink:hover{background:transparent url(http://i28.servimg.com/u/f28/13/98/42/59/11qo2n10.gif) no-repeat 0 15%;}
#lbNextLink{right:0;}
#lbNextLink:hover{background:transparent url(http://i28.servimg.com/u/f28/13/98/42/59/1r7u6o10.gif) no-repeat 100% 15%;}
#lbBottom{font-family:Verdana, Arial, Geneva, Helvetica, sans-serif;font-size:10px;color:#666;line-height:1.4em;text-align:left;border:10px solid #fff;border-top-style:none;}
#lbCloseLink{display:block;float:right;width:66px;height:22px;background:transparent url(http://i28.servimg.com/u/f28/13/98/42/59/1217by10.gif) no-repeat center;outline:none;margin:5px 0;}
#lbCaption,#lbNumber{margin-right:71px;}
#lbCaption{font-weight:bold;}


tạo 1 file .js copy đoạn sao vào file đó úp lên host:

Code:


/*Slimbox v2.02 */
(function(w){var E=w(window),u,g,F=-1,o,x,D,v,y,L,s,n=!window.XMLHttpRequest,e=window.opera&&(document.compatMode=="CSS1Compat")&&(w.browser.version>=9.3),m=document.documentElement,l={},t=new Image(),J=new Image(),H,a,h,q,I,d,G,c,A,K;w(function(){w("body").append(w([H=w('<div id="lbOverlay" />')[0],a=w('<div id="lbCenter" />')[0],G=w('<div id="lbBottomContainer" />')[0]]).css("display","none"));h=w('<div id="lbImage" />').appendTo(a).append(q=w('<div style="position: relative;" />').append([I=w('<a id="lbPrevLink" href="#" />').click(B)[0],d=w('<a id="lbNextLink" href="#" />').click(f)[0]])[0])[0];c=w('<div id="lbBottom" />').appendTo(G).append([w('<a id="lbCloseLink" href="#" />').add(H).click(C)[0],A=w('<div id="lbCaption" />')[0],K=w('<div id="lbNumber" />')[0],w('<div style="clear: both;" />')[0]])[0]});w.slimbox=function(O,N,M){u=w.extend({loop:false,overlayOpacity:0.8,overlayFadeDuration:400,resizeDuration:400,resizeEasing:"swing",initialWidth:250,initialHeight:250,imageFadeDuration:400,captionAnimationDuration:400,counterText:"Image {x} of {y}",closeKeys:[27,88,67],previousKeys:[37,80],nextKeys:[39,78]},M);if(typeof O=="string"){O=[[O,N]];N=0}y=E.scrollTop()+((e?m.clientHeight:E.height())/2);L=u.initialWidth;s=u.initialHeight;w(a).css({top:Math.max(0,y-(s/2)),width:L,height:s,marginLeft:-L/2}).show();v=n||(H.currentStyle&&(H.currentStyle.position!="fixed"));if(v){H.style.position="absolute"}w(H).css("opacity",u.overlayOpacity).fadeIn(u.overlayFadeDuration);z();k(1);g=O;u.loop=u.loop&&(g.length>1);return b(N)};w.fn.slimbox=function(M,P,O){P=P||function(Q){return[Q.href,Q.title]};O=O||function(){return true};var N=this;return N.unbind("click").click(function(){var S=this,U=0,T,Q=0,R;T=w.grep(N,function(W,V){return O.call(S,W,V)});for(R=T.length;Q<R;++Q){if(T[Q]==S){U=Q}T[Q]=P(T[Q],Q)}return w.slimbox(T,U,M)})};function z(){var N=E.scrollLeft(),M=e?m.clientWidth:E.width();w([a,G]).css("left",N+(M/2));if(v){w(H).css({left:N,top:E.scrollTop(),width:M,height:E.height()})}}function k(M){w("object").add(n?"select":"embed").each(function(O,P){if(M){w.data(P,"slimbox",P.style.visibility)}P.style.visibility=M?"hidden":w.data(P,"slimbox")});var N=M?"bind":"unbind";E[N]("scroll resize",z);w(document)[N]("keydown",p)}function p(O){var N=O.keyCode,M=w.inArray;return(M(N,u.closeKeys)>=0)?C():(M(N,u.nextKeys)>=0)?f():(M(N,u.previousKeys)>=0)?B():false}function B(){return b(x)}function f(){return b(D)}function b(M){if(M>=0){F=M;o=g[F][0];x=(F||(u.loop?g.length:0))-1;D=((F+1)%g.length)||(u.loop?0:-1);r();a.className="lbLoading";l=new Image();l.onload=j;l.src=o}return false}function j(){a.className="";w(h).css({backgroundImage:"url("+o+")",visibility:"hidden",display:""});w(q).width(l.width);w([q,I,d]).height(l.height);w(A).html(g[F][1]||"");w(K).html((((g.length>1)&&u.counterText)||"").replace(/{x}/,F+1).replace(/{y}/,g.length));if(x>=0){t.src=g[x][0]}if(D>=0){J.src=g[D][0]}L=h.offsetWidth;s=h.offsetHeight;var M=Math.max(0,y-(s/2));if(a.offsetHeight!=s){w(a).animate({height:s,top:M},u.resizeDuration,u.resizeEasing)}if(a.offsetWidth!=L){w(a).animate({width:L,marginLeft:-L/2},u.resizeDuration,u.resizeEasing)}w(a).queue(function(){w(G).css({width:L,top:M+s,marginLeft:-L/2,visibility:"hidden",display:""});w(h).css({display:"none",visibility:"",opacity:""}).fadeIn(u.imageFadeDuration,i)})}function i(){if(x>=0){w(I).show()}if(D>=0){w(d).show()}w(c).css("marginTop",-c.offsetHeight).animate({marginTop:0},u.captionAnimationDuration);G.style.visibility=""}function r(){l.onload=null;l.src=t.src=J.src=o;w([a,h,c]).stop(true);w([I,d,h,G]).hide()}function C(){if(F>=0){r();F=x=D=-1;w(a).hide();w(H).stop().fadeOut(u.overlayFadeDuration,k)}return false}})(jQuery);
// AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
jQuery(function($) {
   $("a[href]").filter(function() {
      return /\.(jpg|png|gif)$/i.test(this.href);
   }).slimbox({}, null, function(el) {
      return (this == el) || (this.parentNode && (this.parentNode == el.parentNode));
   });
});
function resizeimg() {
  if (document.getElementsByTagName) {
    for (i=0; i<document.getElementById('page-body').getElementsByTagName('img').length; i++){
      im = document.getElementById('page-body').getElementsByTagName('img')[i];
      if (im.id != "i_logo"){
      if (im.className != "default"){
      if (im.width > 400){
        eval("pop" + String(i) + " = new Function("pop = jQuery.slimbox('" + im.src + "', 'Full Size Image Preview'); pop.focus();")");
        eval("im.onclick = pop" + String(i) + ";");
        if (document.all) im.style.cursor = 'hand';
        if (!document.all) im.style.cursor = 'pointer';
        im.title = 'Click Here To See Image Full Size ';
      }
      }
      }
   }
  }
}
var topicnumber="";
var add="1";
  function createCookie(name,value,days) {
    if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document�cookie = name+"="+value+expires+"; path=/";
  }
  function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document�cookie.split(';');
      for(var i=0;i < ca.length;i++) {
      var c = ca[i];
      while (c.charAt(0)==' ') c = c.substring(1,c.length);
      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
  }
  function eraseCookie(name) {
  createCookie(name,"",-1);
  }
function hcg_wait() {
  if(typeof jQuery == 'undefined') {
  window.setTimeout(hcg_wait,100);
  }else {
  hcgstart();
  }
}
hcg_wait();
window.onload = resizeimg;


àh nhớ active cái resize mặc định trước nha

Cụ thể làm thế nào thì các bạn tự nghiên cứu nha
vậy là diễn đàn bạn đã có hiệu ứng xem hình hoàn toàn tự động rồi đó
Chúc các bạn thành công

Demo là diễn đàn mình :

http://da07tt.forum-2007.com/forum-f1/topic-t529.htm

[nguyenartv3]

mừng quá đi, hehe. demo ok, tuyệt
cảm ơn tất cả anh em !!!
Chít cha, cái "active resize" bạn nói mình search nó tùm lum, ko biết làm cái nào hết, bạn cho mình link chỉ dẫn làm giống y 4r của bạn đi haitac
Ek, còn nữa, cái link file.js mình up xong thì đưa vào chỗ nào vậy ?

[haitac261189]

oh active resize bạn xem :

bước 1 vô : Quản lý tổng thể ->tab Messages and Emails trong tab đó vô Cấu hình diễn đàn tìm Image resize chỉnh như hình:


bước 2 vô : Display -> tab Templates trong tab chọn Quản lý tổng thể rồi vô edit viewtopic_body

xem trong viewtopic_body còn đoạn script này ko nếu còn thì bạn đã active resize mặc định của forumotion rồi đó

Code:


<!-- BEGIN switch_image_resize --><script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.postbody', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]></script><!-- END switch_image_resize -->

nếu ko còn thì paste vô cúi là được
còn cái script kia bạn chèn vô viewtopic_body :

Code:

<script src="link js của bạn"></script>

còn đây là file js diễn đàn mình đang dùng"

Code:

<script src="http://da07tt.googlecode.com/files/forumaction.js" type="text/javascript"></script>

trong file gồm:
+Tab view :

+ lock view ie6:

+resize image simlibox 2.0: cái này demo trên kia rồi
nếu bạn dùng script tổng hợp này bạn paste vô overall_header
bạn dùng thì up sang host khác hé

[nguyenartv3]

Bài viết của bạn rất ...tuyệt. Mình làm thành công rồi.
Cảm ơn bạn nhiều nhé !
À ! có cái này mình tò mò muốn hỏi: mình thấy trong css có mấy cái nut prew, next mà sao khi sử dụng lại chẳng thấy đâu nhỉ ? hình như 4r của bạn cũng vậy ..

[nguyenartv3]

Cái này anh em nào có file js nhanh hơn share với nhé. Hiện tại tốc độ của mình chậm hơn VBB nhiều quá, hi vọng được cải thiện...

[Sponsored content]