I have an image over which I created hotspots for hyperlinks using image map. Now I need to enlarge/zoom over the images on mouse over. I have this so far
<script type="text/javascript">
$(document).ready(function () {
$('.mapping').mouseover(function() {
$(this).animate({
width: "110%",
height: "50%"
}, 'slow');
});
});
</script>
</head>
<body>
<p>
<map id="ImgMap0" name="ImgMap0">
<area alt="" coords="4, 14, 67, 34" id="a" class="mapping"
href="#" shape="rect" />
<area alt="" coords="5, 55, 70, 74" id="b" class="mapping"
href="# shape="rect" />
....
<img alt="" class="auto-style1" height="529" src="Tools.jpg"
width="800" usemap="#ImgMap0" /></p>
</p></body>
But the animate () is not working. Alert is being called so I know mouseover() is working. Any ideas for enlarging the area in image map?
JS Fiddle link
https://jsfiddle.net/z2Lkf8p0/
You cannot enlarge image's map in any way.
You can do this with another way. I'd created a fiddle for it.
http://jsfiddle.net/ebilgin/141bkx84/
HTML
<div class="container">
<img src="http://dummyimage.com/600x400/000/fff" alt="" />
<div class="map1 map"></div>
<div class="map2 map"></div>
</div>
CSS
.container {
position: relative;
width: 600px;
}
.container img {
position: absolute;
z-index: 1;
}
.map {
position: absolute;
background: #F0F;
z-index: 2;
}
.map1 {
left: 10px;
top: 10px;
width: 100px;
height: 100px;
}
.map2 {
right: 10px;
top: 10px;
width: 100px;
height: 100px;
}
JS
$(".map").on("mouseenter", function () {
$(this).animate({
width: "200px",
height: "200px"
});
});
Area to CSS convert
If all areas types are rectangle its easy. n1,n2,n3,n4
n1: y beginning
n2: x beginning
n3: y ending
n4: x ending
You can convert it.
left: n2;
top: n1;
width: n3 - n1;
height: n4 - n2;
Try this,
<script type="text/javascript">
$(document).ready(function () {
$('.mapping').hover(function() {
alert('Mouse Hovered');
//some statements
});
});
</script>
Good Luck.. ['}
Related
I am trying to achieve an effect of looping through images if a div is hovered or not.
If mouseenter div then cycle through images
if mouseleave div then stop cycling through images and remove all images (only background image will be visible).
currently I am using a setTimeout to fire itself recursively but I am having trouble with jquery on detecting if the mouse is hovering or left the object.
function logoImageLoop() {
$(".one-box .social_gallery .social_img:first").show().next(".social_img").hide().end().appendTo(".one-box .social_gallery");
};
var oneBoxIsHover = false;
$(".one-box").mouseenter(function(){
timeout();
function timeout() {
setTimeout(function(){
logoImageLoop();
timeout();
}, 100);
};
});
Here is a codepen for reference: http://codepen.io/H0BB5/pen/xEpqbv
A similar effect I am trying to achieve can be seen when hovering the cargo logo on this website: http://cargocollective.com/
You just need to clear the timer on mouseleave.
var timer = null;
$(".one-box").mouseenter(function(){
timeout();
function timeout() {
timer = setTimeout(function(){
logoImageLoop();
timeout();
}, 100);
};
}).mouseleave(function(){
clearTimeout(timer);
});
Here's a codepen: http://codepen.io/anon/pen/rrpwYJ
I would use an interval, and the JQuery .hover() functionality. Simply replacing your $(".one-box").mouseenter() with this will run the loop while you're hovered and remove it once your mouse leaves the area.
The important bit:
var imageChangeInterval;
$(".one-box").hover(function() {
imageChangeInterval = setInterval(function() {
logoImageLoop();
}, 100);
}, function() {
clearInterval(imageChangeInterval);
});
Full example:
function logoImageLoop() {
$(".one-box .social_gallery .social_img:first").show().next(".social_img").hide().end().appendTo(".one-box .social_gallery");
};
var oneBoxIsHover = false;
// New code:
var imageChangeInterval;
$(".one-box").hover(function() {
imageChangeInterval = setInterval(function() {
logoImageLoop();
}, 100);
}, function() {
clearInterval(imageChangeInterval);
});
.one-box {
position: relative;
height: 300px;
width: 300px;
}
.one-box a {
width: 100%;
}
.one-box a img {
max-width: 100%;
}
/* .social_img { display: none; } */
a#social_logo {
background-image: url(https://s3-us-west-2.amazonaws.com/staging-site-assets/one-method/instagram-logo.png);
background-repeat: no-repeat;
background-position: 0 0;
display: block;
position: absolute;
width: 73px;
height: 73px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 99;
}
.one_box .social_gallery {
position: absolute;
left: 0;
top: 0;
opacity: 1;
display: none;
}
.nav_logo .social_gallery .social_img {
position: absolute;
float: none;
margin: 0;
opacity: 1;
filter: alpha(opacity=100);
overflow: hidden;
top: 0;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one-box nav_logo">
<a id="social_logo" href="#" alt=""></a>
<div class="social_gallery img_wall gallery">
<div class="social_img wall_img">
<a class="social_link" href="#">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&bg=222&txt=300%C3%97300&w=300&h=300" />
</a>
</div>
<div class="social_img">
<a class="social_link" href="#">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&bg=fb2&txt=300%C3%97300&w=300&h=300" />
</a>
</div>
<div class="social_img">
<a class="social_link" href="#">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&bg=777&txt=300%C3%97300&w=300&h=300" />
</a>
</div>
<div class="social_img">
<a class="social_link" href="#">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&bg=fb2&txt=300%C3%97300&w=300&h=300" />
</a>
</div>
</div>
<div>
I've coded a gallery with jQuery, CSS & HTML, and I want to add in next image and previous image buttons, so I have added them to the page and I have made functions for them but I don't know how I will do this. Here is my code and if any body knows any good way of doing this I'd be happy! Thanks!
edit I haven't received a response so I'll try and give more information, I'm trying to get arrows on the left and right hand side of my image so I can go to previous and next image and I don't know how to do this.
$(document).ready(function(){
$('.thumbnail').click(function(){
$('.backdrop').animate({'opacity':'.5'}, 300, 'linear');
$('.box').animate({'opacity' : '1.00'}, 300, 'linear');
$('.box, .selectors, .backdrop').css('display', 'block');
$('.box').html('<img class="boximg" src="' + $(this).attr('src') + '">');
//$('.box').html('<img class="boximg" src="' + src + '">');
});
$('.nextimg').click(function(){
$('.box').html('<img class="boximg" src="' + '">');
});
$('.previmg').click(function(){
$('.box').html('<img class="boximg" src="'+'">');
});
$('.backdrop').click(function(){
close_box();
});
});
$(document).keydown(function(event){
if (event.keyCode == 27 || event.keyCode == 13){
close_box();
};
});
function close_box(){
$('.backdrop, .box').animate({'opacity': '0'}, 300, 'linear', function(){
$('.backdrop, .box').css('display', 'none');
$('.selectors').css('display', 'none');
});
}
.backdrop{
position: absolute;
display: none;
top: 0px;
left: 0px;
background-color: #000;
opacity: 0;
height: 100%;
width: 100%;
}
.box{
position: absolute;
display: none;
background-color: white;
opacity: 0;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
border-radius: 13px;
}
.close{
float: right;
margin-right: 5px;
}
.boximg {
position: absolute;
top: 3%;
left: 2%;
width: 96%;
height: 94%;
}
.thumbnail{
border-radius: 30px;
height: 300px;
width: 300px;
}
.selectors{
display: none;
}
.nextimg{
position: absolute;
right: 3%;
top: 50%;
}
.previmg{
position: absolute;
left: 3%;
top: 50%;
}
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
</head>
<body>
<div class="images">
<img class="thumbnail" src="urlttr.jpeg">
<img class="thumbnail" src="http://www.hdwallpapers.eu/wp/sci-fi-planet-background-1920x1080.jpg">
<img class="thumbnail" src="http://www.wallpapersdb.org/wallpapers/beach/sunrise_1920x1080.jpg">
<img class="thumbnail" src="http://free-hq-wallpapers.com/wp-content/uploads/2009/07/New-York-Sunset-1920x1080.jpg">
</div>
<div class="backdrop"></div>
<div class="box"></div>
<div class="selectors">
<image class="nextimg" src="right_arrow.png">
<image class="previmg" src="left_arrow.png">
</div>
</body>
</html>
Taking your code to jsfiddle, I came up with this as a solution.
<div class="images">
<!-- In the a-href you put the path to the big sized image. In the image src the small thumb path. -->
<a href="/city-q-c-640-480-3.jpg">
<img class="thumbnail" src="/city-q-c-640-480-3.jpg"/>
</a>
<a href="/sci-fi-planet-background-1920x1080.jpg">
<img class="thumbnail" src="/sci-fi-planet-background-1920x1080.jpg"/>
</a>
<a href="/sunrise_1920x1080.jpg">
<img class="thumbnail" src="/sunrise_1920x1080.jpg"/>
</a>
<a href="/New-York-Sunset-1920x1080.jpg">
<img class="thumbnail" src="/New-York-Sunset-1920x1080.jpg"/>
</a>
</div>
<div class="backdrop"></div>
<div class="box"></div>
<div class="selectors">
<img class="nextimg" src="right_arrow.png"/>
<img class="previmg" src="left_arrow.png"/>
</div>
You can see there, that I surrounded the thumbs with a-tags - you could also instead use a data attribute or something similar to add the path for the big version of the images.
$(function() {
var $currentImageLink; // the current a tag
$('.images a').click(function(event){
event.preventDefault();
$currentImageLink = $(this);
$('.backdrop').animate({'opacity':'.5'}, 300, 'linear');
$('.box').animate({'opacity' : '1.00'}, 300, 'linear');
$('.box, .selectors, .backdrop').css('display', 'block');
$('.box').html('<img class="boximg" src="' + $(this).attr('href') + '">');
});
$('.nextimg').click(function() {
$currentImageLink = $currentImageLink.next('a');
if (0 == $currentImageLink.length) {
$currentImageLink = $('.images a:first-child');
}
$('.box').html('<img class="boximg" src="' + $currentImageLink.attr('href') + '">');
});
$('.previmg').click(function() {
$currentImageLink = $currentImageLink.prev('a');
if (0 == $currentImageLink.length) {
$currentImageLink = $('.images a:last-child');
}
$('.box').html('<img class="boximg" src="' + $currentImageLink.attr('href') +'">');
});
$('.backdrop').click(function() {
close_box();
});
});
$(document).keydown(function(event) {
if (event.keyCode == 27 || event.keyCode == 13) {
close_box();
}
});
function close_box() {
$('.backdrop, .box').animate({'opacity': '0'}, 300, 'linear', function() {
$('.backdrop, .box').css('display', 'none');
$('.selectors').css('display', 'none');
});
}
Furthermore I added the variable $currentImageLink in which I put always the current link element, that is shown at that moment in your gallery.
In the functions for next and prev that variable is filled with the next/prev link element. If there is no such element, it will become the first or last element.
Depending on what you want to do with the gallery, maybe you could then also make the images fade-out/-in or preload the big images.
I am using qTip 2 to display a larger image on hover and it semi works. The image shows but not the full width. How do I get it to show full width?
Code:
HTML
<img src="img.jpg" usemap="#Map" class="center" style="width:900px;"
border="0" />
<map name="Map" id="Map">
<area class="1" shape="rect" coords="4,3,225,150" />
</map>
JS
var $j = jQuery.noConflict();
$j('.1').qtip({
content: '<img src="img1.jpg" width="600" />',
position: {
my: 'left top',
at: 'right top',
target: $j('.1')
},
style: {
classes:
'ui-tooltip-tipsy'
}
});
What should I do to get the image to show full width?
I tried adding this code and it did not work:
tip: {
width: 600
}
you only have to change the max-width of your css file:
.ui-tooltip, .qtip{
max-width: 900px; /* Change this? */
}
See this example at jsfiddle
HTML:
<p>
<img src="http://www.dummyimage.com/50x50/4c6aff/000000.png&text=1" data-pic="http://www.dummyimage.com/600x600/4c6aff/000000.png&text=1">
<img src="http://www.dummyimage.com/50x50/4c6aff/000000.png&text=2" data-pic="http://www.dummyimage.com/300x300/4c6aff/000000.png&text=2">
<img src="http://www.dummyimage.com/50x50/4c6aff/000000.png&text=3" data-pic="http://www.dummyimage.com/150x150/4c6aff/000000.png&text=3">
</p>
JAVASCRIPT
$(function() {
$("img").each(function() {
$(this).qtip({
content: {
text: function(api) {
return "<img src='" + $(this).attr("data-pic") + "' class='dit'>";
}
}
});
});
});
CSS
p {
margin-top: 50px;
margin-left: 100px;
}
img {
padding: 10px;
}
.ui-tooltip, .qtip{
max-width: 10000px; /* Change this? */
}
I am using jquery Tiny Carousel for sliding images but our client asks for continuous scrolling in a same direction i searching it for a day and i cant found the exact thing... Did anyone here came across it?
Now i am using this plugin for tinycarousel
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#slider").tinycarousel({ axis: 'x', display: 1, interval: true })
});
</script>
and i found that with this the looping is not possible anyone know how to loop this? or point me an another slider jquery control....
I do this
in jquery.tinycarousel.js Search for function initialize () and replace
iSteps = Math.max(1, Math.ceil(oPages.length / options.display) - iLeftover);
with
iSteps = 9999999999999999999999999;
OR
in jquery.tinycarousel.min.js Search for
u=Math.max(1,Math.ceil(k.length/e.display)-x);
and replace with u = 9999999999999999999999999;
Then
put this code in document ready
$('#slider1').tinycarousel({'display':3});
var SliderLength = $('#slider1 .viewport li').length;//set li or img or what ever
var append = $('#slider1 .viewport > ul').html();//grab the curent items
$('.buttons.next').mouseup(function()
{//next button click event
$('#slider1 ul').append(append);//append those item
var sliderWidth = parseInt($('#slider1 .overview').width());
var curLength = parseInt($('#slider1 li').length);
$('#slider1 .overview').width((sliderWidth * (curLength / SliderLength) ));//update content width
});
Demo
Here is a demo using the jQuery.carouFredSel-plugin
HTML
<div id="wrapper">
<div id="carousel">
<div>
<img src="img/fruit1.png" alt="fruit1" width="200" height="200" />
<span>Apple</span>
</div>
<div>
<img src="img/fruit2.png" alt="fruit2" width="200" height="200" />
<span>Mandarin</span>
</div>
<div>
<img src="img/fruit3.png" alt="fruit3" width="200" height="200" />
<span>Banannas</span>
</div>
<div>
<img src="img/fruit4.png" alt="fruit4" width="200" height="200" />
<span>Cherries</span>
</div>
<div>
<img src="img/fruit5.png" alt="fruit5" width="200" height="200" />
<span>Orange</span>
</div>
<div>
<img src="img/fruit6.png" alt="fruit6" width="200" height="200" />
<span>Melon</span>
</div>
<div>
<img src="img/fruit7.png" alt="fruit7" width="200" height="200" />
<span>Lemon</span>
</div>
<div>
<img src="img/fruit8.png" alt="fruit8" width="200" height="200" />
<span>Grapes</span>
</div>
<div>
<img src="img/fruit9.png" alt="fruit9" width="200" height="200" />
<span>Peach</span>
</div>
<div>
<img src="img/fruit10.png" alt="fruit10" width="200" height="200" />
<span>Pear</span>
</div>
<div>
<img src="img/fruit11.png" alt="fruit11" width="200" height="200" />
<span>Strawberry</span>
</div>
<div>
<img src="img/fruit12.png" alt="fruit12" width="200" height="200" />
<span>Melon</span>
</div>
</div>
</div>
JavaScript
$(function() {
var $c = $('#carousel'),
$w = $(window);
$c.carouFredSel({
align: false,
items: 10,
scroll: {
items: 1,
duration: 2000,
timeoutDuration: 0,
easing: 'linear',
pauseOnHover: 'immediate'
}
});
$w.bind('resize.example', function() {
var nw = $w.width();
if (nw < 990) {
nw = 990;
}
$c.width(nw * 3);
$c.parent().width(nw);
}).trigger('resize.example');
});
CSS
html, body {
height: 100%;
padding: 0;
margin: 0;
}
body {
background-color: #eee;
position: relative;
min-height: 300px;
}
body * {
font-family: Arial, Geneva, SunSans-Regular, sans-serif;
font-size: 14px;
color: #333;
line-height: 22px;
}
#wrapper {
background-color: #fff;
border-top: 1px solid #ccc;
width: 100%;
height: 50%;
margin-top: -1px;
position: absolute;
left: 0;
top: 50%;
}
#carousel {
margin-top: -100px;
}
#carousel div {
text-align: center;
width: 200px;
height: 250px;
float: left;
position: relative;
}
#carousel div img {
border: none;
}
#carousel div span {
display: none;
}
#carousel div:hover span {
background-color: #333;
color: #fff;
font-family: Arial, Geneva, SunSans-Regular, sans-serif;
font-size: 14px;
line-height: 22px;
display: inline-block;
width: 100px;
padding: 2px 0;
margin: 0 0 0 -50px;
position: absolute;
bottom: 30px;
left: 50%;
border-radius: 3px;
}
Try this one
$(function(){
var current = 1;
var totalImages = $("#slider-code li").size();
var oSlider = $('#slider-code').tinycarousel({
animation:false,
controls: false
});
$('#nextButton').click(function(){
current += 1;
if(current > totalImages){
current = 1;
}
oSlider.tinycarousel_move(current);
});
});
and here is the demo in jsfiddler
This is what I coded in a situation like yours. This scrolls up, but you can easily modify it to scroll in any direction. Change the algorithm from marginTop modification to:
marginTop increase by 1, for up to down scroll
marginLeft increase by 1, for left to right scroll
marginLeft decrease by 1, for right to left scroll
(function($)
{
var ScrollMe = function(element)
{
var elem = $(element);
var obj = this;
elem.wrapInner("<div class='mbui_scrollable'></div>");
var scr=elem.children("div.mbui_scrollable");
setInterval($(this).scrollUp,130); //CHANGE HERE FOR SPEED
};
$.fn.scrollme = function()
{
return this.each(function()
{
var element = $(this);
// Return early if this element already has a plugin instance
if (element.data('scrollme')) return;
// pass options to plugin constructor
var myplugin = new ScrollMe(this);
// Store plugin object in this element's data
element.data('scrollme', myplugin);
});
};
$.fn.scrollUp = function(elem)
{
var allObj=$(".mbui_scrollable");
for(i=0;i<allObj.length;i++)
var s=$(allObj[i]).css('marginTop');
var n=parseInt(s)-1; //CHANGE HERE TO CHANGE DIRECTION AND SPEED
var h=$(allObj[i]).css('height');
if((n*-1)>=parseInt(h))
n=$(allObj[i]).parent().css('height');
$(allObj[i]).css('marginTop',n);
};})(jQuery);
Apply to elements like:
$(".scroll").scrollme();
For my iPhone app's website (niwuzzles.com) I used Alen Grakalic's jQuery plugin EasySlider to accomplish this.
Project Description:
http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider
Continuous Slide demo:http://cssglobe.com/lab/easyslider1.7/01.html
Code Example:
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.7.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true
});
});
</script>
</head>
<body>
<div id="slider">
<ul>
<li><img src="img1.png" /></li>
<li><img src="img2.png" /></li>
<li><img src="img3.png" /></li>
<li><img src="img4.png" /></li>
</ul>
</div>
</body>
I made some changes to Tiny Carousel to add looping. I just picked up on some stuff from the timed sliding function.
http://pastebin.com/3M3akv9r
i think it must work
$('#slider1').tinycarousel({start: 2,
interval: true
});
Finally i found the slider here
http://javascript.about.com/library/blcmarquee1.htm
I've been fighting with jQuery all night and getting quite frustrated here, so forgive me if the answer was staring me in the face.
I have a 5x3 grid of 15 images contained within a <div>, and when I click on one of them, I want it to expand to three times its original size of 150x105 and overlap the rest. I've got the expanding down, but the overlapping isn't quite working.
My current HTML:
<div id="image-grid">
<img src="images/after-pictures/1.jpg" class="igc1" />
<img src="images/after-pictures/2.jpg" class="igc2" />
<img src="images/after-pictures/3.jpg" class="igc3" />
<img src="images/after-pictures/4.jpg" class="igc4" />
<img src="images/after-pictures/5.jpg" class="igc5" />
<img src="images/after-pictures/6.jpg" class="igc1" />
<img src="images/after-pictures/7.jpg" class="igc2" />
<img src="images/after-pictures/8.jpg" class="igc3" />
<img src="images/after-pictures/9.jpg" class="igc4" />
<img src="images/after-pictures/10.jpg" class="igc5" />
<img src="images/after-pictures/11.jpg" class="igc1" />
<img src="images/after-pictures/12.jpg" class="igc2" />
<img src="images/after-pictures/13.jpg" class="igc3" />
<img src="images/after-pictures/14.jpg" class="igc4" />
<img src="images/after-pictures/15.jpg" class="igc5" />
</div>
The igc* class denotes the column the image is in.
CSS:
#image-grid {
border: 1px solid #aaa;
width: 745px;
padding: 5px 2px 2px 5px;
}
#image-grid img {
width: 150px;
height: 105px;
margin: -2px;
}
jQuery:
$('#image-grid img').click(function() {
$(this).animate({
width: '450px',
height: '315px',
zIndex: '10'
}, 200);
});
somewhat like this...
$('#image-grid img').click(function () {
$(this).animate({
width: '450px',
height: '315px'
}, 200)
.css({
'z-index': function (i, z) {
return z + 10;
}, position: 'absolute',
left: 0,
top: 0
})
.siblings().css({
'z-index': function (i, z) {
return z - 10;
}, position: 'static',
width: '150px',
height: '105px',
left: 'auto',
top: 'auto'
});
});
let me know what's the effect..
It could be that you're trying to apply a z-index to elements which have not been given the position absolute property also?