Back To Top
Login
Register
Visit Us At TwitterVisit Us At YouTubeVisit Us At Facebook
KandiChat is in Beta Release. Try It Out
HomeHome  
  • UpdatesUpdates  
  • SearchSearch  
  • RegisterRegister  
  • Log inLog in  
  • November 2017
    MonTueWedThuFriSatSun
      12345
    6789101112
    13141516171819
    20212223242526
    27282930   

    Calendar Calendar

    Search
     
     

    Display results as :
     


    Rechercher Advanced Search

    Shopmotion


    Who is online?
    In total there is 1 user online :: 0 Registered, 0 Hidden and 1 Guest

    None

    Most users ever online was 22 on June 26th 2013, 6:10 am
    RSS feeds


    Poll
    Top posting users this week


    View previous topic View next topic Go down  Message [Page 1 of 1]

    avatar

    Gallery Effects

    Mr.EasyBB
    04/23/2013
    Hey guys so here are some effects that we have created, we will be going through and creating some more every so often so make sure your check out that Recent Topics Link, or add this to your Watched Topics. So let us get started.  Below are listed features,

    Hover Show Image :
    [hc=Click for Codes]
    Code:
    $('.gallery-cat.center').css('position','relative');
    $('body').append('<div id="imgLight"><img class="ImgBox" src="" /><span></span></div>');
      var moveLeft = 200;
      var moveDown = -50;
      $('.gallery-cat.center img').hover(function(e) {
            var imgSrc = $(this).attr('src');
           var img = imgSrc.replace('th','pr').replace('.jpg','_800x600.jpg');
            var title= $(this).attr('title');
        $('.ImgBox').attr('src',img);
        $('#imgLight span').append(title);
    $('#imgLight').show()
          .css('top', moveDown)
          .css('left', moveLeft)
          .appendTo($(this).parent());
      }, function() {
        $('#imgLight').hide();
            $('#imgLight span').html(' ');
      });
    [/hc]


    Fade In One after Another:
    [hc= Click for Codes]
    Code:
    $('.gallery-cat.center').each(function(index){
         var Swidth= $(this).width();
           $(this).css('marginLeft','-999px');
       $(this).delay(500*index).fadeIn(400);
    });
    [/hc]



    Slide from the Left:
    [hc= Click for Codes]
    Code:
    $('.gallery-cat.center').each(function(index){
         var Swidth= $(this).width();
           $(this).css('marginLeft','-999px');
       $(this).delay(500*index).css('display','block').animate({marginLeft:'1%'},400);
    });
    [/hc]

    FancyBox Options:
       *For this to work you must add the first bit right after the $(function(){
    [hc= Click for Codes]
    Code:

    $.getScript('http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.0.4/jquery.fancybox.pack.js');

    Code:

    $('.gallery-cat.center img').click(function(e){
      e.preventDefault();
        var imgSrc = $(this).attr('src');
           var img = imgSrc.replace('th','pr').replace('.jpg','_800x600.jpg');
        $(this).fancybox({href: img});
    });

    Don't forget the CSS either!

    Code:

    .fancybox-tmp iframe,.fancybox-tmp object{vertical-align:top;padding:0;margin:0}
    .fancybox-wrap{position:absolute;top:0;left:0;z-index:920}
    .fancybox-skin{position:relative;padding:0;margin:0;background:#f9f9f9;color:#444;text-shadow:none;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}
    .fancybox-opened{z-index:930}
    .fancybox-opened .fancybox-skin{-webkit-box-shadow:0 10px 25px rgba(0,0,0,0.5);-moz-box-shadow:0 10px 25px rgba(0,0,0,0.5);box-shadow:0 10px 25px rgba(0,0,0,0.5)}
    .fancybox-outer,.fancybox-inner{padding:0;margin:0;position:relative;outline:0}
    .fancybox-inner{overflow:hidden}
    .fancybox-type-iframe .fancybox-inner{-webkit-overflow-scrolling:touch}
    .fancybox-error{color:#444;font:14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;margin:0;padding:10px}
    .fancybox-image,.fancybox-iframe{display:block;width:100%;height:100%;border:0;padding:0;margin:0;vertical-align:top}
    .fancybox-image{max-width:100%;max-height:100%}
    #fancybox-loading,.fancybox-close,.fancybox-prev span,.fancybox-next span{background-image:url('http://i45.servimg.com/u/f45/17/45/19/77/fancyb10.png')}
    #fancybox-loading{position:fixed;top:50%;left:50%;margin-top:-22px;margin-left:-22px;background-position:0 -108px;opacity:.8;cursor:pointer;z-index:920}
    #fancybox-loading div{width:44px;height:44px;background:url('http://i45.servimg.com/u/f45/17/45/19/77/fancyb10.gif') center center no-repeat}
    .fancybox-close{position:absolute;top:-18px;right:-18px;width:36px;height:36px;cursor:pointer;z-index:940}
    .fancybox-nav{position:absolute;top:0;width:40%;height:100%;cursor:pointer;background:transparent url('http://i45.servimg.com/u/f45/17/45/19/77/blank10.gif');-webkit-tap-highlight-color:rgba(0,0,0,0);z-index:940}
    .fancybox-prev{left:0}
    .fancybox-next{right:0}
    .fancybox-nav span{position:absolute;top:50%;width:36px;height:34px;margin-top:-18px;cursor:pointer;z-index:940;visibility:hidden}
    .fancybox-prev span{left:20px;background-position:0 -36px}
    .fancybox-next span{right:20px;background-position:0 -72px}
    .fancybox-nav:hover span{visibility:visible}
    .fancybox-tmp{position:absolute;top:-9999px;left:-9999px;padding:0;overflow:visible;visibility:hidden}
    #fancybox-overlay{position:absolute;top:0;left:0;overflow:hidden;display:none;z-index:910;background:#000}
    #fancybox-overlay.overlay-fixed{position:fixed;bottom:0;right:0}
    .fancybox-title{visibility:hidden;font:normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;position:relative;text-shadow:none;z-index:950}
    .fancybox-opened .fancybox-title{visibility:visible}
    .fancybox-title-float-wrap{position:absolute;bottom:0;right:50%;margin-bottom:-35px;z-index:930;text-align:center}
    .fancybox-title-float-wrap .child{display:inline-block;margin-right:-100%;padding:2px 20px;background:transparent;background:rgba(0,0,0,0.8);-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;text-shadow:0 1px 2px #222;color:#FFF;font-weight:bold;line-height:24px;white-space:nowrap}
    .fancybox-title-outside-wrap{position:relative;margin-top:10px;color:#fff}
    .fancybox-title-inside-wrap{margin-top:10px}
    .fancybox-title-over-wrap{position:absolute;bottom:0;left:0;color:#fff;padding:10px;background:#000;background:rgba(0,0,0,.8)}
    CSS above is partially minimized.
    FancyBox JS accepts all Options that Fancybox actually allows as well
    [/hc]


    NEW!
    Drop from Top and Bounce:
    [hc=Click for Codes]
    Code:

    $.getScript('http://code.jquery.com/ui/1.10.2/jquery-ui.js');
    $('.gallery-cat.center').each(function(index){
         var Swidth= $(this).width();
      $(this).delay(500*index).css('top','-500px');  $(this).animate({top:'0px'},500,function() {
    $(this).effect('bounce',1000);
    });
    });
    [/hc]


    NEW!
    On Mouse Over show LightScreen:
    [hc=Click for Codes]
    Code:

    $('body').append('<a id="linkfull" href=""><div id="fullscreen">Click For Full Screen</div></a>');
     $('.center.pic-container img').mouseenter(function() {
    $(this).parent().css('position','relative');
      var imghref = $(this).parent().attr('href'),isHeight= parseInt($(this).css('height'))+30;
     $('#linkfull').css('height',isHeight);
     $('#linkfull').attr('href',imghref);
      var smImg = $(this).attr('src'),lgImg = smImg.replace('/pr',"").replace('_800x600');
         $('#linkfull').show().prependTo($(this).parent()); });

      $('.center.pic-container').mouseleave(function() {
       $('#linkfull').hide();
    });

    Code:
    #linkfull{
     position: absolute;
    width: 100%; 
      display:none;
    }
    #fullscreen{
     height:100%;
     top:0px;
     left:0px;
     background:rgba(0,0,0,0.5);
     color:#fff;
      font-size:24px;
      text-align:center;
      line-height:600px;
    }


    This code is used on the image after clicking the link. You then have an option to view full screen. This is where this comes to play
    [/hc]

    Remember place these inside 

    Code:
    $(function() {
    //codes in here
    });

    More to come guys.
    Share this post on: Excite BookmarksDiggRedditDel.icio.usGoogleLiveSlashdotNetscapeTechnoratiStumbleUponNewsvineFurlYahooSmarking

    avatar
    Great!!!!

    Post on April 24th 2013, 9:54 am by omg

    avatar
    Two new Effects

    Post on April 24th 2013, 8:02 pm by Mr.EasyBB

    avatar
    I'm working on a quick share feature that can allow users to send their pics to their friends via PM or a Visitor Message! I'll post the code if I can work out all of the bugs. Wink

    Post on May 1st 2013, 5:57 pm by Rukiafan

    avatar
    Ok no problem Rukia Smile that is actually a good idea, I'm going to work on something like this as well for facebook ok.

    Post on May 1st 2013, 5:59 pm by Mr.EasyBB

    avatar
    Awesome! I like the idea for quickly sharing pics with Facebook friends! Very Happy

    Post on May 1st 2013, 6:01 pm by Rukiafan

    avatar
    Nice effects!

    Post on May 10th 2013, 11:14 pm by Tonight

    avatar
    Thanks Tonight. Any suggestions please let me know. I will be adding more as I go just have been busy lately.

    Post on May 11th 2013, 3:11 pm by Mr.EasyBB

    Post  by Sponsored content

    View previous topic View next topic Back to top  Message [Page 1 of 1]