jquery - Nivo slider enlarging images issue -

-


while using nivo slider enlarges images 2x original size results in horrible looking pictures. wondering if way fix this. image sizes 367 x 246 px.

here screen of happens: enter image description here

here html erb:

<div class="slider-wrapper up-nivo">   <div id="slider" class="nivoslider">     <%= image_tag "logo.jpg", alt: "" %>     <%= image_tag "line.jpg", alt: "" %>     <%= image_tag "game.jpg", alt: "" %>     <%= image_tag "leaders.jpg", alt: "" %>     <%= image_tag "crowdfacingjim.jpg", alt: "" %>     <%= image_tag "band.jpg", alt: "" %>   </div> </div>

then here css:

.nivoslider {     position:relative;     width:100%;     height:auto;     overflow: hidden; } .nivoslider img {     position:absolute;     top:0px;     left:0px; } .nivo-main-image {     display: block !important;     position: relative !important;      width: 100% !important; }  /* if image wrapped in 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; } /* slices , boxes in 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 {     display:inline !important; } .nivo-html-caption {     display:none; } /* direction nav styles (e.g. next & prev) */ .nivo-directionnav {     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 {     text-align:center;     padding: 15px 0; } .nivo-controlnav {     cursor:pointer; } .nivo-controlnav a.active {     font-weight:bold; }

here css theme:

.up-nivo .nivoslider {     position:relative;     background:#fff url(loading.gif) no-repeat 50% 50%;     margin-bottom:50px;     -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;     -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;     box-shadow: 0px 1px 5px 0px #4a4a4a; } .up-nivo .nivoslider img {     position:absolute;     top:0px;     left:0px;     display:none; } .up-nivo .nivoslider {     border:0;     display:block; }  .up-nivo .nivo-controlnav {     text-align: right;     padding: 20px 0;     line-height: 0;     font-size: 0;     color: transparent;     margin-right: 2.5%;     margin-top: -5%; } .up-nivo .nivo-controlnav {     display:inline-block;     width:16px;     height:16px;     background:url(bulletfull.png) no-repeat;     text-indent:-9999px;     border:0;     margin: 0 2px; } .up-nivo .nivo-controlnav a.active {     background:url(bulletempty.png) no-repeat; }  .up-nivo .nivo-directionnav {     display:block;     height:80px;     width:75px;     text-indent:-9999px;     border:0; } .up-nivo a.nivo-nextnav {     background:url(arrowright.png) no-repeat;     background-position: 50% 50%;     right:15px; } .up-nivo a.nivo-prevnav {     background:url(arrowleft.png) no-repeat;     background-position: 50% 50%;     left:15px; }  .up-nivo .nivo-caption {     font-family: helvetica, arial, sans-serif; } .up-nivo .nivo-caption {     color:#fff;     border-bottom:1px dotted #fff; } .up-nivo .nivo-caption a:hover {     color:#fff; }  .up-nivo .nivo-controlnav.nivo-thumbs-enabled {     width: 100%; } .up-nivo .nivo-controlnav.nivo-thumbs-enabled {     width: auto;     height: auto;     background: none;     margin-bottom: 5px; } .up-nivoault .nivo-controlnav.nivo-thumbs-enabled img {     display: block;     width: 120px;     height: auto; }

here js start nivo:

$(window).load(function() {     return $("#slider").nivoslider({       pausetime: 10000,       directionnav: true     });   });

without seeing of code it's hard say. guessing recommend set width on container holding images via css. if doesn't work (and should newer versions of plugin) set width on images themselves.

edit: have .nivoslider inside slider-wrapper , up-nivo. since nivoslider set 100% width filling of container. set width on 1 of whatever need (367px perhaps more if there padding or margins in play).

you should set width , height of each of images... page render faster.


Comments

Post a Comment

Popular posts from this blog

c# - SVN Error : "svnadmin: E205000: Too many arguments" -

-
i trying reposotries using c# code process svncommand = null; var psi = new processstartinfo("svnadmin"); psi.redirectstandardoutput = true; psi.redirectstandarderror = true; psi.useshellexecute = false; psi.arguments= @"dump c:\repositories\myrepo > c:\temp\myrepodumpfile.dump"; using (svncommand = process.start(psi)) { var myoutput = svncommand.standardoutput; var myerror = svncommand.standarderror; debug.write("output :" + environment.newline + environment.newline + myoutput.readtoend() + environment.newline + "error :" + environment.newline + environment.newline + myerror.readtoend()); svncommand.close(); } when use dump command commandline svnadmin dump c:\repositories\myrepo > c:\temp\myrepodumpfile.dump it works fine when try ...
Read more

c# - Copy ObservableCollection to another ObservableCollection -

-
how copy observablecollection item observablecollection without reference of first collection? here observablecollection item value changes affecting both collections. code private observablecollection<ratemodel> _allmetalrate = new observablecollection<ratemodel>(); private observablecollection<ratemodel> _metalrateondate = new observablecollection<ratemodel>(); public observablecollection<ratemodel> allmetalrate { { return this._allmetalrate; } set { this._allmetalrate = value; notifypropertychanged("metalrate"); } } public observablecollection<ratemodel> metalrateondate { { return this._metalrateondate; } set { this._metalrateondate = value; notifypropertychanged("metalrateondate"); } } foreach (var item in metalrateondate) allmetalrate.add(item); what causing , how can solve it? you need clone object referenced item before it's a...
Read more

All overlapping substrings matching a java regex -

-
is there api method returns (possibly overlapping) substrings match regular expression? for example, have text string: string t = 04/31 412-555-1235; , , have pattern: pattern p = new pattern("\\d\\d+"); matches strings of 2 or more characters. the matches are: 04, 31, 412, 555, 1235. how overlapping matches? i want code return: 04, 31, 41, 412, 12, 55, 555, 55, 12, 123, 1235, 23, 235, 35. theoretically should possible -- there obvious o(n^2) algorithm enumerates , checks substrings against pattern. edit rather enumerating substrings, safer use region(int start, int end) method in matcher . checking pattern against separate, extracted substring might change result of match (e.g. if there non-capturing group or word boundary check @ start/end of pattern). edit 2 actually, it's unclear whether region() expect zero-width matches. specification vague, , experiments yield disappointing results. for example: string line = "xx90xx"; strin...
Read more