fancyBox: Abrir imágenes, páginas web y videos en ventanas tipo Popup con jQuery                                              6                         ene                     

                    

 Volvemos a la carga, y otra vez para presentaros una función jQuery desarrollada por Jānis Skarnelis. Se trata de fancyBox, un script con el que podemos abrir imágenes, páginas web, videos, etc. De forma muy elegante, en ventanas tipo Popup, con jQuery.

    Primeramente, bajamos fancyBox desde aquí o desde su página web oficial:

  • fancyBox-v2.0.4.zip

Una vez que lo tengáis descargado, lo primero que tenéis que hacer es incluir la función dentro de nuestro sitio web:

Incluimos los Javascript de jQuery y fancyBox y el CSS de fancyBox.

    Para hacerlo funcionar solo tenemos que especificarle un "id" o "class" a nuestros enlaces para después ejecutar fancyBox sobre ese "id" o "class".

    En este caso hemos utilizado el enlace con clase (class="ejemplo_1") sobre una imagen que vamos a ampliar. Mostramos la imagen en pequeño (foto1p.jpg) y obviamente vamos a ampliar la imagen (foto1.jpg) que fancyBox coge automáticamente del "href" del enlace:

Ahora vamos a ejecutar la función fancyBox sobre el enlace con este sencillo código:

$(do***ent).ready(function(){     $(".ejemplo_1").fancybox({ }); });

Recordaros que fancyBox es prácticamente 100% personalizable, en su web oficial encontrareis toda la do***entación necesaria para realizar cambios de aspeto, funcionamiento, etc. 

    En este otro ejemplo vamos a abrir una página web externa en HTML, primero preparamos el enlace:

Abrir página web externa - ejemplo.html

Como es lógico, la página que se abrirá dentro del fancyBox la coge del "href" del enlace.

Y aquí tenemos el código Javascript que abrirá la página web externa:

$(do***ent).ready(function(){     $(".ejemplo_4").fancybox({         ' autoScale'         : false,         ' transitionIn'         : ' none' ,         ' transitionOut'         : ' none' ,         ' width'             : 680,         ' height'         : 450,         ' type'             : ' iframe'     }); });

En el código le especificamos que es un "iframe", que el ancho de la ventana es 680 pixeles y la altura son 450 pixeles.

    Los parámetros que le hemos especificado son en Inglés, pero se entiende bastante bien para que sirven.

    Como os comentaba antes, recordar que es 100% personalizable y tenéis toda la do***entación en su web oficial.

    Aquí os dejamos unos ejemplos interactivos de su funcionamiento.

  • Ejemplo
                                                                  
                                                                 Comentarios                                 1 Comentario                                                                                           Categorías                                 Imágenes, jQuery                                                                                           Autor                                 admin                                                      
                                                                                                    Coin Slider: Transiciones espectaculares de imágenes en jQuery                                              2                         ene                     

                    

    Por lo general, la mayoría de los artículos se basan en funciones de jQuery, en los que explicamos su funcionamiento con ejemplos. Para que poco a poco vayáis creando vuestras propias funciones y vuestros propios Scripts en jQuery.

    En este caso, vamos a hacer una excepción, y os vamos a enseñar una función en jQuery desarrollada por Ivan Lazarevic, para realizar transiciones de imágenes con un resultado realmente espectacular.

    Podéis descargarlo de su web oficial, o bien desde aquí:

  • Descargar
  • workshop.rs

Una vez que lo tengáis descargado, lo primero que tenéis que hacer es incluir la función dentro de nuestro sitio web:

Incluimos los Javascript de jQuery y Coin Slider y el CSS de Coin Slider.

    Para hacerlo funcionar solo tenemos que meter todas las imágenes que queramos dentro de una tabla o una capa y especificarle un "id" para después ejecutar Coin Slider sobre ese "id".

    En este caso, hemos utilizado una capa con id (id="animacion"):

Y hemos incluido estas imágenes:

Aunque no es imprescindible, es mejor que las imágenes estén ocultas (style="display:none; ") y Coin Slider se encargará de mostrarlas.

    Y para terminar, tenéis que ejecutar la función Coin Slider sobre la capa:

$(do***ent).ready(function(){     $(' #animacion' ).coinslider(); });

Aquí tenéis un ejemplo básico de como funciona Coin Slider en jQuery:

  • Ejemplo
                                                                  
                                                                 Comentarios                                 0 Comentarios                                                                                           Categorías                                 Imágenes, jQuery                                                                                           Autor                                 admin                                                      
                                                                                                    Agregar / eliminar elementos dinámicamente en un campo select con jQuery                                              24                         dic                     

                                             

Últimamente estoy recibiendo muchos e-mails de gente con dudas agregando o eliminando elementos dinámicamente en un campo select con jQuery. Es prácticamente igual que como os enseñamos la semana pasada, con la función append() y la función remove()

    Os pongo un ejemplo:

$(' #campo_select_append' ).append(' Opción nueva 1' );

El el campo select con nombre / id "#campo_select_append" agregamos la opción con texto ("Opción nueva 1") y valor (value="opcion_nueva_1")

    Podemos personalizarlo como todo lo que queramos, como si fuera HTML. Como en este caso, que además lo hemos marcado como seleccionado (selected="selected")

    Ahora que ya sabemos como agregar opciones, vamos a ver como podemos eliminarlas.

    Para eliminarlas utilizaremos las funciones find() y remove() de jQuery.

    Con find() buscamos la opción que queremos eliminar, especificando su valor ("value=""), la seleccionamos y luego con find() la eliminamos.

    Os pongo un ejemplo:

$("#campo_select_remove").find("option[value=' opcion_1' ]").remove();

Buscamos dentro del select con nombre / id "#campo_select_remove" la opción con valor (value=' opcion_1' ) y lo eliminamos.

    Para terminar os dejamos unos ejemplos interactivos:

  • Ejemplos
                                                                  
                                                                 Comentarios                                 0 Comentarios                                                                                           Categorías                                 jQuery                                                                                           Autor                                 admin                                                      
                                                                                                    Eliminar elementos / contenidos con remove() en jQuery                                              15                         dic                     

                                             

El otro día os enseñábamos a añadir elementos y contenidos con jQuery con la función append() y prepend(), hoy vamos a hacer justamente lo contrario.

    Para eliminar elementos y contenidos podemos utilizar la función remove()

    En el siguiente ejemplo, borramos el elemento con la clase "elemento_1":

$(' .elemento_1' ).remove();

Es básicamente muy simple, solo tenemos que especificar la clase o el id que lo identifica de los demás:

$(' #elemento_1' ).remove();

En este caso lo haríamos con el "id" que lo identifica los demás.

    En el caso anterior de utilizar la clase, si algún elemento más tiene la misma clase, lógicamente borraríamos todos los elementos con esa clase.

    Aunque es muy simple, os añadimos unos ejemplos más:

  • Ejemplos
                                                                  
                                                                 Comentarios                                 0 Comentarios                                                                                           Categorías                                 jQuery                                                                                           Autor                                 admin                                                      
                                                                                                    Añadir elementos / contenidos con append() y prepend() en jQuery                                              1                         dic                     

                                             

Volvemos al trabajo, despues de un tiempo desaparecidos por aquí. Hoy os vamos a enseñar a añadir elementos o contenidos en jQuery con la función append() y prepend()

    La ventaja y/o utilidad de estas funciones es añadir contenidos en tiempo real, una vez que ya se ha cargado completamente nuestro sitio web.

    La función append() añade el contenido al final del elemento/capa que nosotros le especifiquemos.

    En cambio la función prepend() funciona exactamente igual, pero el contenido se añade al principio del elemento/capa que nosotros le especifiquemos. Ejemplo:

$(' .capa1' ).append("Actualidad jQuery");

En el ejemplo, añadimos el texto "Actualidad jQuery" dentro de la capa con la clase "capa1", al final.

    Al igual que hemos añadido un texto, podríamos añadir código HTML, una imagen, etc.

    Y la función prepend() funcionaría igual, como vemos en el ejemplo:

$(' .capa1' ).prepend("Actualidad jQuery");

Añadimos el texto "Actualidad jQuery" dentro de la capa con la clase "capa1", pero al principio.

    Para terminar de entenderlo mejor, aquí tenéis varios ejemplos interactivos con las 2 funciones.

  • Ejemplo
                                                                  
                                                                 Comentarios                                 0 Comentarios                                                                                           Categorías                                 jQuery                                                                                           Autor                                 admin                                                      
                                                                                                     Página 1 de 612345...»Última »                                                                           

Recientes

        
                    
  • fancyBox: Abrir imágenes, páginas web y videos en ventanas tipo Popup con jQuery
  •                 
  • Coin Slider: Transiciones espectaculares de imágenes en jQuery
  •                 
  • Agregar / eliminar elementos dinámicamente en un campo select con jQuery
  •                 
  • Eliminar elementos / contenidos con remove() en jQuery
  •                 
  • Añadir elementos / contenidos con append() y prepend() en jQuery
  •                 
        

Etiquetas

addClass ajax alert animate append() checked click Coin Slider confirm eventos fadeIn fadeOut fancyBox formularios getElementById getElementsByClassName getElementsByTagName input isNaN JavaScript jqTransform jQuery length Lightbox menu menus mouseenter mouseleave prepend() prompt remove() removeClass select selected Shadowbox slideDown slideUp submit

Comentarios

Jorge en Cargando contenido dinámico con la función ajax de jQueryDiego en fancyBox: Abrir imágenes, páginas web y videos en ventanas tipo Popup con jQueryEdwin en jQuery Alert Dialogs, substituto del alert(), confirm() y prompt() en jQueryruso en Cargando contenido dinámico con la función ajax de jQueryEsteban en Animación simple utilizando fadeIn y fadeOut de jQuery

Sitios de interés

    
  • Alojamiento web
  • Tazas ilustradas
  •     

    Síguenos en Facebook

                                                                                                                                                                                                                                           

    © 20*** Actualidad jQuery. All Rights Reserved.

                               dp.SyntaxHighlighter.ClipboardSwf = 'http://www.actualidadjquery.es/wp-content/plugins/google-syntax-highlighter/Scripts/clipboard.swf'; dp.SyntaxHighlighter.HighlightAll('code'); /*  */

    Heading Infomation & KeyWord Sentiment

    Heading TAG Description
    H1 Actualidad jQuery
    H2 fancyBox: Abrir imágenes, páginas web y videos en ventanas tipo Popup con jQuery
    H2 Coin Slider: Transiciones espectaculares de imágenes en jQuery
    H2 Agregar / eliminar elementos dinámicamente en un campo select con jQuery
    H2 Eliminar elementos / contenidos con remove() en jQuery
    H2 Añadir elementos / contenidos con append() y prepend() en jQuery
    H3 Recientes
    H3 Etiquetas
    H3 Comentarios
    H3 Sitios de interés
    H3 Síguenos en Facebook

    JavaScript Information

    
     <script type="text/javascript" src="http://www.actualidadjquery.es/wp-includes/js/jquery/jquery.js?ver=1.7.1"></script>
    
    


    actualidadjquery.es is using jquery
    
     <script type="text/javascript" src="http://www.actualidadjquery.es/wp-content/themes/bueno/includes/js/general.js?ver=3.3.1"></script>
    
    


    actualidadjquery.es is using jquery
    
     <script type="text/javascript" src="http://www.actualidadjquery.es/wp-content/themes/bueno/includes/js/superfish.js?ver=3.3.1"></script>
    
    


    actualidadjquery.es is using jquery
    
     <script type="text/javascript" src="http://www.actualidadjquery.es/wp-content/themes/bueno/includes/js/cufon.js?ver=3.3.1"></script>
    
    


    actualidadjquery.es is using jquery
    
     <script type="text/javascript" src="http://www.actualidadjquery.es/wp-content/themes/bueno/includes/js/League_Gothic.font.js?ver=3.3.1"></script>
    
    


    actualidadjquery.es is using jquery
    
     <script type="text/javascript" src="http://www.actualidadjquery.es/wp-content/themes/bueno/includes/js/ChunkFive.font.js?ver=3.3.1"></script>
    
    


    actualidadjquery.es is using jquery
    
     <script type="text/javascript" src="http://www.actualidadjquery.es/wp-content/plugins/google-analyticator/external-tracking.min.js?ver=6.2"></script>
    
    


    actualidadjquery.es is using jquery
    
     <script type="text/javascript" src="//connect.facebook.net/en_US/all.js"></script>
    
    

    
    <script type="text/javascript"> 
    
        var analyticsFileTypes = [''];
        var analyticsEventTracking 'enabled';
    
    </script>
    
    
    

    
    <script type="text/javascript"> 
    
        var _gaq _gaq || [];
        _gaq.push(['_setAccount''UA-19210075-1']);
        _gaq.push(['_trackPageview']);
        _gaq.push(['_trackPageLoadTime']);
        (function() {
    	        var ga = do***ent.createElement('script');
    	 ga.type 'text/javascript';
    	 ga.async true;
    	        ga.src = ('https:' == do***ent.location.protocol 'https://ssl' 'http://www') + '.google-analytics.com/ga.js';
    	        var = do***ent.getElementsByTagName('script')[0];
    	 s.parentNode.insertBefore(gas);
    	    })();
    
    </script>
    
    
    

    
    <script type="text/javascript"> 
    
        Cufon.replace('h1, h2, h3, .site-title', { fontFamily'ChunkFive'
    	});
    
    </script>
    
    
    

    
    <script type="text/javascript"> 
    <!--
    google_ad_client "pub-5449576255498284";
    /* 468x60, creado 29/10/10 */
    google_ad_slot "0995056358";
    google_ad_width 468;
    google_ad_height 60;
    //-->
    
    </script>
    
    
    

    
     <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
    
    

    
    <script type="text/javascript"> 
    
    
    </script>
    
    
    

    
     <script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
    
    


    actualidadjquery.es is using jquery
    
     <script type="text/javascript" src="../js/jquery.fancybox.pack.js"></script>
    
    


    actualidadjquery.es is using jquery
    
    <script type="text/javascript"> 
    
    $(do***ent).ready(function(){
    	    $(".ejemplo_1").fancybox({
    		});
    	});
    
    </script>
    
    
    

    
    <script type="text/javascript"> 
    
    $(do***ent).ready(function(){
    	    $(".ejemplo_4").fancybox({
    		        &#39;
    		autoScale&#39;
    		        false,
    		        &#39;
    		transitionIn&#39;
    		        : &#39;
    		none&#39;
    		,
    		        &#39;
    		transitionOut&#39;
    		        : &#39;
    		none&#39;
    		,
    		        &#39;
    		width&#39;
    		            680,
    		        &#39;
    		height&#39;
    		        450,
    		        &#39;
    		type&#39;
    		            : &#39;
    		iframe&#39;
    		    });
    	});
    
    </script>
    
    
    

    
    <script type="text/javascript"> 
    <!--
    google_ad_client "pub-5449576255498284";
    /* 468x60, creado 29/10/10 */
    google_ad_slot "0995056358";
    google_ad_width 468;
    google_ad_height 60;
    //-->
    
    </script>
    
    
    

    
     <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
    
    

    
    <script type="text/javascript"> 
    
    
    </script>
    
    
    

    
     <script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
    
    


    actualidadjquery.es is using jquery
    
     <script type="text/javascript" src="../js/coin-slider.min.js"></script>
    
    

    
    <script type="text/javascript"> 
    
    $(do***ent).ready(function(){
    	    $(&#39;
    	#animacion&#39;
    	).coinslider();
    	});
    
    </script>
    
    
    

    
    <script type="text/javascript"> 
    <!--
    google_ad_client "pub-5449576255498284";
    /* 300x250, creado 28/10/10 */
    google_ad_slot "5638068760";
    google_ad_width 300;
    google_ad_height 250;
    //-->
    
    </script>
    
    
    

    
     <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
    
    

    
    <script type="text/javascript"> 
    
    
    </script>
    
    
    

    
     <script type="text/javascript" src="http://www.actualidadjquery.es/wp-content/plugins/google-syntax-highlighter/Scripts/shCore.js"></script>
    
    


    actualidadjquery.es is using jquery
    
     <script type="text/javascript" src="http://www.actualidadjquery.es/wp-content/plugins/google-syntax-highlighter/Scripts/shBrushCSharp.js"></script>
    
    


    actualidadjquery.es is using jquery
    
     <script type="text/javascript" src="http://www.actualidadjquery.es/wp-content/plugins/google-syntax-highlighter/Scripts/shBrushPhp.js"></script>
    
    


    actualidadjquery.es is using jquery
    
     <script type="text/javascript" src="http://www.actualidadjquery.es/wp-content/plugins/google-syntax-highlighter/Scripts/shBrushJScript.js"></script>
    
    


    actualidadjquery.es is using jquery
    
     <script type="text/javascript" src="http://www.actualidadjquery.es/wp-content/plugins/google-syntax-highlighter/Scripts/shBrushJava.js"></script>
    
    


    actualidadjquery.es is using jquery
    
     <script type="text/javascript" src="http://www.actualidadjquery.es/wp-content/plugins/google-syntax-highlighter/Scripts/shBrushVb.js"></script>
    
    


    actualidadjquery.es is using jquery
    
     <script type="text/javascript" src="http://www.actualidadjquery.es/wp-content/plugins/google-syntax-highlighter/Scripts/shBrushSql.js"></script>
    
    


    actualidadjquery.es is using jquery
    
     <script type="text/javascript" src="http://www.actualidadjquery.es/wp-content/plugins/google-syntax-highlighter/Scripts/shBrushXml.js"></script>
    
    


    actualidadjquery.es is using jquery
    
     <script type="text/javascript" src="http://www.actualidadjquery.es/wp-content/plugins/google-syntax-highlighter/Scripts/shBrushDelphi.js"></script>
    
    


    actualidadjquery.es is using jquery
    
     <script type="text/javascript" src="http://www.actualidadjquery.es/wp-content/plugins/google-syntax-highlighter/Scripts/shBrushPython.js"></script>
    
    


    actualidadjquery.es is using jquery
    
     <script type="text/javascript" src="http://www.actualidadjquery.es/wp-content/plugins/google-syntax-highlighter/Scripts/shBrushRuby.js"></script>
    
    


    actualidadjquery.es is using jquery
    
     <script type="text/javascript" src="http://www.actualidadjquery.es/wp-content/plugins/google-syntax-highlighter/Scripts/shBrushCss.js"></script>
    
    


    actualidadjquery.es is using jquery
    
     <script type="text/javascript" src="http://www.actualidadjquery.es/wp-content/plugins/google-syntax-highlighter/Scripts/shBrushCpp.js"></script>
    
    


    actualidadjquery.es is using jquery
    
    <script type="text/javascript"> 
    
    dp.SyntaxHighlighter.ClipboardSwf 'http://www.actualidadjquery.es/wp-content/plugins/google-syntax-highlighter/Scripts/clipboard.swf';
    dp.SyntaxHighlighter.HighlightAll('code');
    
    </script>
    
    
    

    
    <script type="text/javascript"> 
    
    /* <![CDATA[ */
    var ratingsL10n = {"plugin_url":"http:\/\/www.actualidadjquery.es\/wp-content\/plugins\/wp-postratings","ajax_url":"http:\/\/www.actualidadjquery.es\/wp-content\/plugins\/wp-postratings\/wp-postratings.php","text_wait":"Please rate only 1 post at a time.","image":"stars","image_ext":"gif","max":"5","show_loading":"1","show_fading":"1","custom":"0"};
    var ratings_mouseover_image=new Image();
    ratings_mouseover_image.src=ratingsL10n.plugin_url+"/images/"+ratingsL10n.image+"/rating_over."+ratingsL10n.image_ext;
    /* ]]> */
    
    </script>
    
    
    

    
     <script type="text/javascript" src="http://www.actualidadjquery.es/wp-content/plugins/wp-postratings/postratings-js.js?ver=1.50"></script>
    
    


    actualidadjquery.es is using jquery

    Google Search

    Loading

    Header Information

    • http_code :HTTP/1.1 301 Moved Permanently
    • Server :nginx
    • Date :Thu, 19 Jul 20*** 19:37:14 GMT
    • Content-Type :text/html; charset=UTF-8
    • Content-Length :3
    • Connection :keep-alive
    • X-Pingback :http://www.actualidadjquery.es/xmlrpc.php
    • Location :http://www.actualidadjquery.es/
    • X-Powered-By :Loading
    Array
    (
        [0] => Array
            (
                [http_code] => HTTP/1.1 301 Moved Permanently
                [Server] => nginx
                [Date] => Thu, 19 Jul 20*** 19:37:14 GMT
                [Content-Type] => text/html; charset=UTF-8
                [Content-Length] => 3
                [Connection] => keep-alive
                [X-Pingback] => http://www.actualidadjquery.es/xmlrpc.php
                [Location] => http://www.actualidadjquery.es/
                [X-Powered-By] => Loading
            )
    
    )
    

    DNS Info

    • host :actualidadjquery.es | class :IN | ttl :21599 | type :A | ip :91.146.97.109 |
    • host :actualidadjquery.es | class :IN | ttl :21599 | type :NS | target :ns1.grupoloading.com |
    • host :actualidadjquery.es | class :IN | ttl :21599 | type :NS | target :ns2.grupoloading.com |
    • host :actualidadjquery.es | class :IN | ttl :21599 | type :NS | target :ns3.grupoloading.com |
    • host :actualidadjquery.es | class :IN | ttl :21599 | type :SOA | mname :ns1.grupoloading.com | rname :david.loading.es | serial :2017102302 | refresh :10800 | retry :3600 | expire :604800 | minimum-ttl :10800 |
    • host :actualidadjquery.es | class :IN | ttl :21599 | type :MX | pri :10 | target :mail.actualidadjquery.es |
    • host :actualidadjquery.es | class :IN | ttl :21599 | type :TXT | txt :v=spf1 a mx ip4:91.146.97.109 ip4:91.146.97.119 -all | entries :Array |
      Array
    (
        [0] => Array
            (
                [host] => actualidadjquery.es
                [class] => IN
                [ttl] => 21599
                [type] => A
                [ip] => 91.146.97.109
            )
    
        [1] => Array
            (
                [host] => actualidadjquery.es
                [class] => IN
                [ttl] => 21599
                [type] => NS
                [target] => ns1.grupoloading.com
            )
    
        [2] => Array
            (
                [host] => actualidadjquery.es
                [class] => IN
                [ttl] => 21599
                [type] => NS
                [target] => ns2.grupoloading.com
            )
    
        [3] => Array
            (
                [host] => actualidadjquery.es
                [class] => IN
                [ttl] => 21599
                [type] => NS
                [target] => ns3.grupoloading.com
            )
    
        [4] => Array
            (
                [host] => actualidadjquery.es
                [class] => IN
                [ttl] => 21599
                [type] => SOA
                [mname] => ns1.grupoloading.com
                [rname] => david.loading.es
                [serial] => 2017102302
                [refresh] => 10800
                [retry] => 3600
                [expire] => 604800
                [minimum-ttl] => 10800
            )
    
        [5] => Array
            (
                [host] => actualidadjquery.es
                [class] => IN
                [ttl] => 21599
                [type] => MX
                [pri] => 10
                [target] => mail.actualidadjquery.es
            )
    
        [6] => Array
            (
                [host] => actualidadjquery.es
                [class] => IN
                [ttl] => 21599
                [type] => TXT
                [txt] => v=spf1 a mx ip4:91.146.97.109 ip4:91.146.97.119 -all
                [entries] => Array
                    (
                        [0] => v=spf1 a mx ip4:91.146.97.109 ip4:91.146.97.119 -all
                    )
    
            )
    
    )
      

    ALL Links

    Total Links:103

  • Ajax
  • Formularios
  • Checkbox
  • Input
  • Radio
  • Select
  • Imágenes
  • jQuery
  • Menús
  • Actualidad jQuery
  • Inicio
  • Acerca de
  • RSS
  • fancyBox: Abrir imágenes, páginas web y videos en ventanas tipo Popup con jQuery
  • fancyBox-v2.0.4.zip
  • Abrir página web externa - ejemplo.html
  • Ejemplo
  • 1 Comentario
  • Imágenes
  • jQuery
  • admin
  • Coin Slider: Transiciones espectaculares de imágenes en jQuery
  • Descargar
  • workshop.rs
  • Ejemplo
  • 0 Comentarios
  • Imágenes
  • jQuery
  • admin
  • Agregar / eliminar elementos dinámicamente en un campo select con jQuery
  • Ejemplos
  • 0 Comentarios
  • jQuery
  • admin
  • Eliminar elementos / contenidos con remove() en jQuery
  • Ejemplos
  • 0 Comentarios
  • jQuery
  • admin
  • Añadir elementos / contenidos con append() y prepend() en jQuery
  • Ejemplo
  • 0 Comentarios
  • jQuery
  • admin
  • 2
  • 3
  • 4
  • 5
  • »
  • Última »
  • fancyBox: Abrir imágenes, páginas web y videos en ventanas tipo Popup con jQuery
  • Coin Slider: Transiciones espectaculares de imágenes en jQuery
  • Agregar / eliminar elementos dinámicamente en un campo select con jQuery
  • Eliminar elementos / contenidos con remove() en jQuery
  • Añadir elementos / contenidos con append() y prepend() en jQuery
  • addClass
  • ajax
  • alert
  • animate
  • append()
  • checked
  • click
  • Coin Slider
  • confirm
  • eventos
  • fadeIn
  • fadeOut
  • fancyBox
  • formularios
  • getElementById
  • getElementsByClassName
  • getElementsByTagName
  • input
  • isNaN
  • JavaScript
  • jqTransform
  • jQuery
  • length
  • Lightbox
  • menu
  • menus
  • mouseenter
  • mouseleave
  • prepend()
  • prompt
  • remove()
  • removeClass
  • select
  • selected
  • Shadowbox
  • slideDown
  • slideUp
  • submit
  • Jorge
  • Cargando contenido dinámico con la función ajax de jQuery
  • fancyBox: Abrir imágenes, páginas web y videos en ventanas tipo Popup con jQuery
  • jQuery Alert Dialogs, substituto del alert(), confirm() y prompt() en jQuery
  • Cargando contenido dinámico con la función ajax de jQuery
  • Animación simple utilizando fadeIn y fadeOut de jQuery
  • Alojamiento web
  • Tazas ilustradas
  • Site Color

  • CSS Link: http://www.actualidadjquery.es/wp-content/themes/bueno/style.css

  • #000: 9

  • #FFF: 9

  • #EFEFEF: 3

  • #E7E7E7: 3

  • #D8D8D8: 3

  • #EEE: 2

  • #7A7A7A: 2

  • #C4C4C4: 2

  • #FF1183: 1

  • #SUBMIT: 1

  • #0061D8: 1

  • #E6E6E6: 1

  • #999: 1

  • #222: 1

  • #555: 1

  • #9F9F9F: 1

  • #F8F8F4: 1

  • #404040: 1

  • #FLICKR: 1

  • CSS Link: http://www.actualidadjquery.es/wp-content/plugins/wp-postratings/postratings-css.css?ver=1.50

  • #FFFFFF: 1

  • CSS Link: http://www.actualidadjquery.es/wp-content/plugins/wp-pagenavi/pagenavi-css.css?ver=2.70

  • #000: 1

  • #BFBFBF: 1

  • CSS Link: http://www.actualidadjquery.es/wp-content/plugins/google-syntax-highlighter/Styles/SyntaxHighlighter.css

  • #FFF: 4

  • #ECEADB: 2

  • #6CE26C: 2

  • #F8F8F8: 2

  • #008200: 1

  • #069: 1

  • #5C5C5C: 1

  • #ACA899: 1

  • #A0A0A0: 1

  • #E7E5DC: 1

  • CSS Link: http://www.actualidadjquery.es/wp-content/themes/bueno/styles/grey.css

  • #FLICKR: 2

  • #SUBMIT: 1

  • #333333: 1

  • #FFF: 1

  • CSS Link: http://www.actualidadjquery.es/wp-content/themes/bueno/functions/css/shortcodes.css

  • #CCC: 5

  • #2ECFAB: 2

  • #3EE5C0: 2

  • #16CA9E: 2

  • #2EABCF: 2

  • #52C3E8: 2

  • #52E8C6: 2

  • #A0D53A: 2

  • #E57D3E: 2

  • #CF6E2E: 2

  • #CA5116: 2

  • #ACE53E: 2

  • #3EBCE5: 2

  • #555: 2

  • #16A2CA: 2

  • #AE16CA: 2

  • #C83EE5: 2

  • #E9E9E9: 2

  • #E0E0E0: 2

  • #BEBEBE: 2

  • #CD2ECF: 2

  • #E852E6: 2

  • #526EE8: 2

  • #2E58CF: 2

  • #3E5AE5: 2

  • #1638CA: 2

  • #E88E52: 2

  • #60B513: 2

  • #FFF: 2

  • #EEE: 2

  • #E85252: 2

  • #20559A: 2

  • #1666CA: 2

  • #52A8E8: 2

  • #2E76CF: 2

  • #3E9EE5: 2

  • #CF2E2E: 2

  • #EDFCD5: 2

  • #D4EBAF: 2

  • #CA1616: 2

  • #E53E3E: 2

  • #4081AF: 1

  • #D623CB: 1

  • #E6E6E6: 1

  • #0036D2: 1

  • #F5F5F5: 1

  • #777: 1

  • #237FD7: 1

  • #F0BAA2: 1

  • #D723D5: 1

  • #2356D7: 1

  • #D8D8D8: 1

  • #444: 1

  • #BBB: 1

  • #FFD9C8: 1

  • #BC00D2: 1

  • #999: 1

  • #FEF6D2: 1

  • #EFE3AE: 1

  • #9A2096: 1

  • #009ED2: 1

  • #8DCA16: 1

  • #D20000: 1

  • #6BCA16: 1

  • #87C000: 1

  • #40AF96: 1

  • #8DC11E: 1

  • #7CA122: 1

  • #9A5420: 1

  • #AF7440: 1

  • #D25E00: 1

  • #87BF00: 1

  • #209A82: 1

  • #23D7AF: 1

  • #23ABD7: 1

  • #D76B23: 1

  • #0073D2: 1

  • #234DD6: 1

  • #20799A: 1

  • #23A6D6: 1

  • #D72323: 1

  • #9A2020: 1

  • #00D2A8: 1

  • #AF4040: 1

  • #20489A: 1

  • CSS Link: http://www.actualidadjquery.es/wp-content/themes/bueno/custom.css

  • CSS LINK: ../js/jquery.fancybox.css

  • CSS LINK: ../js/coin-slider-styles.css

  • Whois Information

    Server Information

    Google Trend

    Stripped HTML Tag View

    HTTP/1.1 301 Moved Permanently Server: nginx Date: Thu, 19 Jul 20*** 19:37:14 GMT Content-Type: text/html; charset=UTF-8 Content-Length: 3 Connection: keep-alive X-Pingback: http://www.actualidadjquery.es/xmlrpc.php Location: http://www.actualidadjquery.es/ X-Powered-By: Loading HTTP/1.1 200 OK Server: nginx Date: Thu, 19 Jul 20*** 19:37:15 GMT Content-Type: text/html; charset=UTF-8 Content-Length: 45607 Connection: keep-alive X-Pingback: http://www.actualidadjquery.es/xmlrpc.php Vary: Accept-Encoding X-Powered-By: Loading  Actualidad jQuery Ajax Formularios Checkbox Input Radio Select Imágenes jQuery Menús Actualidad jQuery Blog de actualidad acerca de jQuery con tutoriales y ejemplos Inicio Acerca de RSS fancyBox: Abrir imágenes, páginas web y videos en ventanas tipo Popup con jQuery 6 ene Volvemos a la carga, y otra vez para presentaros una función jQuery desarrollada por Jānis Skarnelis. Se trata de fancyBox, un script con el que podemos abrir imágenes, páginas web, videos, etc. De forma muy elegante, en ventanas tipo Popup, con jQuery. Primeramente, bajamos fancyBox desde aquí o desde su página web oficial: fancyBox-v2.0.4.zip Una vez que lo tengáis descargado, lo primero que tenéis que hacer es incluir la función dentro de nuestro sitio web: Incluimos los Javascript de jQuery y fancyBox y el CSS de fancyBox. Para hacerlo funcionar solo tenemos que especificarle un "id" o "class" a nuestros enlaces para después ejecutar fancyBox sobre ese "id" o "class". En este caso hemos utilizado el enlace con clase (class="ejemplo_1") sobre una imagen que vamos a ampliar. Mostramos la imagen en pequeño (foto1p.jpg) y obviamente vamos a ampliar la imagen (foto1.jpg) que fancyBox coge automáticamente del "href" del enlace: Ahora vamos a ejecutar la función fancyBox sobre el enlace con este sencillo código: Recordaros que fancyBox es prácticamente 100% personalizable, en su web oficial encontrareis toda la do***entación necesaria para realizar cambios de aspeto, funcionamiento, etc. En este otro ejemplo vamos a abrir una página web externa en HTML, primero preparamos el enlace: Abrir página web externa - ejemplo.html Como es lógico, la página que se abrirá dentro del fancyBox la coge del "href" del enlace. Y aquí tenemos el código Javascript que abrirá la página web externa: En el código le especificamos que es un "iframe", que el ancho de la ventana es 680 pixeles y la altura son 450 pixeles. Los parámetros que le hemos especificado son en Inglés, pero se entiende bastante bien para que sirven. Como os comentaba antes, recordar que es 100% personalizable y tenéis toda la do***entación en su web oficial. Aquí os dejamos unos ejemplos interactivos de su funcionamiento. Ejemplo Comentarios 1 Comentario Categorías Imágenes, jQuery Autor admin Coin Slider: Transiciones espectaculares de imágenes en jQuery 2 ene Por lo general, la mayoría de los artículos se basan en funciones de jQuery, en los que explicamos su funcionamiento con ejemplos. Para que poco a poco vayáis creando vuestras propias funciones y vuestros propios Scripts en jQuery. En este caso, vamos a hacer una excepción, y os vamos a enseñar una función en jQuery desarrollada por Ivan Lazarevic, para realizar transiciones de imágenes con un resultado realmente espectacular. Podéis descargarlo de su web oficial, o bien desde aquí: Descargar workshop.rs Una vez que lo tengáis descargado, lo primero que tenéis que hacer es incluir la función dentro de nuestro sitio web: Incluimos los Javascript de jQuery y Coin Slider y el CSS de Coin Slider. Para hacerlo funcionar solo tenemos que meter todas las imágenes que queramos dentro de una tabla o una capa y especificarle un "id" para después ejecutar Coin Slider sobre ese "id". En este caso, hemos utilizado una capa con id (id="animacion"): Y hemos incluido estas imágenes: Aunque no es imprescindible, es mejor que las imágenes estén ocultas (style="display:none;") y Coin Slider se encargará de mostrarlas. Y para terminar, tenéis que ejecutar la función Coin Slider sobre la capa: Aquí tenéis un ejemplo básico de como funciona Coin Slider en jQuery: Ejemplo Comentarios 0 Comentarios Categorías Imágenes, jQuery Autor admin Agregar / eliminar elementos dinámicamente en un campo select con jQuery 24 dic Últimamente estoy recibiendo muchos e-mails de gente con dudas agregando o eliminando elementos dinámicamente en un campo select con jQuery. Es prácticamente igual que como os enseñamos la semana pasada, con la función append() y la función remove() Os pongo un ejemplo: $('#campo_select_append').append('Opción nueva 1'); El el campo select con nombre / id "#campo_select_append" agregamos la opción con texto ("Opción nueva 1") y valor (value="opcion_nueva_1") Podemos personalizarlo como todo lo que queramos, como si fuera HTML. Como en este caso, que además lo hemos marcado como seleccionado (selected="selected") Ahora que ya sabemos como agregar opciones, vamos a ver como podemos eliminarlas. Para eliminarlas utilizaremos las funciones find() y remove() de jQuery. Con find() buscamos la opción que queremos eliminar, especificando su valor ("value=""), la seleccionamos y luego con find() la eliminamos. Os pongo un ejemplo: $("#campo_select_remove").find("option[value='opcion_1']").remove(); Buscamos dentro del select con nombre / id "#campo_select_remove" la opción con valor (value='opcion_1') y lo eliminamos. Para terminar os dejamos unos ejemplos interactivos: Ejemplos Comentarios 0 Comentarios Categorías jQuery Autor admin Eliminar elementos / contenidos con remove() en jQuery 15 dic El otro día os enseñábamos a añadir elementos y contenidos con jQuery con la función append() y prepend(), hoy vamos a hacer justamente lo contrario. Para eliminar elementos y contenidos podemos utilizar la función remove() En el siguiente ejemplo, borramos el elemento con la clase "elemento_1": $('.elemento_1').remove(); Es básicamente muy simple, solo tenemos que especificar la clase o el id que lo identifica de los demás: $('#elemento_1').remove(); En este caso lo haríamos con el "id" que lo identifica los demás. En el caso anterior de utilizar la clase, si algún elemento más tiene la misma clase, lógicamente borraríamos todos los elementos con esa clase. Aunque es muy simple, os añadimos unos ejemplos más: Ejemplos Comentarios 0 Comentarios Categorías jQuery Autor admin Añadir elementos / contenidos con append() y prepend() en jQuery 1 dic Volvemos al trabajo, despues de un tiempo desaparecidos por aquí. Hoy os vamos a enseñar a añadir elementos o contenidos en jQuery con la función append() y prepend() La ventaja y/o utilidad de estas funciones es añadir contenidos en tiempo real, una vez que ya se ha cargado completamente nuestro sitio web. La función append() añade el contenido al final del elemento/capa que nosotros le especifiquemos. En cambio la función prepend() funciona exactamente igual, pero el contenido se añade al principio del elemento/capa que nosotros le especifiquemos. Ejemplo: $('.capa1').append("Actualidad jQuery"); En el ejemplo, añadimos el texto "Actualidad jQuery" dentro de la capa con la clase "capa1", al final. Al igual que hemos añadido un texto, podríamos añadir código HTML, una imagen, etc. Y la función prepend() funcionaría igual, como vemos en el ejemplo: $('.capa1').prepend("Actualidad jQuery"); Añadimos el texto "Actualidad jQuery" dentro de la capa con la clase "capa1", pero al principio. Para terminar de entenderlo mejor, aquí tenéis varios ejemplos interactivos con las 2 funciones. Ejemplo Comentarios 0 Comentarios Categorías jQuery Autor admin Página 1 de 612345...»Última » Recientes fancyBox: Abrir imágenes, páginas web y videos en ventanas tipo Popup con jQuery Coin Slider: Transiciones espectaculares de imágenes en jQuery Agregar / eliminar elementos dinámicamente en un campo select con jQuery Eliminar elementos / contenidos con remove() en jQuery Añadir elementos / contenidos con append() y prepend() en jQuery EtiquetasaddClass ajax alert animate append() checked click Coin Slider confirm eventos fadeIn fadeOut fancyBox formularios getElementById getElementsByClassName getElementsByTagName input isNaN JavaScript jqTransform jQuery length Lightbox menu menus mouseenter mouseleave prepend() prompt remove() removeClass select selected Shadowbox slideDown slideUp submit ComentariosJorge en Cargando contenido dinámico con la función ajax de jQueryDiego en fancyBox: Abrir imágenes, páginas web y videos en ventanas tipo Popup con jQueryEdwin en jQuery Alert Dialogs, substituto del alert(), confirm() y prompt() en jQueryruso en Cargando contenido dinámico con la función ajax de jQueryEsteban en Animación simple utilizando fadeIn y fadeOut de jQuerySitios de interés Alojamiento web Tazas ilustradas Síguenos en Facebook © 20*** Actualidad jQuery. All Rights Reserved.

    Similar site & Feed

    Ads

    Alexa Stats

    Google Image Search

    Loading
    Created by BATW 2014. Terms of Use and Privacy Policy
    Your IP: