html - Link to a different <li> on another page goes only to the first item on list -
is possible link <li> on page?
i have slider made list of images , link specific image of slider.
i had tryed anchors on <li>. problem links goes first picture , not others anchors pic2 or pic3. guess i'm doing wrong.
thanks
<body> <div><a href="https://dl.dropboxusercontent.com/u/74509233/temp/untitled-2.html#pic1">link1</a></div> <div><a href="https://dl.dropboxusercontent.com/u/74509233/temp/untitled-2.html#pic2">link2</a></div> <div><a href="https://dl.dropboxusercontent.com/u/74509233/temp/untitled-2.html#pic3">link3</a></div> </body>$(function () { // slideshow 1 $("#slider1").responsiveslides({ auto: false, pager: true, nav: true, speed: 500, maxwidth: 900, namespace: "centered-btns" }); }); (function(c,i,b){c.fn.responsiveslides=function(l){var a=c.extend({auto:!0,speed:500,timeout:4e3,pager:!1,nav:!1,random:!1,pause:!1,pausecontrols:!0,prevtext:"previous",nexttext:"next",maxwidth:"",navcontainer:"",manualcontrols:"",namespace:"rslides",before:c.noop,after:c.noop},l);return this.each(function(){b++;var f=c(this),s,r,t,m,p,q,n=0,e=f.children(),c=e.size(),h=parsefloat(a.speed),d=parsefloat(a.timeout),u=parsefloat(a.maxwidth),g=a.namespace,d=g+b,e=g+"_nav "+d+"_nav",v=g+"_here",j=d+"_on", w=d+"_s",k=c("<ul class='"+g+"_tabs "+d+"_tabs' />"),x={"float":"left",position:"relative",opacity:1,zindex:2},y={"float":"none",position:"absolute",opacity:0,zindex:1},f=function(){var b=(document.body||document.documentelement).style,a="transition";if("string"===typeof b[a])return!0;s=["moz","webkit","khtml","o","ms"];var a=a.charat(0).touppercase()+a.substr(1),c;for(c=0;c<s.length;c++)if("string"===typeof b[s[c]+a])return!0;return!1}(),z=function(b){a.before(b);f?(e.removeclass(j).css(y).eq(b).addclass(j).css(x), n=b,settimeout(function(){a.after(b)},h)):e.stop().fadeout(h,function(){c(this).removeclass(j).css(y).css("opacity",1)}).eq(b).fadein(h,function(){c(this).addclass(j).css(x);a.after(b);n=b})};a.random&&(e.sort(function(){return math.round(math.random())-0.5}),f.empty().append(e));e.each(function(a){this.id=w+a});f.addclass(g+" "+d);l&&l.maxwidth&&f.css("max-width",u);e.hide().css(y).eq(0).addclass(j).css(x).show();f&&e.show().css({"-webkit-transition":"opacity "+h+"ms ease-in-out","-moz-transition":"opacity "+ h+"ms ease-in-out","-o-transition":"opacity "+h+"ms ease-in-out",transition:"opacity "+h+"ms ease-in-out"});if(1<e.size()){if(d<h+100)return;if(a.pager&&!a.manualcontrols){var a=[];e.each(function(a){a+=1;a+="<li><a href='#' class='"+w+a+"'>"+a+"</a></li>"});k.append(a);l.navcontainer?c(a.navcontainer).append(k):f.after(k)}a.manualcontrols&&(k=c(a.manualcontrols),k.addclass(g+"_tabs "+d+"_tabs"));(a.pager||a.manualcontrols)&&k.find("li").each(function(a){c(this).addclass(w+(a+1))});if(a.pager||a.manualcontrols)q= k.find("a"),r=function(a){q.closest("li").removeclass(v).eq(a).addclass(v)};a.auto&&(t=function(){p=setinterval(function(){e.stop(!0,!0);var b=n+1<c?n+1:0;(a.pager||a.manualcontrols)&&r(b);z(b)},d)},t());m=function(){a.auto&&(clearinterval(p),t())};a.pause&&f.hover(function(){clearinterval(p)},function(){m()});if(a.pager||a.manualcontrols)q.bind("click",function(b){b.preventdefault();a.pausecontrols||m();b=q.index(this);n===b||c("."+j).queue("fx").length||(r(b),z(b))}).eq(0).closest("li").addclass(v), a.pausecontrols&&q.hover(function(){clearinterval(p)},function(){m()});if(a.nav){g="<a href='#' class='"+e+" prev'>"+a.prevtext+"</a><a href='#' class='"+e+" next'>"+a.nexttext+"</a>";l.navcontainer?c(a.navcontainer).append(g):f.after(g);var d=c("."+d+"_nav"),g=d.filter(".prev");d.bind("click",function(b){b.preventdefault();b=c("."+j);if(!b.queue("fx").length){var d=e.index(b);b=d-1;d=d+1<c?n+1:0;z(c(this)[0]===g[0]?b:d);if(a.pager||a.manualcontrols)r(c(this)[0]===g[0]?b:d);a.pausecontrols||m()}}); a.pausecontrols&&d.hover(function(){clearinterval(p)},function(){m()})}}if("undefined"===typeof document.body.style.maxwidth&&l.maxwidth){var h=function(){f.css("width","100%");f.width()>u&&f.css("width",u)};h();c(i).bind("resize",function(){h()})}})}})(jquery,this,0);html, body, div, ul { background: transparent; border: 0; margin: 0; padding: 0; vertical-align: top; list-style:none; list-style-type: none; } .rslides { margin: 0 auto; position: relative; list-style: none; overflow: hidden; width: 100%; padding: 0; margin: 0; } .rslides_container { /*margin-bottom: 50px;*/ position: relative; float: left; width: 100%; } .centered-btns_nav { z-index: 3; position: absolute; -webkit-tap-highlight-color: rgba(0,0,0,0); top: 30px; right: 95px; opacity: 1.0; text-indent: -9999px; overflow: hidden; text-decoration: none; height: 40px; width: 40px; background-image:url(https://dl.dropboxusercontent.com/u/74509233/temp/bf.gif); background-size:cover; } .centered-btns_nav:active { opacity: 0; } .centered-btns_nav.next { left: auto; background-position: right top; right: 50px; } .rslides li { -webkit-backface-visibility: hidden; position: absolute; display: none; width: 100%; left: 0; top: 0; } .rslides li:first-child { position: relative; display: block; float: left; } .rslides img { display: block; height: auto; float: left; width: 100%; border: 0; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="rslides_container"> <ul class="rslides" id="slider1"> <li id="pic1"><img src="https://dl.dropboxusercontent.com/u/74509233/temp/pic1.jpg" alt="pic1"></li> <li id="pic2"><img src="https://dl.dropboxusercontent.com/u/74509233/temp/pic2.jpg" alt="pic2"></li> <li id="pic3"><img src="https://dl.dropboxusercontent.com/u/74509233/temp/pic3.jpg" alt="pic3"></li> </ul> </div>
with achor can target elements id e.g. #mycustli on current or page, append target url.
example:
on 1 page:
<a href="www.example.com/page2#mycustli" title="">go awesome li</a> on target page:
<li id="mycustli">there are. @ astonishing element.</li> 
Comments
Post a Comment