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.

Flex Slider Seems to Load Before CSS

I'm using FlexSlider in what seems like a pretty simple manner. However, after it reaches the final slide and loops back to the first slide, the content seems to "snap" into place, as though the slider loaded prior to the CSS.
Here's a stripped down example:
http://aj2.w-interactive.com/mds-slider-test2.html
You'll notice that after the slider loops back around from the third slide (you need to watch it go all the way through), the text in the first slide (where it says "We Deliver Your Trust" etc...) initially loads without the styles, then sort of "jumps" down into place, as though the styles finally loaded for it. But the first time it loads up, before looping through, it's totally fine.
Here's the script from the bottom of the page:
<!-- FlexSlider -->
<script defer src="assets/js/jquery.flexslider.js"></script>
<script type="text/javascript">
$(function(){
SyntaxHighlighter.all();
});
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
slideshowSpeed: "4500",
pausePlay: "true",
start: function(slider){
$('body').removeClass('loading');
}
});
});
</script>
Any ideas would be appreciated. Thanks!

Your CSS is not being applied correctly because you have multiple elements with the same ID.
Reference: http://www.w3schools.com/tags/att_global_id.asp
"The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document)."
You have this in your sample HTML
<li>
<div id="slides" class="bkgd1">
<h1 class="fade">We Deliver Your Trust</h1>
<h1 class="fade">Intermodal Drayage</h1>
<h2 class="fade">Centrally Located Terminals</h2>
<h2 class="fade">9 Locations Covering North America</h2>
</div>
</li>
<li>
<div id="slides" class="bkgd2">
<h1 class="fade">Rail & Steamship Interchange</h1>
<h2 class="fade">Fully Customs Bonded</h2>
</div>
</li>
<li>
<div id="slides" class="bkgd3">
<h1 class="fade">Dedicated Fleet & Preferred Network</h1>
<h2 class="fade">Real Time Dispatch Technology</h2>
<h2 class="fade">Instant Proof of Delivery</h2>
</div>
</li>
And this in your CSS
#slides h1
Change these ID's to classes (like this)
<div class="slides bkgd1">
<div class="slides bkgd2">
<div class="slides bkgd3">
And change your CSS selectors accordingly
.slides h1
And then it should work.
More Detail
FlexSlider creates clones of your <div> elements to allow for smooth cycling and repeating. When it creates the clones, it copies the ID from the original and appends "_clone" to the end of it. This is actually what you see when you go back to the first slide after cycling through. Therefore, your CSS styles (#slides h1 etc) are not being applied.
Further, it is not enough to simply add #slides h1, #slides_clone h1 because of the first thing I mentioned in this answer. IDs must be unique.

CSS/Javascript Lightbox

First I'll start with this: I am in no way shape or form a developer, coder etc etc. I'm just a graphic designer helping a friend with her website.
As of right now, I'm having issues linking up thumbnails to the full images on my lightbox call out - you can view the site at www.chrissybulakites.com
I noticed
With VOID:(0) being in every single one ... my thought process was that if I correspond 0 thumb with 0 full then 1 thumb with 1 full then 2 thumb wwith 2 full etc etc it would work .. it didn't.
Can somebody explain to me if I'm on the right path or what I can do to make this work.
Thanks
Rob

Have have two basic elements per image; the thumb and the full image. The thumb is using JavaScript to show and hide a div (kind of like a frame) to hold the full image.
The HTML on the page repeats itself a lot, you can probably solve your problem whilst removing some of the repetition. I'd keep all of your thumbs but on each one, add in a reference to the full image the thumb represents. As well as reducing repetition, it'll make it easier to update the page in the future as changing a thumb and main image is done in one place rather than two.
In the below I've added another part to the "onclick" to say update the src of 'frame' to be the full version of the thumb.
<img src="http://chrissybulakites.com/thumbnails/longshot_thumbnail.png" />
Then delete all of the large images except one, updating it so that the img tag has an ID of 'frame'
<div id="light" class="white_content"><img id='frame' src="http://chrissybulakites.com/images/longshot_full.png" /> <br />Actor Observor - Boston, MA Close</div>
<div id="fade" class="black_overlay"></div>
This will mean that as each thumb is clicked, it will do the light and fad bits it did before but it will also update the image being displayed.
Doing this for two images as a proof of concept I get this which works as expected:
<img src="http://chrissybulakites.com/thumbnails/longshot_thumbnail.png" />
<img src="http://chrissybulakites.com/thumbnails/actor_thumbnail.png" />
<div id="light" class="white_content"><img id='frame' src="http://chrissybulakites.com/images/longshot_full.png" /> <br />Actor Observor - Boston, MA Close</div>
<div id="fade" class="black_overlay"></div>

you need to give each full image div its own unique id like: id="image23". Then modify the onclick to refrence the corresponding id: onclick="document.getElementById('image23')...

The meaning of the function void() in JavaScript is "do nothing". This prevents it to load a new new page (or to open the thumbnail image).
onclick = "document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block' "
Says that when user clicks that item it will capture the element light and change the display to block it will also capture the element fade and change the display to block. The thing is all your images are wrapped in an element called "light" so the browser is opting to show the first one (instead of throwing an error).
There is plenty of fuzzy logic here.
Starting with the fact that you are loading all images (the high definition ones).
If you want my two cents (and you only want to get the results, as opposed to learn how JavaScript works) I would go with something like prettyPhoto that does it out of the box, in an easy and straightforward way and is well documented.
How to add prettyPhoto to your page?
Download the code and include both the Javascript and the CSS file's on your header.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
Then put this code on your page
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
The docs say to put it on the bottom of the page but you (should) also put it on the header.
And then put the thumbnails with links to the actual images. PrettyPhoto will take care of everything else. Do note the rel="prettyPhoto[my_gal]"
<a href="img/full/1.jpg" rel="prettyPhoto[my_gal]" title="Caption 1">
<img src="images/thumbnails/t_1.jpg" width="60" height="60" alt="Red round shape" />
</a>
You can customize it further and should really read the manual here.

How to make it so a link to a photo is added to my file and automatically continues to work with JavaScript

If I copy and paste another image into this div with the same code. How do I set this program up so that I can insert any number of image files (coded as the one below) and it will automatically format it and continue working like the others?
This is the div:
<div id="gallery">
<ul>
<li><img id="girl" src="images/blue_dress_thumb.jpg" alt="girl wearing a blue dress"></li>
</ul>
</div>
Javascript:
var girl = document.getElementById('girl');
var image = document.getElementById('view');
girl.onmouseover = function (){
image.src = "images/blue_dress.jpg"
}

I am guessing that you want to add an whenever the mouse hovers in your list item. Again, i am guessing this list item contains your image thumbnail
In your html add the event with the function to execute when mouse hovers over it. For instance.
<li id="theImageArea"<img onmouseover="addLink()" src="file.jpeg" alt="this image" /></li>
In your JS file add the following
function addLink()
{
var imageLink=$(document.createElement("a"));
imageLink.src="someLink.php";
imageLink.setAttribute("class", "someClass");
$("theImageArea").appendChild(imageLink);
}
Before doing the javascript part, you must include the prototype.js in the head section of your html which you can download for free.

Div Swap with Timed Interval ensure pairing

I've review some similar questions, but I can't seem to find an answer to tie this all together. I am looking for a way to create a slideshow where images and a corrosponding block of text change every 10 seconds. (Below, when I state Rotate, i do not mean turn on an angle, I mean change from one visible slide to another)
For further clarification, lets call one block of text and one image a "pair". The block of text is contained in one and the image is contained in another . For this slideshow, I will have 10 pairs.
I can easily rotate an image inside utilizing a simple time delay javascript, but if I utilize a similar javascript to rotate the text, sometimes the Image and Text get out of sync with each other (don't change at same time.)
So.... my question is a 2 part question.
1.) Am I approaching this in the correct way, and if so, how do I ensure the text and images stay as pairs and rotate at the same time.
2.) Instead of rotating the content inside of the same div, should I create 10 div pairs (20 total) and create a script just to make 2 of the 20 visible at the same time? if so... any ideas on the script to do so?
Currently, I am using the following script to swap images:
<!--- Start Image Cycler Script --->
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var timeDelay = 10; // change delay time in seconds
var Pix = new Array
("images2/slide_pics/92028.png"
,"images2/slide_pics/92026.png"
,"images2/slide_pics/92027.png"
,"images2/slide_pics/92534.png"
,"images2/slide_pics/92034.png"
,"images2/slide_pics/92555.png"
,"images2/slide_pics/92700.png"
,"images2/slide_pics/A73495.png"
,"images2/slide_pics/92701.png"
);
var howMany = Pix.length;
timeDelay *= 1000;
var PicCurrentNum = 0;
var PicCurrent = new Image();
PicCurrent.src = Pix[PicCurrentNum];
function startPix() {
setInterval("slideshow()", timeDelay);
}
function slideshow() {
PicCurrentNum++;
if (PicCurrentNum == howMany) {
PicCurrentNum = 0;
}
PicCurrent.src = Pix[PicCurrentNum];
document["ChangingPix"].src = PicCurrent.src;
}
// End -->
</script>
<!--- End Image cycler Script --->
<img name="ChangingPix" src="images2/slide_pics/92028.png" alt="" width="570" height="346" class="head-pic" />

(Sorry, my last comment decided to post itself)
As Kevin Nelson suggested, I would simply put the image and text in the same containing "block".
<div id="slider">
<div class="slide">
<img src="#" alt"this is the image" />
<p>This is the description for this particular slide</p>
</div>
<div class="slide">
<img src="#" alt"this is the image" />
<p>This is the description for this particular slide</p>
</div>
<div class="slide">
<img src="#" alt"this is the image" />
<p>This is the description for this particular slide</p>
</div>
</div>
That way you do not run into any issues with the text and images getting out of sync. There are plenty of free content/image sliders out there. I have been using Slides.js for client work as of late. It is really easy to set up and customize to your liking. It also has plenty of options (e.g. pause on hover, auto play).

Maybe I'm misunderstanding the question, but if you want to rotate text and images at same time, why wouldn't you create blocks and rotate the entire block. See this page:
http://rhmachine.flashfirehosting.com/
If I'm understanding the question correctly and you want something like that, let me know and I'll post the jquery plugin that I'm using to do it.