Develop Reference

Remove carousel arrows if the image is not loaded

I am currently trying to remove the arrows from the carousel when there is no image present. The reason for me trying to do so, is simply because I am trying to load several images into a carousel from a database into a given section. This section is recreated multiple times and it doesn't always contain images.
The issue that I am having is that, whenever the bootstrap carousel doesn't have any images loaded, it just displays the carousel arrows on the side. This gives a bad look to the current section and I would like to dispose of that.
How can I remove the carousel arrows when there aren't any images
loaded in the carousel?
Here is a JsFiddle which contains what I've done so far, it is heavy inspired by several other posts. This only removes the left arrow on the first slide and the right arrow on the last slide.
Here you can preview how does the carousel look whenever there are absent images. I have set a black background of 400px in order for the arrows to be more easily spotted. Absent Images JsFiddle
Here is the code I have so far:
<div class="container">
<div id="main_area">
<!-- Slider -->
<div class="row">
<div class="col-xs-12" id="slider">
<!-- Top part of the slider -->
<div class="row">
<div class="col-sm-8" id="carousel-bounding-box">
<div class="carousel slide" id="myCarousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0">
<img src="http://placehold.it/770x300&text=one"></div>
<div class="item" data-slide-number="1">
<img src="http://placehold.it/770x300&text=two"></div>
<div class="item" data-slide-number="2">
<img src="http://placehold.it/770x300&text=three"></div>
<div class="item" data-slide-number="3">
<img src="http://placehold.it/770x300&text=four"></div>
<div class="item" data-slide-number="4">
<img src="http://placehold.it/770x300&text=five"></div>
<div class="item" data-slide-number="5">
<img src="http://placehold.it/770x300&text=six"></div>
</div><!-- Carousel nav -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next" id="arrow-right">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
</div>
</div><!--/Slider-->
</div>
JQuery Code:
jQuery(document).ready(function($) {
$('.carousel').carousel({
interval: false,
})
$(document).ready(function () { // on document ready
checkitem();
});
$('#myCarousel').on('slid.bs.carousel', checkitem);
function checkitem() // check function
{
var $this = $('#myCarousel');
if ($('.carousel-inner .item:first').hasClass('active')) {
$this.children('.left.carousel-control').hide();
} else if ($('.carousel-inner .item:last').hasClass('active')) {
$this.children('.right.carousel-control').hide();
} else {
$this.children('.carousel-control').show();
}
}
$("img").error(function(){
$(this).hide('#arrow-right');
});
});
Here are the answers that I've already checked for solutions:
Link 1Link 2
Thank you in advance.

Using jQuery you could try something like..
$(document).ready(function(){
if($('.carousel-inner .item img').attr('src') == '') {
$('.carousel-control').css('display', 'none');
}
});
fiddle

Make Images the same size, and not will be distorted

I just want my all images from my instafeed will all be the same size, shouldn't be distorted and image will resize freely (responsive), and i want it to look exactly like this: instagram images , we can zoom the image a bit and make overflow hidden, its just i dont know the tricks :)
here is my work: http://jsfiddle.net/jazzu20/1c9yf61x/
img {
max-width: 100%;
border: 0;
}
.col-md-3 {
width: 25%;
float: left;
}
.livery-instafeed-section {
min-height: 285px;
}
<div class="livery-instafeed-section col-md-12">
<div id="instafeed">
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9JOiOdMLo5/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/11251638_621920521284538_937019183_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9Gp4RjMLgE/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xpf1/t51.2885-15/s640x640/sh0.08/e35/1390058_175285799480082_576833592_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9FJpd7MLts/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/s640x640/sh0.08/e35/12093236_443227142549068_286565452_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9D_lqkMLqV/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/12145135_1069396733117579_706096349_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9Bb92JMLhh/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/12093429_1668694736699760_1827692759_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9ACbbHMLlD/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/s640x640/sh0.08/e35/12135431_1733638416868070_1024332902_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/8_BXkSsLn5/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/12105054_849750965144841_2082888771_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/89fRuosLje/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/12107557_866233773472414_1869843871_n.jpg">
</a>
</div>
</div>

Here's a fiddle.
Explanation of what happens here:
First of all, I've moved the images to be a background image of the anchor (<a>) tag. That gives you a lot more flexibility, because you can make use of the background-position and background-size properties.
Next I've positioned the anchor absolute (and the column relative to make sure the anchor is taking account of it's parents size) and made it as heigh and wide as the column.
Now you have the same width, but not the same height, as the column doesn't have a height from itself. Giving it a percentual height doesn't help you, because that would be relative to the parent, while you want to have the column to have a height relative to it's own height. And now kicks in the classic padding trick; give the element a bottom-padding and make it's child 100% the height of it's parent, like so:
.parent { width: 25%; padding-bottom: 25%; } /* .col-md-3 in your case */
.child { position: absolute; width: 100%; height: 100%; }
So now we have perfectly square elements, with the images as a background. This would normally suffice, because with background-size: cover the browser would make sure the image would span the whole div. But as you have images with white borders (to the side and the top/bottom) you'll have to zoom those to correct it. And the larger the borders (eg. for panorama images) the bigger the zoom size. That's why I have created the .zoom and .zoom2 classes, which just increases the background-size property.
There you go!

jQuery: for each class when hovered over toggleClass on other div

$('.quick-links').each(function() {
$(this).hover(function() {
$('.img-thumbnail').toggleClass('quick-links-hover');
});
});
So, this works however there is multiple of the .img-thumbnails on the page and I only want it to affect the corresponding one. HTML:
<a href="http://localhost:8888/home/the-last-rays-of-sunlight/" class="thumbnail img-thumbnail" data-slb-group="203_auto_1" data-slb-active="1" data-slb-internal="40">
<img width="296" height="300" src="http://localhost:8888/wp-content/uploads/2014/01/The-Last-Rays-of-Sunlight-296x300.jpg" class="attachment-medium" alt="sold" />
</a>
<div class="pic-options">
<div class="quick-links pull-left">
<span class="icon-star-empty" data-toggle="tooltip" data-placement="top" title="Favourite this painting"></span>
<span class="icon-slideshare"></span>
</div>
<div class="pull-right">
<span class="quick-enquire">
Enquire about this painting</span>
<span id="isSold">sold</span>
</div>
</div>
Thanks for your help!

You're probably looking for something like this
$('.quick-links').hover(function() {
$(this).closest('.pic-options').prev('.img-thumbnail').toggleClass('quick-links-hover');
});
Targets the parent .pic-options, then the previous .thumbnail

Several triggers not fully working and code is extra long

I have a page that has 7 image boxes, these boxes are alert boxes for our customers agents for any type of alerts being sent out. I have them all set as a link, when clicked the box turns from orange to blue and an information box is opened next to it, each image has its own info box. I have it partially working but it is not function how I want. I need it so if box1 is opened and the user clicks box2 the box1 should revert back to orange and its info box needs to close so that box2's info box can populate the space. Right now the image boxes stay blue when you click on other boxes and the code I have to close the info boxes is bugging out if you click off another image box. Here is part of my code and my HTML:
(Update) Here is a jsbin link of my example as it should be working. However, the click event is not working on my system, its not even trying to scroll to the top of teh page which normally happens when the trigger breaks but the href=# is there. Here is my new code:) JSBin
//JS
$(document).ready(function () {
function assignClickHandlerFor(boxNum) {
$('#a' + boxNum).click(function (evt) {
// returning false at the end implictly does these two lines.
evt.preventDefault();
evt.stopPropagation();
var $aBox = $(evt.currentTarget); // points to the element
(ie, the link) clicked.
// locate the div that has both the `.active` class and the `.alertBox2` class
var $prevAlert = $('.alertBox2.active');
$prevAlert.find('.blue').hide();
$prevAlert.find('.orange').show();
$prevAlert.removeClass('active');
$('.alertDetails').hide();
$abox.find('.blue').show();
$abox.find('.orange').hide();
$abox.addClass('active');
// show the required alert.
$('#d' + boxNum).show();
});
}
var i;
for (i = 1; i <= 7; i++) {
assignClickHandlerFor('Box' + i);
}
});
//CSS
.alertBox2
{
float:left; display:block;
}
.alertDetails
{
display:none; background-color:#fff; width:250px; height:585px; float:left; position:relative; left:5px; top:8px;
}
//HTML
<div><a href="#" id="aBox1" class="alertBox2" >
<span class="infoBox orange">
<img src="Images/orange_alert_box.jpg" alt="Orange Info Box" />
</span>
<span class="infoBox blue" style="display: none;">
<img src="Images/blue_alert_box.jpg" alt="Blue Info Box" />
</span>
</a>
</div>
<div><a href="#" id="aBox2" class="alertBox2">
<span class="infoBox orange">
<img src="Images/orange_alert_box.jpg" alt="Orange Info Box" />
</span>
<span class="infoBox blue" style="display: none;">
<img src="Images/blue_alert_box.jpg" alt="Blue Info Box" />
</span>
</a></div>
<div><a href="#" id="aBox3" class="alertBox2">
<span class="infoBox orange">
<img src="Images/orange_alert_box.jpg" alt="Orange Info Box" />
</span>
<span class="infoBox blue" style="display: none;">
<img src="Images/blue_alert_box.jpg" alt="Blue Info Box" />
</span>
</a></div>
</div>
<p id="alertDP">Click on any Alert to the left to see details</p>
<div class="alertDetails" id="dBox1">
Box1
</div>
<div class="alertDetails" id="dBox2">
Box2
</div>
<div class="alertDetails" id="dBox3">
Box3
</div>

Edit: A link demonstrating my understanding of your issue. http://jsbin.com/ecelil/1/edit
A few observations, clicking on any one aBox only toggles its own infoBox. In the click handler for aBox2 you seem to have noticed that and tried to fix it by passing three infobox selectors to jQuery. However jQuery doesn't work that way. It accepts only one selector. That selector can however match those three elements.
Replace the first line of each of the three aBox click handlers with $('.infoBox1, .infoBox2, .infoBox3').toggle();
As for the code being too long, well, for loops, variables and css class selectors are your friends :)
$(document).ready(function () {
function assignClickHandlerFor(boxNum) {
$('#a' + boxNum).click(function (evt) {
// returning false at the end implictly does these two lines.
evt.preventDefault();
evt.stopPropagation();
var $aBox = $(evt.currentTarget); // points to the element (ie, the link) clicked.
// locate the div that has both the `.active` class and the `.alertBox2` class
var $prevAlert = $('.alertBox2.active');
$prevAlert.find('.blue').hide();
$prevAlert.find('.orange').show();
$prevAlert.removeClass('active');
$('.alertDetails').hide();
$aBox.find('.blue').show();
$aBox.find('.orange').hide();
$aBox.addClass('active');
// show the required alert.
$('#d' + boxNum).show();
});
};
var i;
for (i = 1; i <= 7; i++) {
assignClickHandlerFor('Box'+i);
}
});
// css
.blue-info-box {
background-image: url('Images/blue_alert_box.jpg');
}
.orange-info-box {
background-image: url('Images/orange_alert_box.jpg');
}
// html
<div>
<a href="#" id="aBox1" class="alertBox2" >
<span class="infoBox orange">
<img src="Images/orange_alert_box.jpg" alt="Orange Info Box" />
</span>
<span class="infoBox blue" style="display: none;">
<img src="Images/blue_alert_box.jpg" alt="Blue Info Box" />
</span>
</a>
</div>
<div>
<a href="#" id="aBox2" class="alertBox2">
<span class="infoBox orange">
<img src="Images/orange_alert_box.jpg" alt="Orange Info Box" />
</span>
<span class="infoBox blue" style="display: none;">
<img src="Images/blue_alert_box.jpg" alt="Blue Info Box" />
</span>
</a>
</div>
<div>
<a href="#" id="aBox3" class="alertBox2">
<span class="infoBox orange">
<img src="Images/orange_alert_box.jpg" alt="Orange Info Box" />
</span>
<span class="infoBox blue" style="display: none;">
<img src="Images/blue_alert_box.jpg" alt="Blue Info Box" />
</span>
</a>
</div>
<div class="alertDetails" id="dBox1">
Box1
</div>
<div class="alertDetails" id="dBox2">
Box2
</div>
<div class="alertDetails" id="dBox3">
Box3
</div>

Implementing New Image Overlay on Existing code (HTML5 and CSS 3)

How can I get an Image overlay to work with this code?
What I want is a set of icons to overlay, ontop of a image when the cursor moves over it.
http://socialartist.co/index.html
The code in question is HTML 5 and CSS 3, and has quite a lot of mark-up:
<ul class="items x_columns">
<li data-id="id-1" data-cat="#luxury">
<div class="preview"><a href="#" class="frame">
<img src="https://i1.sndcdn.com/avatars-000008744854-5sr588-large.jpg?d408275" id="imgSmile" alt=""/></a>
</div>
<a class="title" href="#">Kirkbridge DNB</a>
<p>UK | Drum and Bass</p>
</li>
When I try to add a new div it just breaks the design (eg messes up the preview class border)
Is there 'an easy way' to just overlay onto an existing image, as above.
I don't really know how to set this up on Fiddle; I am hoping that ppl could just use developer tools (inspect element) on the page URL above?

If I got it right:
Add the icon you want to dispay inside the anchor tag:
Quick and dirty example: http://jsfiddle.net/ZVSVw/
<a href="#" class="frame">
<img src="https://i1.sndcdn.com/avatars-000008744854-5sr588-large.jpg?d408275" id="imgSmile" alt=""/>
<div class=overlay>ICON</div>
</a>
Set it to display: none by default and style it with the selector .frame:hover > .overlay.
To your comment
remove the following line from your style.css:1654:
a > .frame:hover, a.frame:hover{
background: #ffffff;
/* border: 1px solid #24bfb6; remove this line */
}

You could add the other overlay picture with the display: none; property set and then basically toggle between the two pictures fiddle
Javascript:
jQuery('li[data-id="id-3"] > div').on('hover', 'a', function() {
jQuery(this).find('img').toggle();
jQuery(this).find('div.overlayContent').toggle();
});​
Html:
<li data-id="id-3" data-cat="#holiday">
<div class="preview">
<a href="#" class="frame">
<img src="http://..." alt="default picture">
<div class="overlayContent" style="display: none;">...overlay content</div>
<!--img src="http://..." alt="alternate picture" style="display: none;"-->
</a>
</div>
<a class="title" href="#">TEST ME!</a>
<p>Test this one!</p>
</li>