I have a gallery with thumbnails,
After I hover on thumbnail the main photo is changing to the hovered one.
But I need help with magnifying the main photo.
I tried many free magnify scripts but none of them worked well.
Always when I hovered on any other thumbnail and then again on the main photo it showed the previous one or didn't work.
HTML
<div class="imgBox"><a href="big/default1.png">
<img src="small/default1small.png" class="zoom"/>
</a></div>
<ul class="thumb">
<li>
<a onclick="return false" target="imgBox" href="small/default1small.png">
<img src="small/default1small.png"/>
</a>
</li>
<li>
<a onclick="return false" target="imgBox" href="small/default2small.png">
<img src="small/default2small.png"/>
</a>
</li>
</ul>
JS with JQUERY
$(document).ready(function(){ $('.thumb a').mouseover(function(e){
e.preventDefault();
$('.imgBox img').attr("src", $(this).attr("href"));
$('.imgBox a').attr("href", $(this).attr("href"));
$('.imgBox a .magnify .magnify-lens').css("background","url('$(this)') 0px 0px no-repeat");
})
})
After I hover on thumbnail and again hover on the main photo I expect it to magnify properly
https://codepen.io/anon/pen/zgxaRX
Related
I created a thumbnail slider with bxSlider pagerCustom. Thumbnails do not fit in the slider. I need to make the thumbnails a carousel.
I have 15 pictures and 15 thumbnails for them and the picture slide works like a carousel and I need the thumbnails to work the same way
How should I do it?
`js
$(document).ready(function() {
jQuery('.bxslider').bxSlider({
nextText: '',
prevText: '',
pagerCustom: '#bx-pager',
});
});
`
<div class="product3_slider">
<div class="slider3">
<ul class="bxslider">
<li><img src="https://static.mikrotik.group/image/trm240.jpg" /></li>
<li><img src="https://static.mikrotik.group/image/trm240back.jpg" /></li>
</ul>
</div>
<div id="bx-pager">
<a data-slide-index="0" href=""><img src="https://static.mikrotik.group/image/trm240small.jpg" /></a>
<a data-slide-index="1" href=""><img src="https://static.mikrotik.group/image/trm240backsmall.jpg"/></a>
</div>
</div>
I tried to find examples where there are a lot of pictures with thumbnails, but I did not find such examples.
On hover of an <a> the next div fadein and mouseleave on div this div fade out but when div fade in and drag my mouse on dive it will go fade out
jQuery('.share_link').hover(function(event) {
event.stopPropagation();
jQuery(this).next('.quick-view-share').stop().fadeIn();
}, function(event) {
event.stopPropagation();
jQuery(this).next('.quick-view-share').not().fadeOut();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a target="_blank" href="javascript:void(0);" class="share_link"></a>
<div class="quick-view-share" style="display: none;">
<a class="facebook" href="#" title="Share on Facebook"> Face Book</a>
<a class="twitter" href="#" title="Tweet"> Twittter</a>
<a class="google-plus" href="#" title="Share on Google Plus"> G Plus </a>
</div>
The issue is because the hover logic is attached to the a element. Therefore as soon as you leave the a to select something from the displayed div, it immediately disappears.
To solve this you could amend your HTML to hook the events to a containing element. Alternatively you can utilise CSS to make the hover logic work for both elements by using CSS's adjacent sibling operator, +:
a.share_link + .quick-view-share {
position: absolute;
opacity: 0;
transition: opacity 0.4s;
}
a.share_link:hover + .quick-view-share,
a.share_link + .quick-view-share:hover {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a target="_blank" href="#" class="share_link">Share</a>
<div class="quick-view-share">
<a class="facebook" href="#" title="Share on Facebook"> Face Book</a>
<a class="twitter" href="#" title="Tweet"> Twittter</a>
<a class="google-plus" href="#" title="Share on Google Plus"> G Plus </a>
</div>
i have jquery slider. this slider has images and thumb nails of those images. i would like to replace images and thumbnails respectively which comes from jquery ajax call.
this is my slider code:
<ul id="thumbs" class="slides">
<li id="firstthumb" data-thumb="images/s/img8.jpg">
<img id="firstimage" src="images/s/img8.jpg" />
</li>
<li id="secondthumb" data-thumb="images/s/img10.jpg">
<img id="secondimage" src="images/s/img10.jpg" />
</li>
<li id="thirdthumb" data-thumb="images/s/img9.jpg">
<img id="thirdimage" src="images/s/img9.jpg" />
</li>
<li id="fourththumb" data-thumb="images/s/img11.jpg">
<img id="fourthimage" src="images/s/img11.jpg" />
</li>
<li id="fifththumb" data-thumb="images/s/img3.jpg">
<img id="fifthimage" src="images/s/img3.jpg" />
</li>
</ul>
I have replaced images with following code:
$('#firstimage').attr('src', message[22]);
$('#secondimage').attr('src', message[23]);
$('#thirdimage').attr('src', message[24]);
$('#fourthimage').attr('src', message[25]);
$('#fifthimage').attr('src', message[26]);
here message[22]... are urls of images. its working perfectly. but i don't know how to replace thumb nails images. give me some idea. thank you.
Can you try this,
$('#firstimage').attr('src', message[22]).data('thumb', message[22]);
Try this
$('#firstthumb').data('thumb', message[22]);
OR
$('#firstthumb').attr('data-thumb',message[22]);
I am using photoswipe to show my gallery when clicking on a item.
My markup:
<ul id="gallery_mobile_about">
<li>
</li>
<li>
<a href="/files/uploads/Figues-de-Moro.jpg" style="background-image: url('/files/uploads/Figues-de-Moro.jpg');" data-iframe="" data-pos="1" data-url="/files/uploads/Figues-de-Moro.jpg" class="gallery-item ui-link">
</a>
</li>
<li>
<a href="/files/uploads/Cala-Deià-50x30cm1-1024x782.jpg" style="background-image: url('/files/uploads/Cala-Deià-50x30cm1-1024x782.jpg');" data-iframe="" data-pos="2" data-url="/files/uploads/Cala-Deià-50x30cm1-1024x782.jpg" class="gallery-item ui-link">
</a>
</li>
<li>
<a href="/files/uploads/Deia-Church-on-Cala-rock.jpg" style="background-image: url('/files/uploads/Deia-Church-on-Cala-rock.jpg');" data-iframe="" data-pos="3" data-url="/files/uploads/Deia-Church-on-Cala-rock.jpg" class="gallery-item ui-link">
</a>
</li>
</ul>
The js:
$(document).ready(function(){
var myPhotoSwipe = $("#gallery_mobile_about a").photoSwipe(
{ enableMouseWheel: false ,
enableKeyboard: false }
);
});
The problem is that even that the gallery seems to load, as a backgound i see a white page with the text 'undefined' and on closing the galler page will stay as this white page (is not returning to the original view)
The result (hit on a image where it says 5 items in gallery): http://deia.info/m/?lan=2&task=view_post&catid=14&blogid=25
What am I seem to be missing here?
Adding rel="external" solved this
I allready have the attribute rel="external" and trying things this works for me.
var myPhotoSwipe = $("#Gallery a").photoSwipe({
//your others attributes
target: 'html'
});
I want to create a menu in my web page, where each list item is represented by image. When mouse point at some of these images, this image should fade out and be replaced by another image (I think fadeIn() would be useful).
HTML code:
<ul id="buttons">`
<li><a href="#" onmouseover="change(1)" onmouseout="ret(1)">
<img src="button01.png" id="button01_1" />
<img src="button01_hover.png" id="button01_2"/>
</a></li>
<li><a href="#" onmouseover="change(2)" onmouseout="ret(2)">
<img src="button02.png" id="button02_1" />
<img src="button02_hover.png" id="button02_2"/>
</a></li>
</ul>
jQuery - I´m new in using jQuery, I tried this, but there are many mistakes. Pictures are not changing properly - "fadeIn" picture changes position (every list item is absolutely positioned), and first image is disapperaing and appearing constantly. Here´s the code:
function change(i)
{
switch(i)
{
case 1:
$("#button01_1").fadeOut(500);
$("#button01_2").fadeIn(500);
break;
case 2:
$("#button02_1").fadeOut(500);
$("#button02_2").fadeIn(500);
}
}
(ret(i) is similar..)
Thanks for help..
You're nearly there but i can simplify:
<ul id="buttons">
<li>
<a href="#" id="link1">
<img src="button01.png" id="button01_1" />
</a>
</li>
<li>
<a href="#" id="link2">
<img src="button02.png" id="button02_1" />
</a>
</li>
</ul>
jQuery code:
$('#link1').hover(function(){
$('#button01_1').fadeOut(500).attr('src','button01_hover.png').fadeIn(500);
},function(){
$('#button01_1').fadeOut(500).attr('src','button01.png').fadeIn(500);
});
With the selectors you could remove the id button01_1 and replace the jQuery selector to $('img','#link') to accommodate.
sorry if I've used too much of the jQuery library than javascript.
Function explained:
$('#link1').hover(function(){ --initial function on hover-- },function(){ --coming out of the hover-- });
EDIT :
jQuery library : <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Add the library to your html page
I think the problem is the fact that fading out an image also triggers a mouseout, (since it has display:none once the fade out completes), which in turn triggers a fade in, and so on. Consider rethinking your logic.
Updated:
use like this :
<ul id="buttons">
<li><a href="#" onmouseover="change($(this),1)" onmouseout="ret($(this),1)">
<img src="button01.png"/>
</a></li>
<li><a href="#" onmouseover="change($(this),2)" onmouseout="ret($(this),2)">
<img src="button02.png"/>
</a></li>
</ul>
jquery :
function change(elem ,i){
$(elem).find('img').fadeOut('500',function(){
$(this).attr('src','button0'+i+'_hover.png').fadeIn('2000');
});
}
function ret(elem ,i){
$(elem).find('img').fadeOut('500',function(){
$(this).attr('src','button0'+i+'.png').fadeIn('2000');
});
}
I hope that work ...