Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: Beginner Web en 15 Enero 2019, 10:54 am


Título: slider
Publicado por: Beginner Web en 15 Enero 2019, 10:54 am
Hola,  tengo un slider en mi pagina web que al hacer click me actualiza la pagina, pero lo que yo quiero es que me abra una ventana nueva con ese link
Aca se modifica o en el CSS?
Código
  1. <!--[if IE]>
  2. <style type="text/css">
  3. .timer { display: none !important; }
  4. div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; }
  5. </style>
  6. <![endif]--> 
  7.  
  8. <script type='text/javascript'> 
  9. $(window).load(function() {
  10. $(&#38;#39;#featured&#38;#39;).orbit({
  11. advanceSpeed: 5000,
  12. &#38;#39;bullets&#38;#39;: true,
  13. &#38;#39;timer&#38;#39; : true,
  14. &#38;#39;animation&#38;#39; : &#38;#39;horizontal-slide&#38;#39;
  15. });
  16. });
  17. </script> 
  18.  
  19. <script type='text/javascript'> 
  20. //<![CDATA[
  21.  
  22.  
  23. (function(e){e.fn.orbit=function(a){a=e.extend({animation:"fade",animationSpeed:800,advanceSpeed:4E3,startClockOnMouseOut:true,startClockOnMouseOutAfter:3E3,directionalNav:true,captions:true,captionAnimationSpeed:800,timer:false,bullets:false},a);return this.each(function(){function m(c){function g(){f.eq(h).css({"z-index":1});s=false}var h=b,k=c;if(h==k)return false;if(!s){s=true;if(c=="next"){b++;if(b==n)b=0}else if(c=="prev"){b--;if(b<0)b=n-1}else{b=c;if(h<b)k="next";else if(h>b)k="prev"}a.bullets&&
  24. x();if(a.animation=="fade"){f.eq(h).css({"z-index":2});f.eq(b).css({opacity:0,"z-index":3}).animate({opacity:1},a.animationSpeed,g);a.captions&&o()}if(a.animation=="horizontal-slide"){f.eq(h).css({"z-index":2});k=="next"&&f.eq(b).css({left:t,"z-index":3}).animate({left:0},a.animationSpeed,g);k=="prev"&&f.eq(b).css({left:-t,"z-index":3}).animate({left:0},a.animationSpeed,g);a.captions&&o()}if(a.animation=="vertical-slide"){f.eq(h).css({"z-index":2});k=="prev"&&f.eq(b).css({top:u,"z-index":3}).animate({top:0},
  25. a.animationSpeed,g);k=="next"&&f.eq(b).css({top:-u,"z-index":3}).animate({top:0},a.animationSpeed,g);a.captions&&o()}}}var b=0,n=0,t,u,s,d=e(this).addClass("orbit"),f=d.find("img, a img");f.each(function(){var c=e(this),g=c.width();c=c.height();d.width(g);t=d.width();d.height(c);u=d.height();n++});f.eq(b).css({"z-index":3});if(a.timer){d.append('<div class="timer"><span class="mask"><span class="rotator"></span></span><span class="pause"></span></div>');var j=e("div.timer"),p;if(j.length!=0){var C=
  26. a.advanceSpeed/180,v=e("div.timer span.rotator"),y=e("div.timer span.mask"),z=e("div.timer span.pause"),l=0,A,w=function(){p=true;z.removeClass("active");A=setInterval(function(){var c="rotate("+l+"deg)";l+=2;v.css({"-webkit-transform":c,"-moz-transform":c,"-o-transform":c});if(l>180){v.addClass("move");y.addClass("move")}if(l>360){v.removeClass("move");y.removeClass("move");l=0;m("next")}},C)},q=function(){p=false;clearInterval(A);z.addClass("active")};w();j.click(function(){p?q():w()});if(a.startClockOnMouseOut){var B;
  27. d.mouseleave(function(){B=setTimeout(function(){p||w()},a.startClockOnMouseOutAfter)});d.mouseenter(function(){clearTimeout(B)})}}}if(a.captions){d.append('<div class="caption"><span class="orbit-caption"></span></div>');var r=d.children("div.caption").children("span").addClass("orbit-caption").show(),o=function(){var c=f.eq(b).attr("rel"),g=e("#"+c).html(),h=r.height()+20;r.attr("id","#"+c).html(g);g?r.parent().stop().animate({bottom:0},a.captionAnimationSpeed):r.parent().stop().animate({bottom:-h},
  28. a.captionAnimationSpeed)};o()}if(a.directionalNav){d.append('<div class="slider-nav"><span class="right">Right</span><span class="left">Left</span></div>');j=d.children("div.slider-nav").children("span.left");var D=d.children("div.slider-nav").children("span.right");j.click(function(){a.timer&&q();m("prev")});D.click(function(){a.timer&&q();m("next")})}if(a.bullets){d.append('<ul class="orbit-bullets"></ul>');var E=e("ul.orbit-bullets");for(i=0;i<n;i++){j=e("<li>"+i+"</li>");e("ul.orbit-bullets").append(j);
  29. j.data("index",i);j.click(function(){a.timer&&q();m(e(this).data("index"))})}var x=function(){E.children("li").removeClass("active").eq(b).addClass("active")};x()}})}})(jQuery);
  30. //]]>
  31. </script>
  32.  


Código
  1. #featured {height: 1px; width: 1px; overflow: hidden;}
  2. div.orbit {
  3. width: 1px;
  4. height: 1px;
  5. position: relative;
  6. overflow: hidden;
  7. }
  8.  
  9. div.orbit img {
  10. position: absolute;
  11. top: 0;
  12. left: 0;
  13. }
  14. div.orbit a img {border: none;}
  15.  
  16. div.timer {
  17. width: 40px;
  18. height: 40px;
  19. overflow: hidden;
  20. position: absolute;
  21. top: 10px;
  22. right:10px;
  23. opacity: .6;
  24. cursor: pointer;
  25. z-index: 1001;
  26. }
  27.  
  28. span.rotator {
  29. display: block;
  30. width: 40px;
  31. height: 40px;
  32. position: absolute;
  33. top: 0;
  34. left: -20px;
  35. background: url(http://4.bp.blogspot.com/_dsEG33PDaHw/TMHhPl2pVcI/AAAAAAAAAas/O7A5Aa7ZMhs/s1600/rotator-black.png);
  36. background-repeat: no-repeat;
  37. z-index: 3;
  38. }
  39.  
  40. span.mask {
  41. display: block;
  42. width: 20px;
  43. height: 40px;
  44. position: absolute;
  45. top: 0;
  46. right: 0;
  47. z-index: 2;
  48. overflow: hidden;
  49. }
  50.  
  51. span.rotator.move {left: 0;}
  52. span.mask.move {
  53. width: 40px;
  54. left: 0;
  55. background: url(http://2.bp.blogspot.com/_dsEG33PDaHw/TMHhQItQqeI/AAAAAAAAAaw/afLXhP0yQI8/s1600/timer-black.png);
  56. background-repeat: repeat;
  57. background-position: 0px 0px;
  58. }
  59.  
  60. span.pause {
  61. display: block;
  62. width: 40px;
  63. height: 40px;
  64. position: absolute;
  65. top: 0;
  66. left: 0px;
  67. background-image: url(http://3.bp.blogspot.com/_dsEG33PDaHw/TMHhPCHG1JI/AAAAAAAAAak/EiGTzJCfL1c/s1600/pause-black.png);
  68. background-repeat: no-repeat;
  69. z-index: 4;
  70. opacity: 0;
  71. }
  72.  
  73. div.timer:hover span.pause,
  74. span.pause.active, 
  75. div.timer:hover span.pause.active { opacity: 1; }
  76.  
  77. div.caption {
  78. background: #000;
  79. background: rgba(0,0,0,.6);
  80. width: 100%;
  81. z-index: 1000;
  82. position: absolute;
  83. bottom:-100px;
  84. color: #fff;
  85. padding: 8px 0;
  86. text-align: center;
  87. }
  88.  
  89. div.caption span {
  90. padding: 0 10px;
  91. font-size: 14px;
  92. text-shadow: 0px 1px 0px rgba(0,0,0,.8);
  93. margin: 0;
  94. }
  95. .orbit-caption { display: none; }
  96.  
  97. div.orbit:hover div.slider-nav { display: block; }
  98. div.slider-nav { display: none; }
  99. div.slider-nav span {
  100. width: 33px;
  101. height: 33px;
  102. text-indent: -9999px;
  103. position: absolute;
  104. z-index: 1000;
  105. top: 43%;
  106. cursor: pointer;
  107. }
  108.  
  109. div.slider-nav span.right {
  110. background-image: url(http://3.bp.blogspot.com/_dsEG33PDaHw/TMHhPefIDjI/AAAAAAAAAao/Gyy0k0F5Hzw/s1600/right-arrow.png);
  111. right: 10px;
  112. }
  113. div.slider-nav span.left {
  114. background-image: url(http://3.bp.blogspot.com/_dsEG33PDaHw/TMHhNd07EPI/AAAAAAAAAaY/_k9SqP88gV8/s1600/left-arrow.png);
  115. left: 10px;
  116. }
  117.  
  118. .orbit-bullets {
  119. position: absolute;
  120. z-index: 1000;
  121. list-style: none;
  122. top: 10px;
  123. left: 7px;
  124. margin: 0;
  125. padding: 0;
  126. }
  127.  
  128. .orbit-bullets li {
  129. float: left;
  130. margin-left: 5px;
  131. cursor: pointer;
  132. color: #999;
  133. text-indent: -9999px;
  134. background-image: url(http://4.bp.blogspot.com/_dsEG33PDaHw/TMHhLtWyUXI/AAAAAAAAAaU/8MQ8LP5flS8/s1600/bullets.png);
  135. background-repeat: no-repeat;
  136. background-position: 0 0;
  137. width: 7px;
  138. height: 7px;
  139. overflow: hidden;
  140. }

Título: Re: slider
Publicado por: #!drvy en 15 Enero 2019, 14:23 pm
Por lo que veo en el JS que has puesto, usas un slider llamado "Orbit".. que mantiene todo el contenido dentro de un elemento con ID #featured y los enlaces son simples anchors (<a>).

Código
  1. <a href='Link URL'><img rel='photo1' src="image URL" style='height: 348px; width: 590px;'/></a>

Si tienes algo tipo eso, lo único que hace falta es que añadas un target al anchor.

Código
  1. <a href='Link URL' target="_blank"><img rel='photo1' src="image URL" style='height: 348px; width: 590px;'/></a>


https://www.w3schools.com/tags/att_a_target.asp


Saludos


Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines