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  
  • Latest imagesLatest images  
  • RegisterRegister  
  • Log inLog in  
  • March 2024
    MonTueWedThuFriSatSun
        123
    45678910
    11121314151617
    18192021222324
    25262728293031

    Calendar Calendar

    Search
     
     

    Display results as :
     


    Rechercher Advanced Search

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

    None

    Most users ever online was 140 on July 4th 2021, 2:03 pm
    RSS feeds


    Poll
    Top posting users this week
    No user


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

    Mr.EasyBB

    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: reddit

    omg
    Great!!!!

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

    Mr.EasyBB
    Two new Effects

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

    Rukiafan
    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 May 1st 2013, 5:57 pm by Rukiafan

    Mr.EasyBB
    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 May 1st 2013, 5:59 pm by Mr.EasyBB

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

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

    Tonight
    Nice effects!

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

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

    Post 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]