Develop Reference

How should I not load the images with broken link?

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.

Trouble with easyzoom jquery plugin

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/

Javascript: image onclick then slide big image

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');
}
});
`

Is it possible to add fancybox to portfoliojs image gallery?

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

change the opacity of another image inside of another div by hovering over another div image

Is this too complicated to achieve? Hopefully my question or title makes sense. Essentially I have two divs - one is and the other is . I have 12 images inside of each div that I thought I attached IDs to. I'm still much of a noob to web coding so perhaps I'm labeling them wrong. But here's my goal, whenever you hover over artwork1, the opacity of artwork1 and button1 should change simultaneously. And the effect needs to be achieved the other way as well (ie hover:button1 should change the opacity of artwork1). Below is my code to explain my case further:
<html>
<body>
<div id="buttons">
<img src="..." class="spaced"(to spaced the buttons)>
<img src="..." class="spaced">
<div id="artwork">
<img src="..." class="mainbuttons & greydout"
<img src="..." class="mainbuttons & greydout">
The 'mainbuttons' class is for spacing between the 12 images. And the greydout class is to alter the hover effect already in place - going from opacity 0.3 to 1.
I've tried to research some javascript as I'm thinking that's the most proper solution. My javascript I've tried to use is as follows:
$(document).ready(function() {
$("#button1").mouseenter(function(){
$("#artwork1").addClass("opac_art");
});
$("#button1").mouseleave(function(){
$("#artwork1").removeClass("opac_art");
$("#artwork1").addClass("greydout")
});
});
One more thing to consider is that I have multiple scripts running for various functions:
1) a redirect script that will redirect mobile viewers to the mobile site;
2) a respond script that reformats the viewport to whatever the viewer's resolution browser size is set to.
I have the jQuery loaded up at the top of the document, but could there be conflict with the other scripts running on the html page?
I've even tried going the CSS route and I can barely get the divs to interact with each other. The closest I've come is when I hover in the button div, I can alter artwork 1, but not as specific as I'm aiming for. I hope all this makes sense, and thanks in advance for reading all this and trying to help me through this huge roadblock to getting my site up.

Try something like this.
Add a class to your buttons (galleryButtons) and to your images in the other div.
First of you do not really need the wrapping with the a tag
Add classes to your button elements and artwork.
<div id="buttons">
<img id="gbutton1" class="galleryButtons" src="button.png" />
<img id="gbutton2" class="galleryButtons" src="button.png" />
<div id="artwork">
<img id="artwork1" class="artworkImage" src="art1.jpg" />
<img id="artwork2" class="artworkImage" src="art2.jpg" />
$(document).ready(function () {
var intID;
$(".galleryButtons").hover(function (e) {
console.log(e.target.id);
var id = e.target.id;
intID = id.replace(/^\D+/g, '');
$("#artwork" + intID).addClass("opac_art");
}, function () {
$("#artwork" + intID).removeClass("opac_art").addClass("greydout");
});
$(".artworkImage").hover(function (e) {
var id = e.target.id;
intID = id.replace(/^\D+/g, '');
$("#gbutton" + intID).addClass("opac_art");
}, function () {
$("#gbutton" + intID).removeClass("opac_art").addClass("greydout");
});
});
All for you in a fiddle: http://jsfiddle.net/djwave28/et6tD/4/
It can be made simpler with selecting smarter, but I wanted you to see the relation in the element better. When you hover over an element, the element that causes the event is send to the function. This event contains information. Like e.target.id will hold the id of that element.
http://www.w3schools.com/jsref/dom_obj_event.asp

From what I'm understanding of your question, you could do something like this:
$(document).ready(function()
{
$("#one").hover(function()
{
// Changes the opacity of the first image
// as well as the corresponding link from
// 1 to 0.3.
$("#artone").css({ "opacity": "0.3" });
$(this).css({ "opacity": "0.3" });
});
$("#two").hover(function()
{
$("#arttwo").css({ "opacity": "0.3" });
$(this).css({ "opacity": "0.3" });
});
});
And the HTML would look something like this:
<div id="links">
Link one
Link two
</div>
<div id="artwork">
<img src="" id="artone" class="spaced">
<img src="" id="arttwo" class="spaced">
</div>
Couple extra things -
Make sure you actually link jQuery into your page's header, I didn't see it above:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
That's from Google's CDN, but you can do it locally, of course.
<img src="#" class="mainbuttons & greydout">
When listing classes for an element, you don't add an ampersand (&), you just leave them with a space in between.
<img src="#" class="mainbuttons greydout">