Develop Reference

How to create Split Image Effect with Jquery

Please refer this http://54.66.151.166/
=> Go to Canvas->Split Image->Select Size and Shape.
=> Refer various sizes given and proceed for next step.
=> Upload any image and check for the canvas effect for various sizes.
If I to develop the same kind of functionality with the using only jquery or canvas, does any have idea how can I implement this?

we are going to make an image splitting effect
HTML
<!--START THE IMAGE PARTS HOLDER-->
<div class='images_holder'>
<!--INSERT THE SAME IMAGE IN 2 DIVS, THEY BOTH HAVE image_div CLASS AND left OR right CLASS DEPENDING ON POSITION-->
<div class='image_div left'><img class='box_image' src='img.jpg' style='width:300px'/></div>
<div class='image_div right'><img class='box_image' src='img.jpg' style='width:300px'/></div>
<!-- WE USED CSS FLOAT PROPERY, SO WE NEED TO CLEAR NOW-->
<div class='clear'></div>
</div>
<!--END THE IMAGE PARTS HOLDER-->
<!--START THE TEXT-->
Just some dummy text.
<!--END THE TEXT-->
</div>
<!--END THE MAIN CONTAINER-->
CSS
.box_container{
position:relative; /* important */
width:300px; /* we must set a specific width of the container, so it doesn't strech when the image starts moving */
height:220px; /* important */
overflow:hidden; /* hide the content that goes out of the div */
/*just styling bellow*/
background: black;
color:white;
}
.images_holder{
position:absolute; /* this is important, so the div is positioned on top of the text */
}
.image_div {
position:relative; /* important so we can work with the left or right indent */
overflow:hidden; /* hide the content outside the div (this is how we will hide the part of the image) */
width:50%; /* make it 50% of the whole images_holder */
float:left; /* make then inline */
}
.rightright img{
margin-left: -100%; /* 100% is in this case 50% of the image, so this is how we show the second part of the image */
}
.clear{
clear:both;
}
JQUERY
$(document).ready(function() {
//when the user hovers over the div that contains our html...
$('.box_container').hover(function(){
//... we get the width of the div and split it by 2 ...
var width = $(this).outerWidth() / 2;
/*... and using that width we move the left "part" of the image to left and right "part"
to right by changing it's indent from left side or right side... '*/
$(this).find('.left').animate({ right : width },{queue:false,duration:300});
$(this).find('.right').animate({ left : width },{queue:false,duration:300});
}, function(){
//... and when he hovers out we get the images back to their's starting position using the same function... '
$(this).find('.left').animate({ right : 0 },{queue:false,duration:300});
$(this).find('.right').animate({ left : 0 },{queue:false,duration:300});
//... close it and that's it
});
});

Image Slider with "Responsive Width", "Fixed Height", "Center Aligned" and "Auto Rotate"

I need a full width (responsive) slider with fixed height and centered image ( the min width is 960px and people with a wider screens will see the rest of the image (the extra on the left and right)) and it needs to auto-rotate.
Now I got the html/css worked out, but my javascript is rubbish so i have no idea how to let the images slide. I've checked out a lot of Questions here but nothing seems to work. My image dimensions are 2300x350.
CSS:
body {
margin: 0 auto;
}
#slider_container {
width:100%;
height:350px;
overflow:hidden;
position: relative;
z-index: 1;
}
.image {
position:relative;
float:left;
height: 350px;
width: 100%;
overflow: hidden;
}
.image img {
position:absolute;
left:50%;
top:50%;
margin-left:-1150px;
margin-top:-175px;
}
HTML:
<div id="slider_container">
<div class="image">
<img src="images/header.jpg" />
</div>
<div class="image">
<img src="images/header2.jpg"/>
</div>
<div class="image">
<img src="images/header3.jpg" />
</div>
</div>
With this code the pictures come out nice in the middle on every screen but
how do I let it slide and autorotate? I guess the first image just needs to be replaced by the second so a z-index change? or + or - the width of one picture?

You need to only style the img tag if using flexslider. Try the fiddle link below. I have included four files for this.
jQuery 1.9.1
flexslider.css
jquery.flexslider-min.js
bg_direction_nav.png
jsfiddle

Please check this... http://www.jqueryscript.net/demo/Responsive-jQuery-Full-Width-Image-Slider-Plugin-responsiveSlides/ it is full width and fixed height slider and auto rotate. Here you have options to styling according to your needs
$(function(){
var p=$('#content').responsiveSlides({
height:450, // slides conteiner height
background:'#fff', // background color and color of overlayer to fadeout on init
autoStart:true, // boolean autostart
startDelay:0, // start whit delay
effectInterval:5000, // time to swap photo
effectTransition:1000, // time effect
pagination:[
{
active:true, // activate pagination
inner:true, // pagination inside or aouside slides conteiner
position:'B_R', /*
pagination align:
T_L = top left
T_C = top center
T_R = top right
B_L = bottom left
B_C = bottom center
B_R = bottom right
*/
margin:10, // pagination margin
dotStyle:'', // dot pagination class style
dotStyleHover:'', // dot pagination class hover style
dotStyleDisable:'' // dot pagination class disable style
}
]
});
});
For more modification please see jquery.responsiveSlides.js

Fully expand this CSS inline-block div scan-line

I want this scan line effect to work properly. To reveal the text from left to right. As if the cathode-ray is burning it into the phosphors on the screen.
The idea is to slide across black rows, that have a transparent tip. Here is a 80% working demo.
The rightmost black .mask div in every row will not expand. It must.
I have tried to keep the right-most .mask div with a black background as inline-block and make it full width. I somewhat understand why the request does not work (width:100% pushes the other inline-blocks onto the next line, as is only proper), but there must be a way to get this full right hand side without hacking the widths in javascript.
.row {
font-family:'Courier New',Courier,monospace;
font-size:16px;
display:block;
height:auto;
width:100%;
min-width:20%;
position:relative;
margin-right:0px;
}
.mask {
display:inline-block;
width:auto; /* 100% does not work */
background:black;
white-space:pre;
}

this won't work on jsbin becuase it uses absolute positioning (unless you view the full screen demo).. but I provided it anyways for you to copy/paste it into your own browser http://jsbin.com/uteyik/12/.. below are the change highlights:
css:
.row {
..
position:absolute; /* changed to absolute */
}
.mask {
..
width:100%; /* changed to 100% */
position:absolute; /*changed to absolute */
}
and javascript:
jQuery(document).ready(function() {
function fill_box(rows) {
var rowHeight = getSampleRowHeight();
var thisRowHeight = 0;
for(var i = 0; i < rows; i += 1) {
$('.box').append('<div class="row" style="top: '+thisRowHeight+'"><div class="scan_cursor i1"> </div><div class="scan_cursor i2"> </div><div class="scan_cursor i3"> </div><div class="mask"> </div></div>');
thisRowHeight +=rowHeight;
}
}
fill_box(30);
function tag_animate(el) {
// animate the mask
el.animate( {
'margin-left' : '100%'
},
{
complete : function () {
tag_animate(el.parent().next().find('.mask'));
}
}
);
// animate the stripes
el.siblings().animate( {
'margin-left': '100%'
},
{
complete : function () {
el.siblings().hide();
}
}
);
}
tag_animate($('.box').find('.row').eq(0).find('.mask'));
function getSampleRowHeight() {
// get sample row height, append to dom to calculate
$('.box').append('<div class="row" style="display: hidden"> <div class="scan_cursor i1"> </div></div>');
var rowHeight = $('.row').height();
$('.box').find('.row').remove();
return rowHeight;
}
});
explanation: I first create a dummy row and calculate it's height. I then create rows that have position: absolute and position it from the top using the dummy row height x row number. the idea is that I wanted to make everything with absolute positioning so that the mask doesn't push the stripes below when it's 100%, also the row has to be absolute because as I make it's contents disappear, I don't want the rows below to jump up.
bonus: see it work the opposite way (ie the text disappearing): http://jsbin.com/uteyik/9 this was my initial (and incorrect) answer

Slide gallery with image tooltips, images breaking out of unlimited width block

I'm trying to develop a slide gallery with image tooltips according to this design:
What I need to develop is a slider controlled by two buttons, each time a button is pressed the slider's content must move a width of the slider or the width of the content left on that side, whichever is smaller. Upon mouse entering an image inside the slider the full-size version must be displayed as a tooltip.
Here's a fiddle of my solution so far, the problem I'm having is that images that don't fully fit into view plus the hidden area to the left get moved to a new line. You can see the problem by clicking the
"Show content size" button, the width of the content element will be equal to the width of the container element + content element's margin-left.
Bonus points if you can suggest an algorithm for moving the content to the right, I've got left figured out to a T (or so I think, anyway), but right is going to take a little more work (it doesn't check whether the end of the content has been reached). Update: It seems I can't implement proper movement to the right until the other issue is resolved, here's the algorithm I came up with, I can't measure "left to display" if I can't measure the actual width of the content element.

I created something you might like:
gallery demo
The gallery does not scroll the full gallery width by default (you can change that) cause some initially cut-off images at the right side, after a 'full' slide would result cut-off again, just on the other side of our gallery. You have for that cause the beKind variable. Adjust it as you like.
It hides the buttons if there's not enough content to make the gallery usable.
The gallery calculates the remaining space to scroll.
Once the slider end reached - the left/right buttons make the gallery jump to the beginning/end, so that are always usable. (Seems kinda weird to have a button... but that does nothing right? ;) )
The Tooltip has a hover-intent built in, to not piss off our users if they unintentionally hovered our gallery: (the tooltip fades in if the hover is registered for more that 120ms. Fair timing. I like it.)
As pointed out in your comment now the tooltip will not go off the screen.
jQ:
// Slide Kind Gallery - by roXon // non plugin v. // CC 2012.
$(window).load(function(){
var galW = $('#gallery').outerWidth(true),
beKind = 120, // px substracted to the full animation to allow some images to be fully visible - if initially partly visible.
sumW = 0;
$('#slider img').each(function(){
sumW += $(this).outerWidth(true);
});
$('#slider').width(sumW);
if(sumW <= galW){ $('.gal_btn').remove(); }
function anim(dir){
var sliderPos = Math.abs($('#slider').position().left),
rem = dir ==='-=' ? rem = sumW-(sliderPos+galW) : rem = sliderPos,
movePx = rem<=galW ? movePx = rem : movePx = galW-beKind;
if( movePx <= 10){
movePx = dir==='-=' ? movePx=rem : movePx = galW-sumW;
dir = '';
}
$('#slider').stop(1).animate({left: dir+''+movePx },1000);
}
$('.gal_btn').on('click', function(){
var doit = $(this).hasClass('gal_left') ? anim('+=') : anim('-=');
});
});
And the tooltip script:
// Addon // Tooltip script
var $tt = $('#tooltip');
var ttW2 = $tt.outerWidth(true)/2;
var winW = 0;
function getWW(){ winW = $(window).width(); }
getWW();
$(window).on('resize', getWW);
$('#slider img').on('mousemove',function(e){
var m = {x: e.pageX, y: e.pageY};
if( m.x <= ttW2 ){
m.x = ttW2;
}else if( m.x >= (winW-ttW2) ){
m.x = winW-ttW2;
}
$tt.css({left: m.x-ttW2, top: m.y+10});
}).hover(function(){
$clon = $(this).clone();
var t = setTimeout(function() {
$tt.empty().append( $clon ).stop().fadeTo(300,1);
},120);
$(this).data('timeout', t);
},function(){
$tt.stop().fadeTo(300,0,function(){
$(this).hide();
});
clearTimeout($(this).data('timeout'));
});
HTML
(Place the #tooltip div after the body tag)
<div id="tooltip"></div>
<div id="gallery_container">
<div id="gallery">
<div id="slider">
<img src="" alt="" />
<img src="" alt="" />
</div>
</div>
<div class="gal_left gal_btn">◀</div>
<div class="gal_right gal_btn">▶</div>
</div>
CSS:
/*GALLERY*/
#gallery_container{
position:relative;
margin:0 auto;
width:600px;
padding:0 30px; /*for the buttons */
background:#eee;
border-radius:5px;
box-shadow: 0 2px 3px #888;
}
#gallery{
position:relative;
height:100px;
width:600px;
overflow:hidden;
}
#slider{
position:absolute;
left:0px;
height:100px;
}
#slider img{
height:100.999%; /* fixes some MOZ image resize inconsistencies */
float:left;
cursor:pointer;
border-right:3px solid transparent; /* instead of margin that could leat to some wrong widths calculations. */
}
.gal_btn{
position:absolute;
top:0px;
width:30px; /*the container padding */
height:40px;
padding:30px 0;
text-align:center;
font-size:30px;
cursor:pointer;
}
.gal_left{left:0px;}
.gal_right{right:0px;}
/* end GALLERY */
/* TOOLTIP ADDON */
#tooltip{
position:absolute;
z-index:100;
width:300px;
padding:10px;
background:#fff;
background: rgba(255,255,255,0.3);
box-shadow:0px 3px 6px -2px #111;
display:none;
}
#tooltip *{
width:100%;
vertical-align:middle;
}
/* end TOOLTIP ADDON */
Hope you'll like it, and you learned some useful UI design tricks.
By the way, if you want to populate your ALT attributes (Search engines like it!) you can also grab that text and make it appear inside the tooltip like here!:
demo with text inside the tooltip
Happy coding.

I don't know if I understand correctly your problem. If you set a width wide enough to .scroll-content div, images wouldn't go to the "next line". So a solution would be to set a width with css. If not, you could use jquery to determine the total width of all the images and give it to the .scroll-content div. Calculate total width of Children with jQuery

CSS: dynamic width div

I'm coding a slider and I have problems with the stylying of the container.
I have 3 div:
A div that sets the width and height of the slider
A container div with all the content divs (and the scroll for the slider)
Many divthat show different contents each
What I want to do is apply a negative margin on the second div to slide the content.
LIVE example: http://jsbin.com/efuyix/7/edit
JS:
function animate(element) {
var start = new Date();
var id = setInterval(function() {
var timePassed = new Date() - start;
var progress = timePassed / 600;
if (progress > 1) progress = 1;
element.style.marginLeft = -50 * Math.pow(progress, 5)+"px";
if (progress == 1) {
clearInterval(id);
}
}, 10);
}
CSS
.example_path {
overflow: hidden;
width: 50px;
height: 50px;
}
.example_block {
min-width: 100px;
height: 50px;
float:left;
}
.example_in_block {
width: 50px;
height: 50px;
float:left;
}
HTML
<div class="example_path">
<div class="example_block" onclick="animate(this)">
<div class="example_in_block" style="background-color:blue;"></div>
<div class="example_in_block" style="background-color:pink;"></div>
<div style="clear:both;"></div>
</div>
</div>
The problem:
The width of .example_block has to be exactly the same or more than (amount of content divs .example_block * 50 [width size of content div] ) to work.
For example, if I set the width size of the .example_block to 90, the pink div will be below the blue div and not beside it.
I want the container div to be dynamic so I don't have to set the specific width size.
How can I do this?

Simply remove the float:left in the .example_block.
See http://jsbin.com/efuyix/9/edit

Not with negative margins. You can probably set padding on one of the outer DIVs.
Also, min-width isn't going to be backwards compatible with older versions of IE.
Check this example: http://jsfiddle.net/5xBYN/6/
If the initial positioning is good, you can then use negative values on your container DIV (the third DIV) for top, left, right or bottom to achieve sliding.
Update:
Maybe this is closer to what you want. http://jsfiddle.net/5xBYN/7/
I'm still not sure what you are trying to do. Maybe edit the fiddle I posted and update your question with what I'm getting wrong if there is anything.