2014-06-12 168 views
0

我正在學校項目的網站上工作,我正在使用名爲quantua的模板。如果您現場演示模板(http://www.templatesjoomla.net/index.php/joomla3-x/244-quantua-joomla-3-x.html),您可以看到在調整瀏覽器窗口大小時,圖像縮小得很多,以致出現黑色背景。我不希望它這樣做,如何在這個(http://www.websitetemplatesonline.com/free-template/progress-business.html)模板上實現調整大小?我玩了很多CSS,但我失敗了,所以我猜它必須用JavaScript?Joomla模板問題

繼承人的javascript代碼

(function($) { 
    var NivoSlider = function(element, options){ 
     // Defaults are below 
     var settings = $.extend({}, $.fn.nivoSlider.defaults, options); 

     // Useful variables. Play carefully. 
     var vars = { 
      currentSlide: 0, 
      currentImage: '', 
      totalSlides: 0, 
      running: false, 
      paused: false, 
      stop: false, 
      controlNavEl: false 
     }; 

     // Get this slider 
     var slider = $(element); 
     slider.data('nivo:vars', vars).addClass('nivoSlider'); 

     // Find our slider children 
     var kids = slider.children(); 
     kids.each(function() { 
      var child = $(this); 
      var link = ''; 
      if(!child.is('img')){ 
       if(child.is('a')){ 
        child.addClass('nivo-imageLink'); 
        link = child; 
       } 
       child = child.find('img:first'); 
      } 
      // Get img width & height 
      var childWidth = (childWidth === 0) ? child.attr('width') : child.width(), 
       childHeight = (childHeight === 0) ? child.attr('height') : child.height(); 

      if(link !== ''){ 
       link.css('display','none'); 
      } 
      child.css('display','none'); 
      vars.totalSlides++; 
     }); 

     // If randomStart 
     if(settings.randomStart){ 
      settings.startSlide = Math.floor(Math.random() * vars.totalSlides); 
     } 

     // Set startSlide 
     if(settings.startSlide > 0){ 
      if(settings.startSlide >= vars.totalSlides) { settings.startSlide = vars.totalSlides - 1; } 
      vars.currentSlide = settings.startSlide; 
     } 

     // Get initial image 
     if($(kids[vars.currentSlide]).is('img')){ 
      vars.currentImage = $(kids[vars.currentSlide]); 
     } else { 
      vars.currentImage = $(kids[vars.currentSlide]).find('img:first'); 
     } 

     // Show initial link 
     if($(kids[vars.currentSlide]).is('a')){ 
      $(kids[vars.currentSlide]).css('display','block'); 
     } 

     // Set first background 
     var sliderImg = $('<img class="nivo-main-image" src="#" />'); 
     sliderImg.attr('src', vars.currentImage.attr('src')).show(); 
     slider.append(sliderImg); 

     // Detect Window Resize 
     $(window).resize(function() { 
      slider.children('img').width(slider.width()); 
      sliderImg.attr('src', vars.currentImage.attr('src')); 
      sliderImg.stop().height('auto'); 
      $('.nivo-slice').remove(); 
      $('.nivo-box').remove(); 
     }); 

     //Create caption 
     slider.append($('<div class="nivo-caption"></div>')); 

     // Process caption function 
     var processCaption = function(settings){ 
      var nivoCaption = $('.nivo-caption', slider); 
      if(vars.currentImage.attr('title') != '' && vars.currentImage.attr('title') != undefined){ 
       var title = vars.currentImage.attr('title'); 
       if(title.substr(0,1) == '#') title = $(title).html(); 

       if(nivoCaption.css('display') == 'block'){ 
        setTimeout(function(){ 
         nivoCaption.html(title); 
        }, settings.animSpeed); 
       } else { 
        nivoCaption.html(title); 
        nivoCaption.stop().fadeIn(settings.animSpeed); 
       } 
      } else { 
       nivoCaption.stop().fadeOut(settings.animSpeed); 
      } 
     } 

     //Process initial caption 
     processCaption(settings); 

     // In the words of Super Mario "let's a go!" 
     var timer = 0; 
     if(!settings.manualAdvance && kids.length > 1){ 
      timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime); 
     } 

     // Add Direction nav 
     if(settings.directionNav){ 
      slider.append('<div class="nivo-directionNav"><a class="nivo-prevNav">'+ settings.prevText +'</a><a class="nivo-nextNav">'+ settings.nextText +'</a></div>'); 

      // Hide Direction nav 
      if(settings.directionNavHide){ 
       $('.nivo-directionNav', slider).hide(); 
       slider.hover(function(){ 
        $('.nivo-directionNav', slider).show(); 
       }, function(){ 
        $('.nivo-directionNav', slider).hide(); 
       }); 
      } 

      $('a.nivo-prevNav', slider).live('click', function(){ 
       if(vars.running) { return false; } 
       clearInterval(timer); 
       timer = ''; 
       vars.currentSlide -= 2; 
       nivoRun(slider, kids, settings, 'prev'); 
      }); 

      $('a.nivo-nextNav', slider).live('click', function(){ 
       if(vars.running) { return false; } 
       clearInterval(timer); 
       timer = ''; 
       nivoRun(slider, kids, settings, 'next'); 
      }); 
     } 

     // Add Control nav 
     if(settings.controlNav){ 
      vars.controlNavEl = $('<div class="nivo-controlNav"></div>'); 
      slider.after(vars.controlNavEl); 
      for(var i = 0; i < kids.length; i++){ 
       if(settings.controlNavThumbs){ 
        vars.controlNavEl.addClass('nivo-thumbs-enabled'); 
        var child = kids.eq(i); 
        if(!child.is('img')){ 
         child = child.find('img:first'); 
        } 
        if(child.attr('data-thumb')) vars.controlNavEl.append('<a class="nivo-control" rel="'+ i +'"><img src="'+ child.attr('data-thumb') +'" alt="" /></a>'); 
       } else { 
        vars.controlNavEl.append('<a class="nivo-control" rel="'+ i +'">'+ (i + 1) +'</a>'); 
       } 
      } 

      //Set initial active link 
      $('a:eq('+ vars.currentSlide +')', vars.controlNavEl).addClass('active'); 

      $('a', vars.controlNavEl).bind('click', function(){ 
       if(vars.running) return false; 
       if($(this).hasClass('active')) return false; 
       clearInterval(timer); 
       timer = ''; 
       sliderImg.attr('src', vars.currentImage.attr('src')); 
       vars.currentSlide = $(this).attr('rel') - 1; 
       nivoRun(slider, kids, settings, 'control'); 
      }); 
     } 

     //For pauseOnHover setting 
     if(settings.pauseOnHover){ 
      slider.hover(function(){ 
       vars.paused = true; 
       clearInterval(timer); 
       timer = ''; 
      }, function(){ 
       vars.paused = false; 
       // Restart the timer 
       if(timer === '' && !settings.manualAdvance){ 
        timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime); 
       } 
      }); 
     } 

     // Event when Animation finishes 
     slider.bind('nivo:animFinished', function(){ 
      sliderImg.attr('src', vars.currentImage.attr('src')); 
      vars.running = false; 
      // Hide child links 
      $(kids).each(function(){ 
       if($(this).is('a')){ 
        $(this).css('display','none'); 
       } 
      }); 
      // Show current link 
      if($(kids[vars.currentSlide]).is('a')){ 
       $(kids[vars.currentSlide]).css('display','block'); 
      } 
      // Restart the timer 
      if(timer === '' && !vars.paused && !settings.manualAdvance){ 
       timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime); 
      } 
      // Trigger the afterChange callback 
      settings.afterChange.call(this); 
     }); 

回答

0

您正在尋找在錯誤的地方。使用螢火蟲檢查並知道正在使用哪個css文件。該文件是default.css。行159.這就是你應該玩的東西。這就是它看起來像

.nivoSlider { 
float: left; 
position: relative; 
width: 100%; 
height: 480px; 
overflow: hidden; 
background: #000 

這是影響導航欄的演示文稿的代碼塊。但剷除黑暗那裏,你可以使用這種密切修復

  1. 變化nivoslider類的屬性高度自動上線159
  2. 改變導航類的從透明到黑線的研究背景屬性296
  3. 更改ID菜單類的就行285

的邊距屬性爲316px,這是不能保證不特別扭曲的最後一個點。但不斷嘗試。

+0

沒有做我想做的事。現在圖像變小了,但是已發佈的文章會出現在黑色中......如果我試圖更好地描述..如何讓幻燈片顯示不可調整大小? – stillan00b

+0

傳真:謝謝你的努力 – stillan00b