javascript - Make Jquery image caption and images responsive -
i downloaded , applied jquery image caption slides on hover images no longer responsive , i've no idea why...
my css sets images have max-width of 100% believe somewhere js overriding it.
i did create jsfiddle couldn't work bit pointless using -although js there if @ may able see why images aren't being responsive.
code:
<div class="ic_container capslide_img_cont6"> <img src="img/1.jpg" alt=""/> <div class="overlay" style="display:none;"></div> <div class="ic_caption"> <p class="ic_category">category</p> <h3 class="intro">gallery</h3> <p class="ic_text"> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p class="ic_text"><a href="www.philips.co.uk" class="learn-more">learn more</a> </p> </div> </div> <script type="text/javascript"> $(function() { $(".capslide_img_cont6").capslide({ caption_color : 'black', caption_bgcolor : 'rgba(255,255,255, 0.6)', overlay_bgcolor : 'rgba(255,255,255, 0.3)', border : '0px solid #ccc', showcaption : true }); }); </script> css:
/* image rule */ img { border: 0; max-width: 100%; height: auto; width: auto\9; /* ie8 */ vertical-align:top; -webkit-box-shadow: 0px 1px 5px 0px rgba(50, 50, 50, 0.4); -moz-box-shadow: 0px 1px 5px 0px rgba(50, 50, 50, 0.4); box-shadow: 0px 1px 5px 0px rgba(50, 50, 50, 0.4); } .ic_container { vertical-align:baseline;; position:relative; /*-moz-border-radius:10px; -webkit-border-radius:10px; -khtml-border-radius:10px; -moz-box-shadow: 0 1px 3px #888; -webkit-box-shadow: 0 1px 3px #888;*/ } .overlay { background: rgba(255,255,255, 0.6); position:absolute; top:0px; bottom:0px; left:0px; right:0px; filter:progid:dximagetransform.microsoft.alpha(opacity=10); } .ic_caption { position:absolute; background: rgba(255,255,255, 0.6); overflow:hidden; margin:0px; padding:0px; left:0px; right:0px; cursor:default; filter:progid:dximagetransform.microsoft.alpha(opacity=80); margin-bottom: 1%; padding-bottom: 5px; } .ic_category { text-transform:uppercase; font-size:11px; letter-spacing:3px; padding:5px; margin:0px; } .ic_caption h3 { padding:0px 5px 5px 5px; margin:0px; font-size:18px; } .ic_text{ padding:5px; margin:0px; margin-bottom: 5px; text-align:left; font-size:1em; } a.learn-more { padding: 5px 10px; margin: 15px 0px 0px 0px; background: #062d84; } a.learn-more:hover { color: #062d84; background: #ffffff; } js:
(function($) { $.fn.capslide = function(options) { var opts = $.extend({}, $.fn.capslide.defaults, options); return this.each(function() { $this = $(this); var o = $.meta ? $.extend({}, opts, $this.data()) : opts; if(!o.showcaption) $this.find('.ic_caption').css('display','none'); else $this.find('.ic_text').css('display','none'); var _img = $this.find('img:first'); var w = _img.css('width'); var h = _img.css('height'); $('.ic_caption',$this).css({'color':o.caption_color,'background-color':o.caption_bgcolor,'bottom':'0px','width':w}); $('.overlay',$this).css('background-color',o.overlay_bgcolor); $this.css({'width':w , 'height':h, 'border':o.border}); $this.hover( function () { if((navigator.appversion).indexof('msie 7.0') > 0) $('.overlay',$(this)).show(); else $('.overlay',$(this)).fadein(); if(!o.showcaption) $(this).find('.ic_caption').slidedown(500); else $('.ic_text',$(this)).slidedown(500); }, function () { if((navigator.appversion).indexof('msie 7.0') > 0) $('.overlay',$(this)).hide(); else $('.overlay',$(this)).fadeout(); if(!o.showcaption) $(this).find('.ic_caption').slideup(200); else $('.ic_text',$(this)).slideup(200); } ); }); }; $.fn.capslide.defaults = { caption_color : 'white', caption_bgcolor : 'black', overlay_bgcolor : 'blue', border : '1px solid #fff', showcaption : true }; })(jquery); edit:
so after trying solves problem myself still no luck, i've discovered isn't images not responsive rather jquery adding inline styles , setting width , height 'ic_container capslide_img_cont6' classes... aaahhhhh
wooooop fixed problem myself - changed output 'width_%' , 'height_%'.
Comments
Post a Comment