2

I've stumbled upon a problem of creating a very specific element. I have a ticker that shows different content - text, images and other types of content in it. What I want to do is to add a static "magnifier" so all the moving content would be scaled when it is in magnifiers area.

Most of jquery zoom or magnification plugins that I saw never used fixed position and worked on mouse over with either using 2 images and showing bigger one inside the magnifier area or using additional css for each element. So they are pretty much no use to me.

What I'm trying to accomplish is when any moving div reaches magnifier area - it triggers creation of a clone that overlays original div and css transformation is applied to the clone (lets say it is scaling 2x) it must also have proportional speed change so things look smooth ( for example original div is 100px wide and will slide inside magnifying area for 2 seconds so it's speed is 50px per second - his clone will be 200px wide so it must slide 100px per 1 second and etc.) . Note that all this actions are only visible in the magnifier area. When the clone div reaches the end of magnifier area it must be removed.

I've created a fiddle to make more sense.

FIDDLE

The code

HTML:

<div class='scroll'>
<div class='scroll-content'>
    <img src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=2"></img> 
    <img src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=2"></img>
    Text sample 1
    <img src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=2"></img>
    <img src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=2"></img>
    <img src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=2"></img>
    Text sample 2 
    <img src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=2"></img>
    Text sample 3
</div>

CSS:

div.scroll { margin-top: 200px;
margin-left: 100px;
white-space:no-wrap;
overflow:hidden;
}

div.scroll > div.scroll-content {
white-space:nowrap;
display:inline;
margin-top: 20px;
margin-left: 50 px;
width:auto;
}

#zoom { 
position: absolute;
    top: 150px;
    left: 150px;
height: 200px;
width: 200px;
border: solid; color:red;
border-width: 3px;
border-radius: 155px;
}


div.clone {
white-space:nowrap;
display:inline;
margin-top: 20px;
margin-left: 50 px;
width:auto;
}

Now the hard part - my code is missing triggers for beginning and ending so I divided into separate parts.

jQuery:

// this scrolls original divs

$(function scoll(){
var scroll = $('div.scroll');
scroll.each(function() {
var mar = $(this),indent = mar.width();
mar.scroll = function() {
    indent--;
    mar.css('text-indent',indent);
    if (indent < -1 * mar.children('div.scroll-content').width()) {
        indent = mar.width();
    }
};
mar.data('interval',setInterval(mar.scroll,1/60));
});
});

This should clone original divs with css transformation, however I can't figure out how to set the trigger. I can't find "position" or "coordinates" specific trigger in javascript or jQuery documentation.

$(function clone(){
var val = 2;
$('.scroll-content').clone().addClass('clone').css({
        '-moz-transform': 'scale(' + val + ')',
'-webkit-transform': 'scale(' + val + ')'}).appendTo('#zoom', scroll2);
$('.clone').remove();
});

This should scroll clones inside red circle

$(function scoll2(){
var scroll = $('div#zoom');
scroll.each(function() {
var mar = $(this),indent = mar.width();
mar.scroll = function() {
    indent--;
    mar.css('text-indent',indent);
    if (indent < -1 * mar.children('div.clone').width()) {
        indent = mar.width();
    }
};
mar.data('interval',setInterval(mar.scroll,1/60));
});
});

So the main problem is setting the correct triggers for beginning and ending.

user3299345
  • 97
  • 8

1 Answers1

4

Cloning of element is not needed.

You can checkout this fiddle JSFiddle, I used getClientRects() to get the area of elements. And added the zoomed-in class to image whenever it gets inside the #zoom element.

and used CSS3 transform property inside zoomed-in class to zoom the image.

.zoomable {
    transition: 1s all;
}

.zoomed-in {
    transform: scale(1.3);
}
Sandesh Damkondwar
  • 446
  • 5
  • 17