elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: (TUTORIAL) Aprende a emular Sentinel Dongle By Yapis


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  slider
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: slider  (Leído 1,168 veces)
Beginner Web


Desconectado Desconectado

Mensajes: 634


youtu.be/0YhflLRE-DA


Ver Perfil
slider
« 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. }


« Última modificación: 15 Enero 2019, 11:07 am por Beginner Web » En línea

7w7
#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.850



Ver Perfil WWW
Re: slider
« Respuesta #1 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


En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Control slider
Programación Visual Basic
Zeroql 0 1,302 Último mensaje 16 Marzo 2007, 21:56 pm
por Zeroql
Nivo Slider
Desarrollo Web
stratos.ares 0 2,866 Último mensaje 12 Febrero 2011, 04:37 am
por stratos.ares
slider 'avanzado'
Desarrollo Web
hkire 3 2,313 Último mensaje 7 Septiembre 2011, 18:42 pm
por raul338
Slider no se vé en Firefox
Desarrollo Web
ka0s 6 2,606 Último mensaje 13 Diciembre 2013, 03:54 am
por ka0s
slider de imagenes
Desarrollo Web
Robocop8 4 2,261 Último mensaje 9 Noviembre 2017, 03:50 am
por PalitroqueZ
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines