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.
Related
I really like this slider sample HERE!. But I want to do is assign next/previous onclick command on images display on right side like this:
Instead of clicking those DOTS. I want to assign the onclick EVENT on images(RED BOXES).
How can I tweak that one.
Thank you in advance!
I've simply changed the $navDots variable to point to the images on line 90 of js.
var navDots = $('.nav-images');
this.$navDots = navDots.children( 'img' );
Then use this HTML:
<div class="nav-images">
<img src="http://lorempixel.com/400/200/city" alt="img01" width="100px"/>
<img src="http://lorempixel.com/400/200/business" alt="img02" width="100px"/>
<img src="http://lorempixel.com/400/200/technics" alt="img03" width="100px"/>
<img src="http://lorempixel.com/400/200/people" alt="img04" width="100px"/>
<img src="http://lorempixel.com/400/200/nature" alt="img05" width="100px"/>
<img src="http://lorempixel.com/400/200/sports" width="100px"/>
</div>
Hope it helps! Please see codepen example as well!. http://codepen.io/anon/pen/corjw
Disclaimer
Please do link to the non-minified source of the plugin, so you can modify that file directly. Currently, the plugin handles all the elements inside the #cbp-fwslider area. It may not be advisable to hack from outside, which is what this solution is...
Solution
It looks like you can mimic this by hiding the dots (which is what the plugin uses by default) and using your two elements to trigger click events on the dots. The currently active dot is indicated by a cbp-fwcurrent, so something like $('#cbp-fwslider .cbp-fwdots .cbp-fwcurrent') would select the current dot. Use jQuery's next() and prev() calls check if the relevant dot exists, and then do a $el.trigger('click').
Code Outline (untested)
$('#fwdButton').click(function() {
var $dot = $('#cbp-fwslider .cbp-fwdots .cbp-fwcurrent'),
$nextDot = $dot.next();
if ($nextDot) {
$nextDot.trigger('click');
}
});
`
Plugin portfoliojs was my choice for creating a carousel-style portfolio. However, I have discovered that there is no zoom functionality built into the plug in. Due to relative complexity of the jquery code, I am at a loss how to manually add zoom (more precisely, fancybox) functionality to the gallery. The "lightbox=true" initialization option merely dims the other images in the gallery, but does not zoom the image of choice.
Ideally, I would like to add fancybox functionality to my gallery, e.g. my html would look like this:
<div id="gallery">
<img src="someimage.jpg></img>
<img src="someimage2.jpg></img>
</div>
However, the gallery in portfoliojs only works when is child element of ( with no level in between):
<div id="gallery">
<img src="someimage.jpg></img>
<img src="someimage2.jpg></img>
</div>
I have tried to wrap the <img>elements into <a> but it did not work.
Is there a way I could combine the functionality of two plugins ( portfoliojs and fancybox) without significant code rewriting? What would the alternative be?
This is what I would do.
Having an html like this :
<div id="gallery">
<img src="images/01.jpg" alt=""/>
<img src="images/02.jpg" alt=""/>
</div>
where src attribute points to the image to be shown in fancybox, use this code :
var images = [];
$("#gallery").find("img").each(function(i){
images[i] = $(this).attr("src");
$(this).bind("click", function(){
$.fancybox(images,{
index: i
});
})
});
See JSFIDDLE
NOTE: You could use .on() (preferred) instead of .bind() :
$(this).on("click", function(){ ...
it requires jQuery 1.7+ though. See updated JSFIDDLE
im using the "CREATE IMAGE GALLERY IN 4 LINES OF JQUERY" (link below), which works just fine.
But i like to make the large images clickable (not just the thumbs), so that when i click on which ever image that is showing as the large image, another bigger version of the image opens in a new window.
http://workshop.rs/2010/07/create-image-gallery-in-4-lines-of-jquery/
Any ideas is greatly appreciated. Thank you.
You can wrap the large image in an anchor element:
<div id="panel">
<a href="images/image_01_largest.jpg" target="_blank">
<img id="largeImage" src="images/image_01_large.jpg" />
</a>
<div id="description">First image description</div>
</div>
This follows the convention that one image comes in three sizes: *_thumb.jpg, *_large.jpg, and *_largest.jpg. All you need to do now is change anchor's href attribute when changing #largeImage's src.
$('#thumbs img').click(function(){
$('#largeImage').attr('src', $(this).attr('src').replace('thumb', 'large'));
$('#largeImage').parent().attr('href', $(this).attr('src').replace('thumb', 'largest'));
$('#description').html($(this).attr('alt'));
});
Hi you may try with the Pretty photo plugin for displaying the gallery in the light box. Demo for Preety Photo.This may help you
I would like to know the best way to add a next and back button to click through my images. The images currently scroll left & right when you roll over a hotspot.
I have tried adding anchors to images, which works but is a bit messy.
Here is my code:
<div class="scrollWrapper" >
<div class="scrollableArea" >
<div class="boxer">
<img src="img/apples" />
</div>
<div class="boxer">
<img src="img/apples" />
</div>
<div class="boxer">
<img src="img/apples" />
</div>
</div>
</div>
Easiest way is to use a plugin to handle your slideshow, I like Malsup's cycle plugin, here's an example of what you're trying to do: http://jquery.malsup.com/cycle/int2.html
Instead of using a plugin, read this: http://blog.wearelaunchbox.com/?p=1029
This is great tutorial on how to make your own slider that you're talking about with very little jQuery. Let me know if this helps.
EDIT: Here is a jsfiddle running the right function how you want it, reworked from the tutorial.. You can take this code and rewrite the same function to make it go the other way.
http://jsfiddle.net/Ug3fu/3/
Trying to write a small function that updates a paragraph with an image's alt text. the .active class is the image being viewed. I'll launch this function on doc.ready and under a few .click events. Here's what i've got with no results:
$("#title").text($('.z.active').attr('alt', ''));
Thanks for your help!
This illustrates the basics of the jQuery in question. I assume you can handle the click events.
HTML:
<div class="z">
<img class="active" alt="foobar" src="http://placehold.it/350x150"/>
</div>
<div id="title"></div>
Javascript:
$("#title").text($('.z .active').attr('alt'));
Check it out on JSFiddle.