Question Thay đổi kích thước ảnh đại diện cho từng nhóm thành viên

Thảo luận trong 'Troubleshoot & Other Questions' bắt đầu bởi RuChi, 28/2/14.

1votes
5/5, 1 vote

  1. RuChi

    RuChi New Member

    Bài viết:
    32
    Likes :
    9
    Nhờ các cao thủ giúp mình thay đổi kích thước avatar cho từng group user. Ví dụ: Nhóm Admin có avatar kích thước lớn, VIP member + Mod kích thước trung bình, còn user kích thước nhỏ (mặc định).
    Hoặc giúp mình set kích thước avatar riêng cho 1 vài người có "đặc quyền" trong diễn đàn để phân biệt với nhóm user (giống 5giay.vn).
    Trân trọng cảm ơn!
     
    Đang tải...
  2. RuChi

    RuChi New Member

    Bài viết:
    32
    Likes :
    9
    Cho mình hỏi thêm chút: hiện tại mình đang sử dụng Xenforo 1.2.5 và Widget Framework v2.4.8 để tạo banner quảng cáo. Vấn đề của mình ở đây là khi thu nhỏ cửa sổ trình duyệt hoặc thay đổi độ phân giải của màn hình thì banner sẽ bị tràn ra như hình ở dưới. Mã HTML mình tham khảo tại đây: http://cutiseo.blogspot.com/2013/08/slideshow-chay-anh-ep-cho-blogger.html và có chỉnh sửa lại đôi chút, cụ thể là:
    Mã:
    <style type="text/css">
    .container1 {
    width: 938px;padding: 0;margin: 0 auto;
    }
    .folio_block {
    position: absolute;left: 50%; top: 50%;margin: -140px 0 0 -395px;}
    .main_view {float: left;position: relative;}
    /*--Window/Masking Styles--*/
    .window {
    height:188px; width: 938px;
    margin-top:10px;margin-bottom:10px;overflow: hidden; /*--Hides anything outside of the set width/height--*/
    position: relative;
    }
    .image_reel {
    position: absolute;top: 0; left: 0;
    }
    .image_reel img {float: left;}
    </style>
    <div class="container1">
    <div class="main_view">
    <div class="window">
    <div class="image_reel">
    <a href="http://dienmaynhatban.com"><img src="http://dienmaynhatban.com/image/advertisement/top/DMNB.png" alt="Diễn Đàn Điện Máy Nhật Bản" width='938' /></a>
    <a href="http://dienmaynhatban.com"><img src="http://dienmaynhatban.com/image/advertisement/top/DMNB.png" alt="Diễn Đàn Điện Máy Nhật Bản" width='938' /></a>
    <a href="http://dienmaynhatban.com"><img src="http://dienmaynhatban.com/image/advertisement/top/DMNB.png" alt="Diễn Đàn Điện Máy Nhật Bản" width='938' /></a>
    <a href="http://dienmaynhatban.com"><img src="http://dienmaynhatban.com/image/advertisement/top/DMNB.png" alt="Diễn Đàn Điện Máy Nhật Bản" width='938' /></a>
    </div>
    </div>
    <div class="paging_btrix">
    <a href="#" rel="1"></a>
    <a href="#" rel="2"></a>
    <a href="#" rel="3"></a>
    <a href="#" rel="4"></a>
    </div>
    </div>
    </div>
    <script type="text/javascript" src="http://dienmaynhatban.com/forum/js/jqueryjquery-1.3.2.min"></script>
    <script type="text/javascript">
    
    $(document).ready(function() {
    
    //Set Default State of each portfolio piece
    $(".paging_btrix").show();
    $(".paging_btrix a:first").addClass("active");
    
    //Get size of images, how many there are, then determin the size of the image reel.
    var imageWidth = $(".window").width();
    var imageSum = $(".image_reel img").size();
    var imageReelWidth = imageWidth * imageSum;
    
    //Adjust the image reel to its new size
    $(".image_reel").css({'width' : imageReelWidth});
    
    //paging_btrix + Slider Function
    rotate = function(){
    var triggerID = $active.attr("rel") - 1; //Get number of times to slide
    var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
    
    $(".paging_btrix a").removeClass('active'); //Remove all active class
    $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
    
    //Slider Animation
    $(".image_reel").animate({
    left: -image_reelPosition
    }, 500 );
    
    };
    
    //Rotation + Timing Event
    rotateSwitch = function(){
    play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
    $active = $('.paging_btrix a.active').next();
    if ( $active.length === 0) { //If paging_btrix reaches the end...
    $active = $('.paging_btrix a:first'); //go back to first
    }
    rotate(); //Trigger the paging_btrix and slider function
    }, 5000); //Timer speed in milliseconds (3 seconds)
    };
    
    rotateSwitch(); //Run function on launch
    
    //On Hover
    $(".image_reel a").hover(function() {
    clearInterval(play); //Stop the rotation
    }, function() {
    rotateSwitch(); //Resume rotation
    });
    
    //On Click
    $(".paging_btrix a").click(function() {
    $active = $(this); //Activate the clicked paging_btrix
    //Reset Timer
    clearInterval(play); //Stop the rotation
    rotate(); //Trigger rotation immediately
    rotateSwitch(); // Resume rotation
    return false; //Prevent browser jump to link anchor
    });
    
    });
    </script>
    Mong nhận được sự giúp đỡ của mọi người. Mình xin cảm ơn trước!

    Untitled
     
  3. RuChi

    RuChi New Member

    Bài viết:
    32
    Likes :
    9
    UP, chờ cao nhân :)
     
comments powered by Disqus

Chia sẻ trang này

Đang tải...