+ Responder Tema
Resultados 1 al 2 de 2

Tema: Cambiar el tamaño de jQuery fondo fácil

  1. #1
    Conociendo a la comunidad elesanchezf va por un camino distinguido Avatar de elesanchezf
    Fecha de Ingreso
    28 abr, 12
    Mensajes
    2
    Descargas
    1
    Subidas
    0

    Predeterminado Cambiar el tamaño de jQuery fondo fácil

    Puede cambiar el tamaño completo navegador de fondo de la imagen usando jQuery. La aplicación no requiere de CSS. Mantiene la relación de aspecto de las imágenes en el tacto!

    Ejemplo Ejemplo jQuery Código

    $.ezBgResize({
    img : "image/bg.jpg", // Required.
    opacity : 1, // Optional. Default is 100% (1).
    center : true // Optional. Default is true.
    });

    ¡Eso es! Super sencillo!

    No se olvide de incluir jQuery y el guión fuente del plugin!

    Espero que os guste!

  2. #2
    Conociendo a la comunidad elesanchezf va por un camino distinguido Avatar de elesanchezf
    Fecha de Ingreso
    28 abr, 12
    Mensajes
    2
    Descargas
    1
    Subidas
    0

    Predeterminado Re: Cambiar el tamaño de jQuery fondo fácil

    el js del efecto

    var slide_effect = 'fade';
    var slide_direction = 'N';
    var slide_mode = 'normal';

    $(document).ready(function(){

    bindEvents();

    });

    function bindEvents(){

    // set options
    if (slide_effect == 'fade' || slide_effect == 'none') {
    hideObject($('.slide-directions'), 'slide')
    } else {
    if (slide_effect == 'simpleSlide') {
    hideObject($('.mode-randome'), 'none');
    if (slide_mode == 'random') slide_mode = 'normal';
    if ($('INPUT.direction').index($("INPUT#dir-"+slide_direction.toLowerCase()+"")) > 3) {
    slide_direction = 'N';
    }

    } else showObject($('.mode-randome'), 'none');

    showObject($('.slide-directions'), 'slide');

    if (slide_effect == 'superSlide') showObject($('.super-directions'), 'none');
    else hideObject($('.super-directions'), 'none');
    }

    if (slide_mode == 'random') {
    $('#nav').html('');
    hideObject($('.nav-buttons'), 'fade');
    } else showObject($('.nav-buttons'), 'fade');

    $('#toggleAnimation').html("Pause Animation");

    $("select#effect option[value='"+slide_effect+"']").attr("selected", true);
    $("INPUT#dir-"+slide_direction.toLowerCase()+"").attr('checked' , 'checked');
    $("INPUT#"+slide_mode+"").attr('checked', 'checked');

    // Play / pause button
    $('#toggleAnimation').unbind('click');
    $('#toggleAnimation').click(function(){
    if ($(this).html() == "Pause Animation"){
    $(this).html("Resume Animation");
    $('BODY').bgStretcher.pause();
    } else {
    $(this).html("Pause Animation");
    $('BODY').bgStretcher.play();
    }
    });

    // Change Effect
    $('SELECT#effect').unbind('change');
    $('SELECT#effect').change(function(){
    if ($(this).val() == slide_effect) return true;
    slide_effect = $(this).val();
    $('BODY').bgStretcher.sliderDestroy();
    initBgStretcher();
    bindEvents();
    return true;
    });

    // Change Direction
    $('INPUT.direction').unbind('change');
    $('INPUT.direction').change(function(){
    var new_slide_deriction = $('INPUT.direction:checked').attr('id').split('dir-');
    new_slide_deriction = new_slide_deriction[1].toUpperCase();

    if (new_slide_deriction == slide_direction) return true;
    slide_direction = new_slide_deriction;

    $('BODY').bgStretcher.sliderDestroy();
    initBgStretcher();
    bindEvents();
    return true;
    });

    // Change Mode
    $('INPUT.mode').unbind('change');
    $('INPUT.mode').change(function(){
    if ($(this).attr('id') == slide_mode) return true;
    slide_mode = $(this).attr('id');

    $('BODY').bgStretcher.sliderDestroy();
    initBgStretcher();
    bindEvents();
    return true;
    });

    return true;
    }

    function initBgStretcher(){

    $('BODY').bgStretcher({
    images: ['images/sample-1.jpg', 'images/sample-2.jpg', 'images/sample-3.jpg', 'images/sample-4.jpg', 'images/sample-5.jpg', 'images/sample-6.jpg'],
    imageWidth: 1024,
    imageHeight: 768,
    slideDirection: slide_direction,
    slideShowSpeed: 1000,
    transitionEffect: slide_effect,
    sequenceMode: slide_mode,
    buttonPrev: '#prev',
    buttonNext: '#next',
    pagination: '#nav',
    anchoring: 'left center',
    anchoringImg: 'left center'
    });
    }


    function hideObject(obj, hide_effect) {
    if (($.browser.msie) && (parseInt(jQuery.browser.version) == 6)) {
    obj.css({position: 'absolute', left: '-100000px'});
    } else {
    if (hide_effect == 'slider') obj.slideUp();
    else if (hide_effect == 'fade') obj.fadeOut();
    else obj.hide();
    }
    return true;
    }
    function showObject(obj, hide_effect) {
    if (($.browser.msie) && (parseInt(jQuery.browser.version) == 6)) {
    obj.css({position: 'static', left: '0px'});
    } else {
    if (hide_effect == 'slider') obj.slideDown();
    else if (hide_effect == 'fade') obj.fadeIn();
    else obj.show();
    }
    return true;
    }

+ Responder Tema

Temas Similares

  1. hola
    Por Darkgronda en el foro Presentaciones
    Respuestas: 0
    Último Mensaje: 20/02/2013, 01:37

Etiquetas para este Tema

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes

1 2 3 4 5 6 7 8 9 10 11 12 13 14