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
Related
I'm working on a feature, in which images are being rendered from the servers. I was working on aligning the images but found that there is a lot of white space. This was the reason, due to loading of images with a broken link.
HTML :
<div class="image-result" *ngIf="Display('images')">
<div class="col-sm-3" *ngFor="let item of items$|async">
<a href="{{item.link}}">
<figure>
<img class="res-img" src="{{item.link}}" onerror="this.style.display='none'">
</figure>
</a>
</div>
</div>
I have used onerror="this.style.display='none'" to solve the problem, but leaves a lot of white space when images are being loaded from the server. Is there any solution for it like to remove img tag whenever a image with a broken link has been detected ? I have gone through stackoverflow before asking question, but I'm not able to solve this problem. It would be great if someone can help me out. Thanks! :)
Instead of onerror="this.style.display='none'" to hide an image, you can use onerror="this.parentNode.removeChild(this)" to remove the image tag altogether.
If you want to remove the entire column, in your specific case you can do the following.
var colEl = this.parentNode.parentNode.parentNode;
colEl.parentNode.removeChild(colEl);
Or, in your HTML:
onerror="this.parentNode.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode.parentNode)"
You should probably move that to some JavaScript function and attach your handler by saying
element.addEventListener('error', function() { /* ... */ });
References: parentNode, removeChild, addEventListener.
If you don't care about supporting Internet Explorer, you can also use remove instead of doing the parentNode.removeChild trickery. That would be particularly useful for reducing the code length in your onerror attribute, would you choose to use it, but I don't recommend that.
A more angular-way of doing this would be:
<img src="{{item.link}}" (error)="item.brokenImage=true">
So you would have:
<div class="col-sm-3" *ngFor="let item of items$|async">
<div *ngIf="!item.brokenImage">
<a href="{{item.link}}">
<figure>
<img class="res-img" [src]="item.link" (error)="item.brokenImage=true">
</figure>
</a>
</div>
</div>
You need to listen for the error event of the image element, and assign a boolean on whether the image loaded successfully or not. Then, depending on that value angular will either show the image with the div, or remove it from the DOM.
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 working on an image gallery with a zoom feature, but when I change images the zoom is not picking up the change. This is the first time I have ever used a jquery plugin so I am probably just needing a nudge in the right direction.
The problem is when I try to us the .swap() I am getting
TypeError: $easyzoom.swap is not a function
The API ref has this
.swap(standardSrc, zoomSrc)
Easily switch the standard and zoom image sources.
I am using EasyZoom http://i-like-robots.github.io/EasyZoom/
Code is pretty simple, zoom works on initial image, but when image swaps, zoom is still using original image. .swap() should take care of it, but for some (likely very simple) reason I can't get it to work.
HTML:
<div id="mview">
<div class="easyzoom easyzoom--overlay">
<a href="/media/test/IMG_20130403_084209_183.jpg" id="zoomsrc">
<img src="/media/test/sm_IMG_20130403_084209_183.jpg" width="349" id="zoomview" />
</a>
</div>
<!------>
<div id="imgbar">
<img src="/media/test/tn_IMG_20130403_084209_183.jpg" width="60" />
<img src="/media/test/tn_IMG_20130403_091502_782.jpg" width="60" />
<img src="/media/test/tn_IMG_20130403_091511_640.jpg" width="60" /></div>
</div>
Javascript
$(document).ready(function() {
var $easyzoom = $('.easyzoom').easyZoom();
$("#imgbar img").click(function(e) {
var bigImg=this.src.replace("tn_","sm_");
var bigImgSrc=this.src.replace("tn_","");
$("#zoomview").attr("src",bigImg);
$("#zoomsrc").attr("href",bigImgSrc);
console.log($easyzoom.data('easyzoom'));
// $('.easyzoom').swap(bigImg,bigImgSrc); //tried this too
$easyzoom.swap(bigImg,bigImgSrc);
});
});
Thanks for your time looking at this
M
You're not accessing the EasyZoom API. Each instance is saved via jQuery's internal storage to the target element and can be accessed like so: $easyzoomElement.data("easyZoom")
I've updated your example code (http://jsfiddle.net/spidre409/6Z89g/) here: http://jsfiddle.net/6Z89g/2/
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');
}
});
`
So I am designing a website, and I want to be able to have each companies logo via an Image called via XHTML 1.0 Transitional fade in upon mouseover and fade out when no longer mousing over. I have jQuery installed and what not, I just don't know the code to this for each image or one image alone. I don't know JavaScript and or jQuery.
Thank you very much for future answers (and possible explanations),
Aaron Brewer
You need a container for each image, otherwise there will be no element to trigger the mouse over when the image has faded out.
HTML
<div class="img-container">
<img src="a.jpg" alt="a" />
</div>
<div class="img-container">
<img src="b.jpg" alt="b" />
</div>
<div class="img-container">
<img src="c.jpg" alt="c" />
</div>
jQuery
$('.img-container').each(function() {
// Get a reference to the image.
var img = $(this).find('img');
// Hide by default.
img.hide();
$(this).hover(function() {
img.stop().fadeIn(500);
}, function() {
img.stop().fadeOut(500);
});
});
perhaps this little live demo will get you in the right direction as it uses both CSS3 and jquery to do the fading, so if one fails, the other can take over. http://jsfiddle.net/robx/jrnFj/2/