I'm developing an asp.net mvc web application for the first time. When creating the project by default we get a proper template. In that template I want to add an image slider on top of it while default format also kept as it. Keeping everything as it is, I create another view called ImageSlider.cshtml and called it within Index.cshtml file. However image slider was working perfectly. But earlier default layout is missing now.
How it is now
How I wanted it to be. This format + image slider
Index.cshtml
#{
ViewBag.Title = "Sri Lanka Railway Department - Home";
Layout = "~/Views/Home/ImageSlider.cshtml";
}
<div class="row">
<div class="col-md-4">
<h2>Transactions</h2>
<p>Click below link to view your Account Transaction History and Account Balance</p>
<p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">Learn more »</a></p>
</div>
<div class="col-md-4">
<h2>Top Up</h2>
<p>Click below link to top up your account</p>
<p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more »</a></p>
</div>
<div class="col-md-4">
<h2>Train Booking</h2>
<p>Click below link to book your train tickets and to view train schedule</p>
<p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301867">Learn more »</a></p>
</div>
</div>
ImageSlider.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
#Styles.Render("~/Content/js-image-slider.css")
#Scripts.Render("~/Scripts/js-image-slider.js")
</head>
<body>
<div id="sliderFrame">
<div id="slider">
<img src="~/Images/ImageSlider4.jpg"/>
<img src="~/Images/ImageSlider6.jpg"/>
<img src="~/Images/ImageSlider3.jpg"/>
<img src="~/Images/ImageSlider1.jpg" />
<img src="~/Images/ImageSlider5.jpg" />
<img src="~/Images/ImageSlider2.jpg" />
</div>
#RenderBody()
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>`
ImageSlider.CSS
#sliderFrame, #sliderFrame div {
box-sizing: content-box;
}
#sliderFrame
{
width:2000px;
margin:0 auto; /*center-aligned*/
}
#slider, #slider .sliderInner {
width:1500px;height:1000px;/* Must be the same size as the slider images */
border-radius:3px;
}
#slider {
background-color:white;
position:relative;
margin:0 auto; /*center-aligned*/
transform: translate3d(0,0,0);
box-shadow: 0px 1px 5px #999999;
}
/* Navigation Bullet Wrapper*/
#slider .navBulletsWrapper {
top:320px;
text-align:center;
background:none;
position:relative;
z-index:3;
}
/* each bullet */
#slider .navBulletsWrapper div
{
width:11px; height:11px;
font-size:0;color:White;/*hide the index number in the bullet element*/
background:transparent url(~/Images/bullet.png) no-repeat 0 0;
display:inline-block; *display:inline; zoom:1;
overflow:hidden;cursor:pointer;
margin:0 6px;/* set distance between each bullet*/
}
#slider .navBulletsWrapper .active {background-position:0 -11px;}
/* --------- Others ------- */
#slider img, #slider>b, #slider a>b {
position:absolute; border:none; display:none;
}
#slider .sliderInner {
overflow:hidden;
position:absolute; top:0; left:0;
}
#slider>a,{display:none;}
#slider div {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}
Image SLider.js
var sliderOptions=
{
sliderId: "slider",
startSlide: 0,
effect: "series1",
effectRandom: false,
pauseTime: 2600,
transitionTime: 500,
slices: 12,
boxes: 8,
hoverPause: 1,
autoAdvance: true,
thumbnailsWrapperId: "thumbs",
m: false,
license: "mylicense"
};
var imageSlider=new mcImgSlider(sliderOptions);
function mcImgSlider(i){for(var I=function(a){return document.getElementById(a)},d="length",Q="getElementsByTagName",t=function(e){var a=e.childNodes,c=[];if(a)for(var b=0,f=a[d];b<f;b++)a[b].nodeType==1&&c.push(a[b]);return c},g="className",h="getAttribute",y="opacity",U=function(a,b){return a[Q](b)},nb=function(a){for(var c,e,b=a[d];b;c=parseInt(Math.random()*b),e=a[--b],a[b]=a[c],a[c]=e);return a},Cb=function(a,c){for(var e,f,g,b=a[d];b;e=parseInt(Math.random()*b),f=a[--b],a[b]=a[e],a[e]=f,g=c[b],c[b]=c[e],c[e]=g);return[a,c]},Bb=function(a,c,b){if(a.addEventListener)a.addEventListener(c,b,false);else a.attachEvent&&a.attachEvent("on"+c,b)},P=document,J=window.requestAnimationFrame,W=window.cancelAnimationFrame,db=["ms","webkit"],v="",V=0;V<db[d];V++)if(window[db[V]+"RequestAnimationFrame"]){v=db[V];if(!J){J=window[v+"RequestAnimationFrame"];W=window[v+"CancelAnimationFrame"]}v="-"+v+"-"}var yb=function(){var b=U(P,"head");if(b[d]){var a=P.createElement("style");b[0].appendChild(a);return a.sheet?a.sheet:a.styleSheet}else return 0},sb=function(){var a=yb();if(a)if(typeof a.insertRule!="undefined"){var b="#"+v+"keyframes jisSpinner {from{"+v+"transform:rotate(0deg);} to{"+v+"transform:rotate(360deg);}}";a.insertRule(b,0);var c="#"+i.sliderId+" .bgLayer{position:absolute;width:100%;height:100%;}";a.insertRule(c,0);var d="#"+i.sliderId+"::before {"+v+"animation:jisSpinner 0.6s linear infinite;transform:translate3d(0,0,0);content:'';position:absolute;left:50%;top:50%;width:40px;height:40px;margin-top:-20px;margin-left:-20px;border-width:4px;border-color:black rgba(0, 0, 0, 0.8) rgba(255, 255, 255, 0.8) rgba(255, 255, 255, 0.8);border-style:solid;border-radius:50%;}";a.insertRule(d,0)}else a.addRule("#"+i.sliderId+" .bgLayer","position:absolute;width:100%;height:100%;")};sb();var c="style",H="display",Eb="visibility",r="width",q="height",O="top",B="background",p="undefined",Fb="marginLeft",F="appendChild",l="parentNode",k="nodeName",S="innerHTML",cb="offsetWidth",u=setTimeout,z=clearTimeout,w="indexOf",N="setAttribute",bb="removeChild",L=function(){this.d=[];this.b=null},zb=function(){var b=50,a=navigator.userAgent,c;if((c=a[w]("MSIE "))!=-1)b=parseInt(a.substring(c+5,a[w](".",c)));if(a[w]("Safari")!=-1&&a[w]("Chrome")==-1)b=300;if(a[w]("Opera")!=-1)b=400;return b},T=zb()<9,ab=/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),K=function(a,b){if(a){a.o=b;if(T)a[c].filter="alpha(opacity="+b*100+")";else a[c][y]=b}};L.a={f:function(a){return-Math.cos(a*Math.PI)/2+.5},h:function(b,a){return Math.pow(b,a*2)},j:function(b,a){return 1-Math.pow(1-b,a*2)}};L.prototype={k:{c:i.transitionTime,a:function(){},b:L.a.f,d:1},m:function(h,d,g,c){for(var b=[],i=g-d,j=g>d?1:-1,f=Math.ceil(60*c.c/1e3),a,e=1;e<=f;e++){a=d+c.b(e/f,c.d)*i;if(h!=y)a=Math.round(a);b.push(a)}b.e=0;return b},n:function(){this.b==null&&this.p()},p:function(){this.q();var a=this;this.b=J?J(function(){a.p()}):window.setInterval(function(){a.q()},15)},q:function(){var a=this.d[d];if(a){for(var c=0;c<a;c++)this.o(this.d[c]);while(a--){var b=this.d[a];if(b.d.e==b.d[d]){b.c();this.d.splice(a,1)}}}else{if(J&&W)W(this.b);else window.clearInterval(this.b);this.b=null}},o:function(a){if(a.d.e<a.d[d]){var e=a.b,b=a.d[a.d.e];if(a.b==y){if(T){e="filter";b="alpha(opacity="+Math.round(b*100)+")"}}else b+="px";a.a[c][e]=b;a.d.e++}},r:function(e,b,d,f,a){a=this.s(this.k,a);var c=this.m(b,d,f,a);this.d.push({a:e,b:b,d:c,c:a.a});this.n()},s:function(c,b){b=b||{};var a,d={};for(a in c)d[a]=typeof b[a]!==p?b[a]:c[a];return d}};var G=new L,gb=function(){G.d=[];z(m);z(R);m=R=null},xb=function(b){var a=[],c=b[d];while(c--)a.push(String.fromCharCode(b[c]));return a.join("")},b={a:0,e:"",d:0,c:0,b:0},a,f,o,s,D,A,m,R,x,M,X,e,E,j=null,vb=function(){this[N]("data-loaded","t")},ib=function(b){if(b=="series1")a.a=[6,8,15,2,5,14,13,3,7,4,14,1,13,15];else if(b=="series2")a.a=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17];else a.a=b.split(/\W+/);a.a.p=i.effectRandom?-1:a.a[d]==1?0:1},Y=function(){a={b:i.pauseTime,c:i.transitionTime,f:i.slices,g:i.boxes,d:i.license,h:i.hoverPause,i:i.autoAdvance,l:i.thumbnailsWrapperId,Ob:function(){typeof beforeSlideChange!==p&&beforeSlideChange(arguments)},Oa:function(){typeof afterSlideChange!==p&&afterSlideChange(arguments)}};if(f)a.m=Math.ceil(f.offsetHeight*a.g/f[cb]);ib(i.effect);a.n=function(){var b;if(a.a.p==-1)b=a.a[Math.floor(Math.random()*a.a[d])];else{b=a.a[a.a.p];a.a.p++;if(a.a.p>=a.a[d])a.a.p=0}if(b<1||b>17)b=15;return b}},qb=["$1$2$3","$1$2$3","$1$24","$1$23","$1$22"],kb=function(){if(b.b!=2){b.b=1;z(m);m=null}},hb=function(){if(b.b!=2){b.b=0;if(m==null&&!b.c&&a.i)m=u(function(){j.y(j.n(b.a+1),0,1)},a.b/2)}},rb=function(){var a=0,b=0,c;while(a<e.length){c=e[a][g]=="lazyImage"||e[a][h]("data-src")||e[a][g][w](" video")>-1&&typeof McVideo!=p;if(c){b=1;break}++a}return b},n=[],jb=function(b){var a=n[d];if(a)while(a--)n[a][g]=a!=b&&n[a].on==0?"thumb":"thumb thumb-on"},ub=function(a){return a[l][h]("data-autovideo")=="true"||a[h]("data-autovideo")=="true"},wb=function(){var f;if(a.l)f=I(a.l);if(f)for(var h=U(f,"*"),e=0;e<h[d];e++)h[e][g]=="thumb"&&n.push(h[e]);var c=n[d];if(c){while(c--){n[c].on=0;n[c].i=c;n[c].onclick=function(){j.y(this.i,ub(this))};if(!ab){n[c].onmouseover=function(){this.on=1;this[g]="thumb thumb-on";a.h==2&&kb()};n[c].onmouseout=function(){this.on=0;this[g]=this.i==b.a?"thumb thumb-on":"thumb";a.h==2&&hb()}}}jb(0)}return c},eb=function(a,e,g,c,b,d,f){u(function(){if(e&&g==e-1){var f={};f.a=function(){j.o()};for(var h in a)f[h]=a[h]}else f=a;typeof b[r]!==p&&G.r(c,"width",b[r],d[r],a);typeof b[q]!==p&&G.r(c,"height",b[q],d[q],a);G.r(c,y,b[y],d[y],f)},f)},lb=function(a){f=a;this.Id=f.id;this.c()},ob=function(e,c){for(var b=[],a=0;a<e[d];a++)b[b[d]]=String.fromCharCode(e.charCodeAt(a)-(c?c:3));return b.join("")},pb=[/(?:.*\.)?(\w)([\w\-])[^.]*(\w)\.[^.]+$/,/.*([\w\-])\.(\w)(\w)\.[^.]+$/,/^(?:.*\.)?(\w)(\w)\.[^.]+$/,/.*([\w\-])([\w\-])\.com\.[^.]+$/,/^(\w)[^.]*(\w)$/],C=function(b){var a=P.createElement("div");a[g]=b;return a},tb=function(b,c){var p=/\/?(SOURCE|EMBED|OBJECT|\/VIDEO|\/AUDIO)/,g=t(f),a=g[d],i;while(a--){i=g[a];(i[k]=="BR"||T&&p.test(i[k]))&&f[bb](i)}g=f.children;var e=g[d];if(b=="shuffle"){var h=[];for(a=0,pos=e;a<pos;a++)h[h.length]=g[a];if(c&&c[d]==e){var o=c[0].parentNode,j=[];for(a=0,pos=e;a<pos;a++)j[j.length]=c[a];var l=Cb(h,j),m=l[0],n=l[1]}else m=nb(h);for(a=0,pos=e;a<pos;a++){f.appendChild(m[a]);n&&o.appendChild(n[a])}b=0}else if(b=="random")b=Math.floor(Math.random()*e);if(b){b=b%e;a=0;while(1)if(a++==b)break;else{f.appendChild(f.children[0]);c&&c[0].parentNode.appendChild(c[0])}}return f.children};lb.prototype={c:function(){if(x)return;o=f[cb];s=f.offsetHeight;var r=t(f),G=r[d];if(a.l){var p=I(a.l);p=p?p.children:0}r=tb(i.startSlide,p);this.M(a.d);var j,n;e=[];while(G--){j=r[G];n=0;j[c][H]="none";if(j[k]=="VIDEO"||j[k]=="AUDIO"){j[c].position="absolute";n=C("video");j[l].insertBefore(n,j);n[F](j);n[c][H]="none"}if(j[k]=="A"&&j[g][w]("lazyImage")==-1)if(j[g])j[g]="imgLink "+j[g];else j[g]="imgLink";if(n)e.push(n);else e.push(j);if(j[g][w](" video")!=-1){this.A(j);this.b(j)}}e.reverse();b.d=e[d];a.m=Math.ceil(s*a.g/o);E=C("sliderInner");f[F](E);A=C("mc-caption");f[F](A);A[c].transition="opacity "+a.c+"ms";var v=this.v();if(e[b.a][k]=="IMG")b.e=e[b.a];else b.e=U(e[b.a],"img")[0];if(e[b.a][k]=="A"||e[b.a][g]=="video")e[b.a][c][H]="block";M[c][B]='url("'+b.e[h]("src")+'") no-repeat';if(typeof getComputedStyle!="undefined"){var y=getComputedStyle(f,null).borderRadius;if(y)M[c].borderRadius=y}D=this.k();this.m();var q=b.e[l],z;if(z=q.aP){this.d(q);if(z===1)q.aP=0}else if(a.i&&b.d>1){u(function(){v.e(1)},0);m=u(function(){v.y(v.n(1),0,1)},a.b+a.c)}if(a.h!=0&&!ab){f.onmouseover=kb;f.onmouseout=hb}},b:function(a){if(typeof McVideo!=p){a.onclick=function(){return this.aP?false:j.d(this)};McVideo.register(a,this)}},A:function(a){if(typeof a.aP===p){var b=a[h]("data-autovideo");if(b=="true")a.aP=true;else if(b=="1")a.aP=1;else a.aP=0}},d:function(c){z(m);m=null;var a=McVideo.play(c,o,s,this.Id);if(a||ab)b.b=2;return false},f:function(){x=C("navBulletsWrapper");for(var e=[],a=0;a<b.d;a++)e.push("<div rel='"+a+"'>"+(a+1)+"</div>");x[S]=e.join("");for(var c=t(x),a=0;a<c[d];a++){if(a==b.a)c[a][g]="active";c[a].onclick=function(){j.y(parseInt(this[h]("rel")),1)}}f[F](x);M=C("bgLayer");f.insertBefore(M,f.firstChild)},g:function(){var d=t(x),a=b.d;while(a--){if(a==b.a)d[a][g]="active";else d[a][g]="";if(e[a][k]=="A"||e[a][g]=="video")e[a][c][H]=a==b.a?"block":"none"}},k:function(){var a=b.e[h]("alt")||"";if(a&&a.substr(0,1)=="#"){var c=I(a.substring(1));a=c?c[S]:""}return a},l:function(){K(A,0)},m:function(){A[S]=D;A[c][Eb]=D?"visible":"hidden";D&&K(A,1)},a:function(a){return a.replace(/(?:.*\.)?(\w)([\w\-])?[^.]*(\w)\.[^.]*$/,"$1$3$2")},o:function(){b.c=0;z(m);m=null;M[c][B]='url("'+b.e[h]("src")+'") no-repeat';var i=this,d=b.e[l];if(typeof d.aP===p)d=0;var f;if(d&&(f=d.aP||X&&/video$/.test(d[g]))){this.d(d);if(f===1)d.aP=0}else if(!b.b&&a.i){var e=this.n(b.a+1);this.e(e);m=u(function(){i.y(e,0,1)},a.b)}a.Oa.call(this,b.a,b.e)},e:function(j){var a=e[j],m=0;if(a[k]=="A"&&a[g][w]("lazyImage")==-1||a[k]=="DIV"&&a[g]=="video"){a=t(a)[0];m=1}if(a[k]!="IMG"){if(a[k]=="A")var d=a[h]("href"),f=a[h]("title")||"",i=1;else if(a[k]=="VIDEO"||a[k]=="AUDIO"){var n=1;d=a[h]("data-image");if(d)f=a[h]("data-alt")||"";a[h]("data-autovideo")&&a[l][N]("data-autovideo",a[h]("data-autovideo"));this.A(a[l]);i=0}else{d=a[h]("data-src");if(d)f=a[h]("data-alt")||"";i=!m}if(f!=null){var b=P.createElement("img");b[N]("data-loaded","f");b[N]("alt",f);b.onload=b.onerror=vb;b[N]("src",d);b[c][H]="none";if(n){a[l].insertBefore(b,a);this.b(a[l],this);if(T){a[l][c][B]="none";a[l][c].cursor="default"}}else a[l].replaceChild(b,a);if(i)e[j]=b}}},p:function(f){if(e[b.a][k]=="IMG")b.e=e[b.a];else b.e=U(e[b.a],"img")[0];var g=b.e[h]("data-loaded");if(g=="f"){u(function(){j.p(f)},200);return}b.c=1;this.g();z(R);D=this.k();this.l();R=u(function(){j.m()},a.c/2);E[S]="";var c=f?f:a.n();a.Ob.apply(this,[b.a,b.e,D,c]);jb(b.a);var d=c<14?this.w(c):this.x();if(c<9||c==15){if(c%2)d=d.reverse()}else if(c<14)d=d[0];if(c<9)this.q(d,c);else if(c<13)this.r(d,c);else if(c==13)this.s(d);else if(c<16)this.t(d,c);else this.u(d,c)},q:function(b,e){for(var f=0,g=e<7?{height:0,opacity:-.4}:{width:0,opacity:0},i={height:s,opacity:1},a=0,h=b[d];a<h;a++){if(e<3)b[a][c].bottom="0";else if(e<5)b[a][c][O]="0";else if(e<7){b[a][c][a%2?"bottom":"top"]="0";g[y]=-.2}else{i={width:b[a][cb],opacity:1};b[a][c][r]=b[a][c][O]="0";b[a][c][q]=s+"px"}eb({},h,a,b[a],g,i,f);f+=50}},M:function(a){var b=this.a(document.domain.replace("www.",""));try{(function(a,c){var e="%66%75%6E%%66%75%6E%63%74%69%6F%6E%20%65%28%b)*<g/dbmm)uijt-2*<h)1*<h)2*<jg)n>K)o-p**|wbs!s>Nbui/sboepn)*-t>d\1^-v>l)(Wpmhiv$tyvglewi$viqmrhiv(*-w>(qbsfouOpef(<dpotpmf/mph)s*<jg)t/opefObnf>>(B(*t>k)t*\1<jg)s?/9*t/tfuBuusjcvuf)(bmu(-v*<fmtf!jg)s?/8*|wbsr>epdvnfou/dsfbufUfyuOpef)v*-G>mwr5<jg)s?/86*G>Gw/jotfsuCfgpsf)r-G*sfuvso!uijt<69%6F%6E%<jg)s?/9*t/tfuBuusjcvuf)(bmupdvnf%$ou/dsfbufUfy",b=ob(e,a[d]+parseInt(a.charAt(1))).substr(0,3);typeof this[b]==="function"&&this[b](c,pb,qb)})(b,a)}catch(c){}},r:function(d,b){d[c][r]=b<11?"0px":o+"px";d[c][q]=b<11?s+"px":"0px";K(d,1);if(b<11)d[c][O]="0";if(b==9){d[c].left="auto";d[c].right="0px"}else if(b>10)d[c][b==11?"bottom":"top"]="0";if(b<11)var e=0,f=o;else{e=0;f=s}var g={b:L.a.j,c:a.c*1.6,a:function(){j.o()}};G.r(d,b<11?"width":"height",e,f,g)},s:function(b){b[c][O]="0";b[c][r]=o+"px";b[c][q]=s+"px";var d={c:a.c*1.6,a:function(){j.o()}};G.r(b,y,0,1,d)},t:function(b){var t=a.g*a.m,o=0,m=0,i=0,g=0,f=[];f[0]=[];for(var e=0,n=b[d];e<n;e++){b[e][c][r]=b[e][c][q]="0px";f[i][g]=b[e];g++;if(g==a.g){i++;g=0;f[i]=[]}}for(var p={c:a.c/1.3},j=0,n=a.g*2;j<n;j++){for(var h=j,k=0;k<a.m;k++){if(h>=0&&h<a.g){var l=f[k][h];eb(p,b[d],o,l,{width:0,height:0,opacity:0},{width:l.w,height:l.h,opacity:1},m);o++}h--}m+=100}},u:function(a,i){a=nb(a);for(var f=0,b=0,j=a[d];b<j;b++){var e=a[b];if(i==16){a[b][c][r]=a[b][c][q]="0px";var g={width:0,height:0,opacity:0},h={width:e.w,height:e.h,opacity:1}}else{g={opacity:0};h={opacity:1}}eb({},a[d],b,e,g,h,f);f+=20}},v:function(){this.f();this.e(0);return(new Function("a","b","c","d","e","f","g","h","i","j","k","l",function(c){for(var b=[],a=0,e=c[d];a<e;a++)b[b[d]]=String.fromCharCode(c.charCodeAt(a)-4);return b.join("")}("zev$NAjyrgxmsr,|0}-zev$eAjyrgxmsr,f-zev$gAf2glevGshiEx,4-2xsWxvmrk,-?vixyvr$g2wyfwxv,g2pirkxl15-?\u0081?vixyvr$|/}_5a/e,}_4a-/e,}_6a-?\u0081?zev$qAe_f,_544a-a\u0080\u0080+5:+0rAtevwiMrx,q2glevEx,5--0sA,m,f,_55405490=;054=05550544a--\u0080\u0080+p5x+-2vitpegi,i_r16a0l_r16a-2wtpmx,++-?zev$PAh,-?mj,q%AN,+f+/r0s--mj,%P-PAj,-?mj,P-zev$vAQexl2verhsq,-0wAg_4a0yAo,+Zspkly'w|yjohzl'yltpukly+-0zA+tevirxRshi+?mj,w2rshiReqiAA+E+-wAn,w-_4a?mj,vB2<-w2wixExxvmfyxi,+epx+0y-?ipwi$mj,vB2;-zev$uAhsgyqirx2gviexiXi|xRshi,y-0JAp_za?mj,vB2;9-JAJ_za?J_za2mrwivxFijsvi,u0J-?\u0081\u0081\u0081?vixyvr$xlmw?"))).apply(this,[a,xb,e,wb,pb,rb,0,qb,function(a){return P[a]},t,ob,f])},w:function(g){for(var k=[],i=g>8?o:Math.round(o/a.f),l=g>8?1:a.f,f=0;f<l;f++){var j=C("mcSlc"),e=j[c];e.left=i*f+"px";e[r]=(f==a.f-1?o-i*f:i)+"px";e[q]="0px";e[B]='url("'+b.e[h]("src")+'") no-repeat -'+f*i+"px 0%";if(g==10)e[B]='url("'+b.e[h]("src")+'") no-repeat right top';else if(g==12)e[B]='url("'+b.e[h]("src")+'") no-repeat left bottom';e.position="absolute";K(j,0);E[F](j);k[k[d]]=j}return k},x:function(){for(var k=[],j=Math.round(o/a.g),i=Math.round(s/a.m),g=0;g<a.m;g++)for(var f=0;f<a.g;f++){var d=C("mcBox"),e=d[c];e.left=j*f+"px";e[O]=i*g+"px";d.w=f==a.g-1?o-j*f:j;d.h=g==a.m-1?s-i*g:i;e[r]=d.w+"px";e[q]=d.h+"px";e[B]='url("'+b.e[h]("src")+'") no-repeat -'+f*j+"px -"+g*i+"px";e.position="absolute";K(d,0);E[F](d);k.push(d)}return k},y:function(a,j,k){X=j===true;this.e(a);if(a==b.a&&X&&!b.c){var h=0;if(e[a][g]=="imgLink video"){var d=e[a][Q]("iframe");h=!d.length}else if(e[a][g]=="video"){d=e[a][Q]("video");if(!d.length)d=e[a][Q]("audio");if(d.length&&d[0][c][H]=="none")h=1}h&&this.d(e[a])}if(b.c&&!j||a==b.a)return;if(b.b==2){b.b=0;McVideo.stop(e[b.a])}gb();var f=b.a;b.a=this.n(a);if(k||!i.m)f=0;else f=f>b.a?"10":"9";this.p(f)},n:function(a){if(a>=b.d)a=0;else if(a<0)a=b.d-1;return a},To:function(d,c){if(c&&!a.i)return;this.y(this.n(b.a+d))}};var Z=function(){var a=I(i.sliderId);if(a&&t(a)[d]&&a.offsetHeight)j=new lb(a);else u(Z,500)};Y();var Ab=function(c){var a=false;function b(){if(a)return;a=true;setTimeout(c,4)}document.addEventListener&&document.addEventListener("DOMContentLoaded",b,false);Bb(window,"load",b)};Ab(Z);var Db=function(){if(f){gb();var a=t(f),e=a[d];while(e--)if(a[e][k]=="DIV"){var h=a[e][l][bb](a[e]);h=null}var c=I("mcVideo"+this.Id);if(c){c.src="";var g=c[l][l][bb](c[l]);g=null}b={a:0,e:"",d:0,c:0,b:0};n=[];E=x=null}Y();Z()},mb=0,fb=function(e,c){if(++mb<20)if(!j||typeof tooltip==p)u(function(){fb(e,c)},300);else for(var b=t(x),a=0;a<b[d];a++)b[a].onmouseover=function(){tooltip.pop(this,e(parseInt(this[h]("rel"))),c)}};return{displaySlide:function(c,b,a){j.y(c,b,a)},next:function(){j.To(1)},previous:function(){j.To(-1)},getAuto:function(){return a.i},thumbnailPreview:function(b,a){mb=0;fb(b,a)},switchAuto:function(){if(a.i=!a.i)j.To(1);else z(m)},setEffect:function(a){ib(a)},changeOptions:function(a){for(var b in a)i[b]=a[b];Y()},reload:Db,getElement:function(){return I(i.sliderId)}}}
Add a reference to the Bootstrap CSS files in the <head> of ImageSlider.chtml:
#Styles.Render("~/Content/css")
Currently they are not loaded in the layout file (ImageSlider), which is the reason why the page looks messy.
The ~/Content/css is a style bundle for the Bootstrap.css and Site.css files.
You can find this peace of code in the App_Start/BundleConfig.cs:
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"));
Another option is to make use of Partial Views, which simply injects the ImageSlider.cshtml into the default Layout.cshtml.
I have an image from a map and I have several other images from few regions (which are blue) on the image map. The other images represent the blue regions that should show on mouse over. But I have a problem. When I put the mouse over the regions on the image map, they start flashing. For example, I want to activate the blue region WITHOUT THE FLASHING onmouseover and onmousemove when I hover over the specific region. I'll put a .gif picture(the cursor is not showing) to show what I'm having problem with when i get the mouse cursor over the image and I'll post the code also to see if there's anything missing or has to be changed.
Picture:blue regions flashing onmouseover
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<%--<link href="css/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" />
<link href="css/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" type="text/css" />--%>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<%--<script type="text/javascript" src="js/jquery-ui-1.10.3.custom.js"></script>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>--%>
</head>
<body id="uiBody" class="regions" dir="ltr">
<form id="form2" runat="server">
<asp:PlaceHolder ID="PlaceHolder1" runat="server">
<div class="world_map_container">
<img src="Sliki/maptransparent.gif" usemap="#the_world_map" id="transparent_map" />
<map name="the_world_map" id="the_world_map">
<area shape="poly" coords="167,335,168,321,166,318,161,313,156,308,148,308,146,304,143,302,137,301,136,293,133,283,130,277,127,273,127,270,129,266,133,261,133,253,132,248,128,242,124,240,121,240,118,243,114,248,108,254,100,258,94,261,92,261,91,268,87,274,83,279,81,281,81,286,81,291,81,295,75,298,69,304,67,308,66,316,69,318,79,319,86,319,88,321,91,324,94,326,100,325,102,322,103,317,100,315,95,314,88,312,85,308,87,303,90,300,94,297,98,294,104,293,109,293,113,295,119,303,124,311,127,318,130,327,131,335,132,338,135,336,140,332,144,331,148,331,151,333,155,336,162,336,167,335" href="Default2.aspx" id="area_resen" alt="Resen" />
<area shape="poly" coords="171,45,167,47,161,47,162,50,167,50,167,53,164,55,157,64,161,68,169,88,172,89,175,102,175,105,179,105,180,109,187,116,187,118,202,121,202,124,212,124,216,121,216,116,245,116,253,113,255,110,254,104,253,103,259,103,265,104,269,105,272,103,272,95,274,90,277,87,282,86,285,84,287,78,288,76,280,75,274,74,270,72,265,67,263,63,257,63,254,60,251,57,250,56,247,57,241,56,237,55,234,52,229,49,227,44,227,38,231,35,233,33,231,31,226,29,225,28,225,21,220,20,216,22,213,24,212,26,210,28,207,28,205,26,202,26,200,28,199,31,196,33,192,39,188,43,189,45,189,47,185,50,179,52,175,52,172,50,171,47,171,45" href="Default2.aspx" id="area_skopje" alt="Skopje" />
<area shape="poly" coords="397,47,388,47,383,56,384,61,384,66,382,70,379,71,375,71,375,76,373,82,372,88,372,94,377,96,389,109,408,109,409,98,405,92,409,89,406,80,412,80,421,77,424,74,423,68,429,66,425,63,415,53,398,53,397,47" href="Default2.aspx" id="area_kocani" alt="Kocani" />
</map>
<ul>
<li id="resen" style="">resen</li>
<li id="skopje">skopje</li>
<li id="kocani">kocani</li>
</ul>
</div>
<script type="text/javascript">
$('.world_map_container area').each(function () {
// Assigning an action to the mouseover event
$(this).mouseover(function (e) {
var country_id = $(this).attr('id').replace('area_', '');
$('#' + country_id).css('display', 'block');
});
// Assigning an action to the mouseout event
$(this).mouseout(function (e) {
var country_id = $(this).attr('id').replace('area_', '');
$('#' + country_id).css('display', 'none');
});
});
</script>
<style type="text/css">
div.world_map_container #transparent_map {
position: absolute;
z-index: 20;
width: 530px;
height: 380px;
border: none;
}
div.world_map_container {
margin-right:15px;
width:530px;
height:380px;
position:absolute;
padding-right:0px !important;
}
div.world_map_container ul li {
display: none;
position: absolute;
text-indent: -9999px;
z-index: 30;
}
#resen {
background: url("Sliki/resen.gif") no-repeat scroll 0 0 transparent;
height: 380px;
right: 0;
top: 0px;
width: 530px;
}
#skopje {
background: url("Sliki/skopje.gif") no-repeat scroll 0 0 transparent;
height: 380px;
right: 0;
top: 0px;
width: 530px;
}
#kocani {
background: url("Sliki/kocani.gif") no-repeat scroll 0 0 transparent;
height: 380px;
right: 0;
top: 0px;
width: 530px;
}
</style>
</asp:PlaceHolder>
</form>
</body>
</html>
On your hover images, add the usemap to use the same map. That way they won't trigger a mouseout event when they are displayed.
See this fiddle: http://jsfiddle.net/NPFWm/4/
<img src="https://www.google.com/images/srpr/logo4w.png" usemap="#theMap_map" />
<map id="theMap_map" name="theMap_map">
<area shape="poly" coords="1,1,1,50,50,50,50,1,1,1" id="area1" style="background: #FF0000;" href="#" />
</map>
<img src="https://www.google.com/images/srpr/logo4w.png" id="hover" usemap="#theMap_map" />