I am in the process of developing a website with a unique functionality. Take a look at this screenshot.
The concept involves displaying only a section of a large image that can be moved by hovering the mouse over it (moving the mouse to the left will move the picture to the right).
What would be the most effective approach to achieve this effect? I may also want to incorporate multiple images that can be switched between.
After reviewing your input, it appears that This Link
satisfies your requirements perfectly. The code snippet below showcases how they achieve this functionality on their website.
// activating zoom feature
if( image.originalWidth > wrapperWidth ){
$(settings.activeImageId).width(wrapperWidth).height(wrapperHeight).hover(function(){
// enlarge image
$(this).addClass('zoomed').width(image.originalWidth).height(image.originalHeight);
$activeWrapper.mousemove( function(e){
var localX = ~~(((e.pageX - $activeWrapper.offset().left)/wrapperWidth) * 100);
var localY = ~~(((e.pageY - $activeWrapper.offset().top)/wrapperHeight) * 100);
if( localY > 100 ){ localY = 100; }
var fromLeft = (image.originalWidth - wrapperWidth) * localX/100;
var fromTop = (image.originalHeight - wrapperHeight) * localY/100;
//console.log( fromLeft,' :: ', fromTop);
$(settings.activeImageId).css('left', -fromLeft+'px').css('top', -fromTop+'px');
});
},
function(){
// shrink image
$(this).removeClass('zoomed').width(wrapperWidth).height(wrapperHeight);
$activeWrapper.unbind('mousemove');
});
}
}
Additionally, they utilize the following CSS rule:
#active-wrapper .zoomed {
left: 0;
position: absolute;
top: 0;
}
This controls the positioning of the element on the page.
Greetings, as I work on a jQuery mobile app, a particular scenario has arisen that requires attention. <script> function showPanel(info) { alert(info.id); } </script> <div data-role=" ...
I have a div that is one "line" in height. When a button is clicked, I want it to disappear and simultaneously another div with more lines should appear. I have managed to make this work, but no matter what I do, the one-line div disappears very quickly al ...
I am experiencing an issue with a menu on my website. The menu can be viewed here: http://jsfiddle.net/paTNz/2/ The problem occurs when I try to click directly under the word "English" - the menu suddenly closes. This is confusing to me because the event ...
I'm currently attempting to transform an image using CSS keyframes. Here's what I have: @-webkit-keyframes blinkscale { 0% { transform: scale(1,1) } 50% { transform: scale(0.1,0.1) } 100% { ...
When I am loading an HTML table, there is a select input field that needs to display some options. Immediately after constructing the HTML table row, I invoke a function to populate this input field using its class. Below is the relevant HTML snippet and ...
The icons positioned absolutely in the two columns must remain center aligned across all screen resolutions. The media query below attempted to align the icon on mobile devices, but it is inaccurate for any resolution. How can I correct the CSS? @media scr ...
After clicking on the edit button, a webservice function is called which returns a list of question parameters. The function successfully returns the correct values for each edit button. However, after returning the value, there is a post back and all the ...
Hello, I have implemented jQuery dialog with the following code: $("#div1").dialog({ dialogClass: "county-dialog", modal: true, draggable: false, title: statecode, closeOnEscape: true, ...
Encountering issues with printing output in an opened window using JavaScript. I'm creating a new document through window.open and including CDN links to Bootstrap files. While everything appears fine in the opened window, when attempting to print (XP ...
Hi there, I am struggling with a small script that is supposed to play audio when clicking an image but it doesn't seem to be working. Can anyone help me fix it? <img src="tupac.png" width="600" height="420" alt="" onclick="song.play()"/> < ...
Looking to achieve a box shadow effect on just the left and right sides of a div? box-shadow: 0px 0 20px rgba(0,0,0,.4); I experimented with variations like: box-shadow: 0, foo, 0, foo; but it did not yield the desired results. In the illustration bel ...
Is there a way to center align an icon added using the :before method? Below is the current code snippet: <div class="button submit"> <a class="submit check_car_search" href="#" >Some Text</a> </div> CSS: .button a{ backgr ...
I want to make sure that any characters in my database entry that are not numeric or alphabetic get converted to HTML code. After doing some research, I came up with the following function: Public Shared Function HTMLEncodeSpecialChars(text As String) As ...
I want to design a pop-up that features a container with a black background and some opacity, where the content of the popup is placed inside. Here's what I have in mind: <button (click)="showPopup = !showPopup">Open popup</button& ...
Whenever I include a citation in HTML using the <cite> tag, I typically place the link around the citation itself. For example: <a href="http://example.com/"><cite>Example Citation></cite></a> This method makes sense to m ...
I am currently working on a website that consists of the basic elements like Container, Header, Content, and Footer. The container has a background-color that should cover the entire content of the site, including the header, content, and footer. However, ...
I've been attempting to modify the padding within the MUI autocomplete component, but unfortunately, it doesn't appear to be functioning correctly const icon = <CheckBoxOutlineBlankIcon fontSize="small" />; const checkedIcon = ...
After reproducing my issue on a smaller scale for easier handling, I am now aiming to implement an onclick function that reveals the hidden content inside each column. The plan is to initially hide the content using display: none and then switch it to disp ...
Observing the minimal spacing between the divs AboutDogs and AboutCats, I decided to apply padding-top: 20px to the AboutCats to create a visual distinction. However, I encountered a scenario where only AboutCats exists without any other div above it. In ...
Currently utilizing Scala Play! 2.6 Framework without any apparent issues. Utilizing their Javascript routing, although encountering some difficulties. The problem arises when dealing with a form that contains a CSRF token upon rendering: <form method= ...