中心/作物圖片 - 使用Cycle2插件的自適應幻燈片

我正在製作一個在cycle2幻燈片中裁剪和居中圖像的解決方案。中心/作物圖片 - 使用Cycle2插件的自適應幻燈片

我正在使用this plugin調整圖像大小並將其放在幻燈片放映中。

問題我遇到的問題是，我在圖像過渡後將圖像居中，但這會導致每張幻燈片都「跳躍」到位。我似乎無法找到一種方法來集中所有幻燈片init和調整大小。

function cropSlideImage() { 
    $('.cycle-slideshow img').resizeToParent({parent: '.slide'}); 
} 

$(document).ready(function() { 
    cropSlideImage(); 

    $('.cycle-slideshow').on('cycle-update-view', function(event, optionHash, slideOptionsHash, currentSlideEl) { 
     cropSlideImage(); 
    }); 
});

來源

2014-01-16 hyperdrive

我建議使用的圖像作爲對.slide div的CSS背景圖像。然後，您可以使用背景大小：封面和背景位置：中心來很好地調整它們的大小。 – mgrahamjo

此網站需要訪問，所有圖片需要alt標籤。背景圖片不會工作。 – hyperdrive

如果圖像的父母都設置爲顯示resizeToParent插件將無法正常工作：無。由於resizeToParent插件等待要緩存的圖像，因此只有在大多數幻燈片已設置爲display：none之後，它纔會運行。

在運行resizeToParent之後，使用$（'。slideshow'）。cycle（）以編程方式啓動幻燈片，並且所有內容都可以按照需要運行。

function cropSlideImage() { 
    $('.slideshow img').resizeToParent(); 
} 

$(document).ready(function() { 
    cropSlideImage(); 
    $('.slideshow').cycle(); 
});

Fiddle!

來源

2014-01-16 20:57:32 ntdb

非常酷，這似乎工作，除了窗口調整大小。這很奇怪，因爲resizeToParent包含一個窗口大小調整事件。我試圖摧毀幻燈片，然後重新啓動，但這不起作用。 http://jsfiddle.net/mwHk4/4/ – hyperdrive

這實際上是有道理的。我認爲應該更新resizeToParent代碼以確保代碼運行時圖像的父母始終設置爲「display：block」。如果父母被隱藏，那麼沒有什麼可以將圖像放大。試試這個：http://jsfiddle.net/mwHk4/5/ – ntdb

中心/作物圖片 - 使用Cycle2插件的自適應幻燈片

回答

相關問題