Nivo स्लाइडर jQuery प्लगइन - चित्रों को अपने आप आकार बदलने

Question

प्रश्न:

मेरी तस्वीरें तो उड़ा नहीं किया जा करने के लिए मैं कैसे कर सकते हैं? और मैं पूरी छवि क्यों नहीं देख सकता?

व्याख्या:

मैं अपने वेब पेज पर Nivo स्लाइडर jQuery प्लगइन रख दिया और यह बहुत अच्छा काम करता है! समस्या तब होती है जब मैं एक छवि डालता हूं, छवि सही आकार नहीं है। छवि धुंधली है और स्लाइडर पूरी छवि नहीं दिखा रहा है। मैंने सीएसएस को देखा और यह मेरे लिए ठीक लग रहा है। यहाँ मेरी एचटीएमएल कोड है:

 <div class="theme-bar slider-wrapper"> 
      <div id="slider" class="nivoSlider theme-bar"> 
       <a href="#"><img src="images/slide1.jpg" alt="" /></a> 
       <img src="images/slide2.jpg" alt="" /> 
       <img src="images/slide3.jpg" alt="" /> 
       <img src="images/slide4.jpg" alt="" /> 
      </div> 
     </div> 

यहाँ मेरी सीएसएस (मैं दो सीएसएस फ़ाइलें इस पृष्ठ से लिंक किया है nivo-slider.css और bar.css Nivo स्लाइडर के लिए विषय)।

nivo-slider.css:

.nivoSlider { 
    position:relative; 
    width:100%; 
    height:auto; 
    overflow: hidden; 
} 
.nivoSlider img { 
    position:absolute; 
    top:0px; 
    left:0px; 
    max-width: none; 
} 
.nivo-main-image { 
    display: block !important; 
    position: relative !important; 
    width: 100% !important; 
} 

/* If an image is wrapped in a link */ 
.nivoSlider a.nivo-imageLink { 
    position:absolute; 
    top:0px; 
    left:0px; 
    width:100%; 
    height:100%; 
    border:0; 
    padding:0; 
    margin:0; 
    z-index:6; 
    display:none; 
} 
/* The slices and boxes in the Slider */ 
.nivo-slice { 
    display:block; 
    position:absolute; 
    z-index:5; 
    height:100%; 
    top:0; 
} 
.nivo-box { 
    display:block; 
    position:absolute; 
    z-index:5; 
    overflow:hidden; 
} 
.nivo-box img { display:block; } 

/* Caption styles */ 
.nivo-caption { 
    position:absolute; 
    left:0px; 
    bottom:0px; 
    background:#000; 
    color:#fff; 
    width:100%; 
    z-index:8; 
    padding: 5px 10px; 
    opacity: 0.8; 
    overflow: hidden; 
    display: none; 
    -moz-opacity: 0.8; 
    filter:alpha(opacity=8); 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 
} 
.nivo-caption p { 
    padding:5px; 
    margin:0; 
} 
.nivo-caption a { 
    display:inline !important; 
} 
.nivo-html-caption { 
    display:none; 
} 
/* Direction nav styles (e.g. Next & Prev) */ 
.nivo-directionNav a { 
    position:absolute; 
    top:45%; 
    z-index:9; 
    cursor:pointer; 
} 
.nivo-prevNav { 
    left:0px; 
} 
.nivo-nextNav { 
    right:0px; 
} 
/* Control nav styles (e.g. 1,2,3...) */ 
.nivo-controlNav { 
    position: absolute; 
    left: 0; 
    bottom: -41px; 
    z-index: 10; 
    width: 100%; 
    height: 30px; 
    text-align: center; 
    padding: 5px 0; 
    border-top: 1px solid #333; 
    background: #333; 
    background: -moz-linear-gradient(top, #565656 0%, #333333 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#565656), color-stop(100%,#333333)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #565656 0%,#333333 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #565656 0%,#333333 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #565656 0%,#333333 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, #565656 0%,#333333 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#565656', endColorstr='#333333',GradientType=0); /* IE6-9 */ 
    opacity: 0.5; 
    -webkit-transition: all 200ms ease-in-out; 
    -moz-transition: all 200ms ease-in-out; 
    -o-transition: all 200ms ease-in-out; 
    transition: all 200ms ease-in-out; 
} 
.theme-bar .nivo-controlNav { 
    bottom: 0; 
    opacity: 1; 
} 
.nivo-controlNav a { 
    display:inline-block; 
    width:22px; 
    height:22px; 
    background:url(bullets.png) no-repeat; 
    text-indent:-9999px; 
    border:0; 
    margin: 5px 2px 0 2px; 
    cursor: pointer; 
} 
.nivo-controlNav a.active { 
    background-position:0 -22px; 
} 

यहाँ अन्य सीएसएस फ़ाइल है। bar.css:

.theme-bar.slider-wrapper { 
    position: relative; 
    border: 1px solid #333; 
    overflow: hidden; 
} 
.theme-bar .nivoSlider { 
    position:relative; 
    background:#fafafa url(loading.gif) no-repeat 50% 50%; 
} 
.theme-bar .nivoSlider img { 
    position:absolute; 
    top:0px; 
    left:0px; 
    display:none; 
} 
.theme-bar .nivoSlider a { 
    border:0; 
    display:block; 
} 

.theme-bar .nivo-controlNav { 
    position: absolute; 
    left: 0; 
    bottom: -41px; 
    z-index: 10; 
    width: 100%; 
    height: 30px; 
    text-align: center; 
    padding: 5px 0; 
    border-top: 1px solid #333; 
    background: #333; 
    background: -moz-linear-gradient(top, #565656 0%, #333333 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#565656), color-stop(100%,#333333)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #565656 0%,#333333 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #565656 0%,#333333 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #565656 0%,#333333 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, #565656 0%,#333333 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#565656', endColorstr='#333333',GradientType=0); /* IE6-9 */ 
    opacity: 0.5; 
    -webkit-transition: all 200ms ease-in-out; 
    -moz-transition: all 200ms ease-in-out; 
    -o-transition: all 200ms ease-in-out; 
    transition: all 200ms ease-in-out; 
} 
.theme-bar:hover .nivo-controlNav { 
    bottom: 0; 
    opacity: 1; 
} 
.theme-bar .nivo-controlNav a { 
    display:inline-block; 
    width:22px; 
    height:22px; 
    background:url(bullets.png) no-repeat; 
    text-indent:-9999px; 
    border:0; 
    margin: 5px 2px 0 2px; 
} 
.theme-bar .nivo-controlNav a.active { 
    background-position:0 -22px; 
} 

.theme-bar .nivo-directionNav a { 
    display:block; 
    border:0; 
    color: #fff; 
    text-transform: uppercase; 
    top: auto; 
    bottom: 10px; 
    z-index: 11; 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-size: 13px; 
    line-height: 20px; 
    opacity: 0.5; 
    -webkit-transition: all 200ms ease-in-out; 
    -moz-transition: all 200ms ease-in-out; 
    -o-transition: all 200ms ease-in-out; 
    transition: all 200ms ease-in-out; 
} 
.theme-bar a.nivo-nextNav { right: -50px; } 
.theme-bar a.nivo-prevNav { left: -50px; } 
.theme-bar:hover a.nivo-nextNav { 
    right: 15px; 
    opacity: 1; 
} 
.theme-bar:hover a.nivo-prevNav { 
    left: 15px; 
    opacity: 1; 
} 
.theme-bar .nivo-directionNav a:hover { color: #ddd; } 

.theme-bar .nivo-caption { 
    font-family: Helvetica, Arial, sans-serif; 
    -webkit-transition: all 200ms ease-in-out; 
    -moz-transition: all 200ms ease-in-out; 
    -o-transition: all 200ms ease-in-out; 
    transition: all 200ms ease-in-out; 
} 
.theme-bar:hover .nivo-caption { 
    bottom: 41px; 
} 
.theme-bar .nivo-caption a { 
    color:#fff; 
    border-bottom:1px dotted #fff; 
} 
.theme-bar .nivo-caption a:hover { 
    color:#fff; 
} 

.theme-bar .nivo-controlNav.nivo-thumbs-enabled { 
    width: 100%; 
} 
.theme-bar .nivo-controlNav.nivo-thumbs-enabled a { 
    width: auto; 
    height: auto; 
    background: none; 
    margin-bottom: 5px; 
} 
.theme-bar .nivo-controlNav.nivo-thumbs-enabled img { 
    display: block; 
    width: 120px; 
    height: auto; 
} 

यहाँ स्क्रिप्ट है कि मैं प्रयोग किया जाता है। यह डिफ़ॉल्ट स्क्रिप्ट है जो निवो स्लाइडर Jquery प्लगइन आता है, सिवाय इसके कि मैं सेटिंग्स के साथ थोड़ा गड़बड़ कर रहा हूं। मैं केवल आप स्क्रिप्ट है कि मैं संपादित क्योंकि मैं 30000 वर्णों तक सीमित कर रहा हूँ दिखाने जा रहा हूँ:

//Default settings 
    $.fn.nivoSlider.defaults = { 
     effect: 'fade', 
     slices: 15, 
     boxCols: 8, 
     boxRows: 4, 
     animSpeed: 550, 
     pauseTime: 3500, 
     startSlide: 0, 
     directionNav: false, 
     controlNav: true, 
     controlNavThumbs: false, 
     pauseOnHover: true, 
     manualAdvance: false, 
     prevText: 'Prev', 
     nextText: 'Next', 
     randomStart: false, 
     beforeChange: function(){}, 
     afterChange: function(){}, 
     slideshowEnd: function(){}, 
     lastSlide: function(){}, 
     afterLoad: function(){} 
    }; 

    $.fn._reverse = [].reverse; 

})(jQuery); 

फिर, समस्या सिर्फ इतना है कि छवि उड़ा लग है और आप इसे सभी को नहीं देख सकते हैं। मैंने छवि की सटीक चौड़ाई के लिए .nivoSlider कक्षा के लिए चौड़ाई निर्धारित करने का प्रयास किया, लेकिन यह अभी भी काम नहीं कर रहा है। अग्रिम में मदद के लिए धन्यवाद! और हाँ, मैं इस कोड के साथ Jquery को सक्रिय किया:

<script type="text/javascript"> 
$(window).load(function() { 
    $('#slider').nivoSlider(); 
}); 
</script> 

टिप्पणी: छवियों तरह से मैं उन्हें रखना चाहते हैं आकार रहे हैं। मुझे लगता है कि यह div जो स्लाइडर को लपेटता है, जिसमें समस्या है। मैं सिर्फ यह नहीं देख सकता कि छवियां इस तरह क्यों हैं। आम तौर पर निवो स्लाइडर छवि को फिट करने के लिए खुद का आकार बदलता है, लेकिन इसके बजाय मेरी छवि को आकार देने के लिए इसका आकार बदलता है।

Answer 1

आपको उपयोगकर्ता को भेजे जाने से पहले छवियों का आकार बदलना चाहिए। यदि छवियां पहले से ही सर्वर पर हैं तो आप शायद mogrify cammond from ImageMagik का उपयोग कर सकते हैं यदि यह एक लिनक्स सर्वर है।