Great!!!!
March 2024
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
None
Most users ever online was 140 on July 4th 2021, 2:03 pm
Most Viewed Topics
Top posting users this week
No user |
Gallery Effects
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]
Fade In One after Another:
[hc= Click for Codes]
Slide from the Left:
[hc= Click for Codes]
FancyBox Options:
*For this to work you must add the first bit right after the $(function(){
[hc= Click for Codes]
Don't forget the CSS either!
FancyBox JS accepts all Options that Fancybox actually allows as well
[/hc]
NEW!
Drop from Top and Bounce:
[hc=Click for Codes]
NEW!
On Mouse Over show LightScreen:
[hc=Click for Codes]
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
More to come guys.
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(' ');
});
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);
});
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);
});
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)}
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);
});
});
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.
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.
Ok no problem Rukia that is actually a good idea, I'm going to work on something like this as well for facebook ok.
Thanks Tonight. Any suggestions please let me know. I will be adding more as I go just have been busy lately.
|
|