I have been trying to get modal with sliding effect and zoom in when hovering over but no luck as yet, But I managed to get to a point that picture pops up when clicking on it. This is a similar site http://www.garysheng.com/(Photo section). Please see the Codepen https://codepen.io/rranssa/pen/LYVyooe.
You can use lightGallery
It is simple and you don't have to implement it by yourself,
all you need to do is to add mentioned link in documentation and then use it like below:
<div id="lightgallery">
<a href="img/img1.jpg">
<img src="img/thumb1.jpg" />
</a>
<a href="img/img2.jpg">
<img src="img/thumb2.jpg" />
</a>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#lightgallery").lightGallery();
});
</script>
You can enable and disable options by passing an object to it like this:
$('#lightgallery').lightGallery({
mode: 'lg-fade',
cssEasing : 'cubic-bezier(0.25, 0, 0.25, 1)'
......
});
all options are available in link below:
https://sachinchoolur.github.io/lightGallery/docs/api.html
Related
Hello stackoverflow community. I am using lightGallery plug-in and have a problems with making it running with external kind of button in my case anchor tag, can you suggest what have i done wrong or maybe any other way to get it working right.
HTML
Enter full screen view
<div class="owl-carousel" id="selector1">
<div class="item" data-src="img/1.jpg" name="fullscreen"><img src="img/1.jpg">
</div>
JavaScript
$(document).ready(function() {
$("#lightgallery").lightGallery();
});
$('#selector1').lightGallery({
selector: '.item'
});
lightGallery plug-in: http://sachinchoolur.github.io/lightGallery/docs/#installation
Here are some things that might/will cause problems:
The href attribute does not work like that. The link will just open another website. Instead you need to execute some javascript to activate the fullscreen mode, when the link is clicked.
You have two opening <div> tags, but only one closing. Also, you should close the <img> tag.
You probably want all of your posted javascript in the $(document).ready(function() {}); function
There is no element with the id lightgallery.
I don't know anything about the data-src attribute.
This should fix most of the problems, however it will not enable the fullscreen functionality:
html
<div class="owl-carousel" id="lightgallery">
<div class="item" data-src="img/1.jpg">
<img src="img/1.jpg" />
</div>
</div>
javascript
$(document).ready(function() {
$('#lightgallery').lightGallery({
selector: '.item'
});
});
I'm using Jquery Rondell plugin for thumbnail carousel as following:
<div id="rondellCarousel">
<a target="_blank" rel="rondell" href="image/US.png" title="...">
<img src="image/US.png" alt="Band" title="Click to enlarge">
<h5>Awesome concert</h5>
<p>My favourite band.</p>
</a>
</div>
<script type="text/javascript">
$(function () {
$("#rondellCarousel").rondell({
preset: "carousel"
});
});
</script>
The result shows only one image correctly. However, when adding multiple sources as following
<div id="rondellCarousel">
<a target="_blank" rel="rondell" href="image/US.png">
<img src="image/US.png" alt="Band" title="Click to enlarge">
<h5>Awesome concert</h5>
<p>My favourite band.</p>
</a>
<a target="_blank" rel="rondell" href="image/US2.png">
<img src="image/US2.png" alt="Band" title="Click to enlarge">
<h5>Awesome concert</h5>
<p>My favourite band.</p>
</a>
</div>
The second image is not shown in the navigation carousel and instead, when I click on the only image shown in the navigation carousel two images are shown in the appearing lightbox.
Ok, this is weird. after some trial and error, I found that there is a problem with the Git version. I have downloaded the library again from a different source (their own website) and it worked!
#fareed I'm the developer of the plugin. Could you tell me which version you used initially and which one you use now?
You can find the information at the top of the js file.
Before posting here i was testing over 30 or so Jquery image plugins to make my images appear full width when clicked on.
the structure of the HTML is as follows:
<div class="whatever">
<img id="noonecares" src="pff"></img>
</div>
and not
<img ></img>
I'm not talking about zooming in the photos but displaying the whole image onclick instead
I'm looking for a Jquery solution preferably.
The solutions that i've been looking into are: zoomfancy easyzoom ajaxzoom ...
Thank y'all
If you just want a simple inline image expander then jQuery's toggleClass() is perfect for that. You shrink the images to a fixed size with CSS and then toggle it with a click.
DEMO
Something like
<div>
<img src="http://t1.gstatic.com/images?q=tbn:ANd9GcRvA_rqizvEgVJhJwLbpgMz7CgGwnjW5BlXHrBNzRwRXsq7O3Gi" />
</div>
script
$("div").on("click", function() {
window.open($("img").attr("src"), "_blank", "menubar=1,resizable=1");
});
?
jsfiddle: http://jsfiddle.net/chrisbenseler/6GW6M/
This is my approach.
<div class="whatever">
<img id="noonecares" src="http://imagizer.imageshack.us/v2/100x75q90/21/0ss1.jpg"></img>
</div>
Script
$('.whatever').on('click','#noonecares', function(){
window.open($(this).attr('src'));
});
JSfiddle: http://jsfiddle.net/hFp6z/
UPDATE: If you want a plugin to zoom full size, then you can check fancybox or lightbox.
I am developing a page in JSP. It has 3 components: Header, Content and Footer. I want that when this page loads the Content part should be fade in to default content i.e. the Home Page, which contains button for register, login and site credits. When user clicks register button, the content in Content part should fade out and vanish and then content of register form should fade in and get displayed. Same for other buttons, but there should not be any change in header and footer. Please help!!!
With use of jQuery... You have working example there...
I'd recommend using a JavaScript library to achieve this.
jQuery has built in fading abilities.
<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" />
With the element initially hidden, we can show it slowly:
$('#clickme').click(function() {
$('#book').fadeIn('slow', function() {
// Animation complete
});
});
Using JQuery, you can hide a div by using a selector and the hide() method. For example:
<html>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
function swap_divs() {
$("#div_to_hide").hide();
$("#div_to_show").show();
}
</script>
<body>
<div id="div_to_hide">
Some text for div to hide
</div>
<div id="div_to_show" style="display: none;">
Some text for div to show
</div>
<button onClick="swap_divs();">Click me</button>
</body>
</html>
If you look at the JQuery website you can find more example and extensive documentation. Also for fading in/fading out.
I have the standard setup of one main image and multiple thumbnails which can be cliced to change the main image. I'm using jqzoom on the main image but was having the common problem of the main image changing and the zoomed image just going blank. Looking through stack overflow i found some code that claimed to correct this, and in a way it does. But rather than allow each changed image to have a zoom, it makes the main image just a link to the large version, bypassing the jqzoom function call.
to show the two examples:
with the standard jqzoom code and thumbnails not showing zooms:
http://designerspider.net/clients/jge/project2.php?id=17
with added code and images just becoming links:
http://designerspider.net/clients/jge/project.php?id=17
the code i added was
$(".thumbs a").click(function(){
$(".jqclass").unbind();
$(".jqclass").jqzoom(options);
return false;
};
if anyone can see if i have missed anything, or need to do it a diffferent way, i'd appreciate any and all advice. I can't understand why adding the extra function would disable the main jqzoom feature :/
You may find, because you are using two functions side by side, one to change images, and the other to unbind the zoom function, and then rebind it, the 2nd function is finishing before the image has changed. So when the image does change, it still won't work.
Second problem, you are not actually unbinding anything.
So, try firstly changing to:
$(".jqclass").unbind(".jqclass");
Alternatively you could migrate a little more to jQuery. I have tested this:
You HTML would look like this:
<div class="projectphotos">
<div id="photo_1">
<a href="http://designerspider.net/clients/jge/projects/h07_03_11_12_10_58.jpg" class="jqclass">
<img src="http://designerspider.net/clients/jge/projects/h07_03_11_12_10_58.jpg" class="projectimg2" alt="Mid 15th C Oakeshott Type XXa" />
</a>
</div>
<div id="photo_2" style="display:none;">
<a href="http://designerspider.net/clients/jge/projects/h07_03_11_12_19_49.jpg">
<img src="http://designerspider.net/clients/jge/projects/h07_03_11_12_19_49.jpg" class="projectimg2" alt="Mid 15th C Oakeshott Type XXa" />
</a>
</div>
<div class="thumbsdiv">
<ul class="thumbs">
<li>
<img rel="photo_1" src="http://designerspider.net/clients/jge/projects/h07_03_11_12_10_58.jpg" width="80" />
</li>
<li>
<img rel="photo_2" src="http://designerspider.net/clients/jge/projects/h07_03_11_12_19_49.jpg" width="80" />
</li>
</ul>
</div>
</div>
And your jQuery like this, I've explained each line:
var options = {
zoomWidth: 250,
zoomHeight: 250,
position: 'right',
yOffset: 0,
xOffset: 0,
title: false
}
$(".jqclass").jqzoom(options);
// Make the thumbnail look clickable:
$(".thumbs img").each(function() {
$(this).css('cursor', 'pointer');
});
// React to clicking on a thumbnail:
$(".thumbs img").click(function() {
// Get the photo linked to:
var photo = $(this).attr('rel');
// Unbind the zoom:
$(".jqclass").unbind(".jqclass");
// Hide the current image via its parent DIV:
$(".jqclass").parent().hide();
// Remove teh jqclass:
$(".jqclass").removeClass("jqclass");
// Show the clicked photo:
$("#"+photo).show();
// Add the class and the zoom:
$("#"+photo+" a").addClass("jqclass").jqzoom(options);
});
This is how you can clean the data from jQZoom:
$('.jqclass').removeData('jqzoom');
Because jQZoom saves the object data the following way:
$(el).data("jqzoom", obj);