Develop Reference

How can i change the visibilty of an image placeholder if its src is empty or a parameter?

I'm a trainee and actually I'm working on a web shop.
Now I got the problem that I have multiple images placeholders (image_1-6) for our article images. Problem now is, if the article only has 2 images the placeholders for the other 4 are still there. So is there any possibility to hide them if the src is empty or a parameter defined by me?
Here is the code snippet:
<div class="sideimg grid_2">
<div id="image_1" class="lb_thumb">
<a href="javascript:;" onmouseover="swapImage('Bild1','','http://media-11teamsports.de/ArticleBig/[ArtikelOnlinebezeichnungD.Bild1]',1)" onmouseout="swapImgRestore()">
<img class="lb_detailimg" src="http://media-11teamsports.de/ArticleSmall/[ArtikelOnlinebezeichnungD.Bild1]"id=image1 name="Bild1" alt="Bild1" id="Bild2" />
</a>
</div>
<div id="image_2" class="lb_thumb">
<a href="javascript:;" onmouseover="swapImage('Bild1','','http://media-11teamsports.de/ArticleBig/[ArtikelOnlinebezeichnungD.Bild2]',1)" onmouseout="swapImgRestore()">
<img class="lb_detailimg" src="http://media-11teamsports.de/ArticleSmall/[ArtikelOnlinebezeichnungD.Bild2]" id=image2 name="Bild2" alt="Bild2" id="Bild2" />
</a>
</div>
<div id="image_3" class="lb_thumb">
<a href="javascript:;" onmouseover="swapImage('Bild1','','http://media-11teamsports.de/ArticleBig/[ArtikelOnlinebezeichnungD.Bild3]',1)" onmouseout="swapImgRestore()">
<img class="lb_detailimg" src="http://media-11teamsports.de/ArticleSmall/[ArtikelOnlinebezeichnungD.Bild3]" id=image3 name="Bild3" alt="Bild3" id="Bild2" />
</a>
</div>
<div id="image_4" class="lb_thumb">
<a href="javascript:;" onmouseover="swapImage('Bild1','','http://media-11teamsports.de/ArticleBig/[ArtikelOnlinebezeichnungD.Bild4]',1)" onmouseout="swapImgRestore()">
<img class="lb_detailimg" src="http://media-11teamsports.de/ArticleSmall/[ArtikelOnlinebezeichnungD.Bild4]" id=image4 name="Bild4" alt="Bild4" id="Bild2" />
</a>
</div>
<div id="image_5" class="lb_thumb">
<a href="javascript:;" onmouseover="swapImage('Bild1','','http://media-11teamsports.de/ArticleBig/[ArtikelOnlinebezeichnungD.Bild5]',1)" onmouseout="swapImgRestore()">
<img class="lb_detailimg" src="http://media-11teamsports.de/ArticleSmall/[ArtikelOnlinebezeichnungD.Bild5]" id=image5 name="Bild5" alt="Bild5" id="Bild2" />
</a>
</div>
<div id="image_6" class="lb_thumb">
<a href="javascript:;" onmouseover="swapImage('Bild1','','http://media-11teamsports.de/ArticleBig/[ArtikelOnlinebezeichnungD.Bild6]',1)" onmouseout="swapImgRestore()">
<img class="lb_detailimg" src="http://media-11teamsports.de/ArticleSmall/[ArtikelOnlinebezeichnungD.Bild6]" id=image6 name="Bild6" alt="Bild6" id="Bild2" />
</a>
</div>
</div>
Here is the live version(wip): http://www.ebay.de/itm/Jako-Tape-10-Meter-2-5-cm-breit-Rot-F01-/272269970423?
All I know about html css and js I learned by myself so I hope the snippet is fine.
So as you can see I have 6 images with js image swap. The only left problem is that our database don't contains an image for every placeholder, so if there are only 4 pictures there are still 2 empty boxes. So how can i get rid of them?
Thanks all for your help and excuse my english I'm from Germany.

You can try using the CSS selector for html attributes like this:
.lb_detailimg[src]{
(Whatever css u need goes here)
display: block;
}
.lb_detailimg{
display: none;
}
If any <img> of class lb_detailimg does not have a src attribute it will not be displayed.
You could also use a keyword in the src attribute to make this happen, like this:
.lb_detailimg{
(Whatever css u need goes here)
}
.lb_detailimg[src=keyword]{
display: none;
}
EDIT:
As you cannot give style to a parent element in CSS here is a JS snippet that should work fine:
window.onload = function(){
var img_containers = document.getElementsByClassName("lb_thumb");
for(var i=0; i<img_containers.length;i++){
if(img_containers[i].getElementsByTagName("img")[0].src.indexOf("keyword") > -1){
img_containers[i].style.display = "none";
}
}
}
At line 4 in the if ==> .indexOf("yourKeyWordHere")

Copy Title Attribute Value and Insert as InnerHTML

I have Auto-Generated Code in our CMS based Website like this
<td class="photogalleryItem">
<a onclick="myLightbox.start(this);return false;" rel="lightbox[33136]" href="image1.jpg" title="Test">
<img border="0" src="image1.jpg" alt="Test">
</a>
</td>
I want to copy that href title or Image alt value and insert as below
<td class="photogalleryItem">
<!--Like This <h3 style="text-align:center;">Test</h3>-->
<a onclick="myLightbox.start(this);return false;" rel="lightbox[33136]" href="image1.jpg" title="Test">
<img border="0" src="image1.jpg" alt="Test">
</a>
</td>
How can i do that in using javascript or Jquery.
This code is in Gallery page. so this is repeating for every images

If you have single td with class photogalleryItem,You can use:
$('.photogalleryItem').append('<h3 style="text-align:center;">'+ $('.photogalleryItem').find('img').attr('alt')+'</h3>');
If you have multiple td with class photogalleryItem:
$('.photogalleryItem').each(function(){
$(this).append('<h3 style="text-align:center;">'+ $(this).find('img').attr('alt')+'</h3>');
})

Try this code
$('.photogalleryItem').each(function () {
$(this).prepend('<h3 style="text-align:center;">' + $(this).find('img').attr('alt') + '</h3>');
});

Not right data is being selected

I´m having problem making a little emoticons system for my chat. I´m working with the data attribute of HTML. So that their is a different data for every emoticon.
So this is the HTML part
<div class="emoticons">
<img src="emots/emot-1.png" alt=":)" title=":)">
<img src="emots/emot-2.png" alt=";)" title=";)">
<img src="emots/emot-3.png" alt=":(" title=":(">
<img src="emots/emot-4.png" alt=":D" title=":D">
<img src="emots/emot-5.png" alt=":P" title=":P">
<img src="emots/emot-6.png" alt="=)" title="=)">
<img src="emots/emot-7.png" alt=":|" title=":|">
<img src="emots/emot-8.png" alt="=|" title="=|">
:|" class="emoticon"><img src="emots/emot-9.png" alt=">:|" title=">:|">
:D" class="emoticon"><img src="emots/emot-10.png" alt=">:D" title=">:D">
<img src="emots/emot-11.png" alt="o_O" title="o_O">
<img src="emots/emot-12.png" alt="=O" title="=O">
<img src="emots/emot-13.png" alt="<3" title="<3"><!--3-->
<img src="emots/emot-14.png" alt=":S" title=":S">
<img src="emots/emot-15.png" alt=":*" title=":*">
<img src="emots/emot-16.png" alt=":$" title=":$">
<img src="emots/emot-17.png" alt="=B" title="=B">
<img src="emots/emot-18.png" alt=":-D" title=":-D">
<img src="emots/emot-19.png" alt=";-D" title=";-D">
<img src="emots/emot-20.png" alt="*-D" title="*-D">
</div>
This is my JS
/* Emoticons part */
$('a[href]').click(function(){
var emot = $('.emoticon').attr('data-emot');
$('#inputvalue').val($('#inputvalue').val() + emot);
});
So the problem is that when I press on an emoticon, it needs to give me :-) or ;-)/(y). Now it keeps giving me this :). So it keeps giving me the first one of that list, can somebody help me?
Thank you very much in advance! English isn't also my mother languages, my apologize for any bad grammar of spell mistakes :-)

use this instead of ".emoticon", as you want emotion of that link not others with class "emoticon"
$('a[href]').click(function(){
var emot = $(this).attr('data-emot');
$('#inputvalue').val($('#inputvalue').val() + emot);
});

Just change
var emot = $('.emoticon').attr('data-emot');
to this:
var emot = $(this).attr('data-emot');

Image onclick not working

I have an image which is set relative to a background image.
I want to call a function on the click but i seem to have been facing a problem.
The hyperlink seems to be working but the function is not being called.
This is how my code looks like
<img src=".." width="100%" height="80" id="ril_logo"/>
<div id="logo-wrapper1">
<img src="..." width="5%" height="45"/>
</div>
<div id="logo-wrapper2">
<a href="#">
<img id="charger" onclick="abc();" src=".." width="4%" height="50" />
</a>
</div>
function abc()
{
alert();
}

Are you 100% sure that the call to abc() is not working? Is there any errors in the console log.
Also you might consider event bubbling. You click on the image and it fires of it's event. This then bubbles to the a href element which then bubbles to the next available element and so forth etc.
Your code could be changed to:
<img id="charger" onclick="abc(); return false;" src=".." width="4%" height="50" />
or
<img id="charger" onclick="return abc();" src=".." width="4%" height="50" />
function abc() { ... return false; }
This will prevent the event bubbling any further than the img onclick function.

Since your img is inside an a tag, the click on the image would cause a click on the a and hence you see the hyperlink working.
If you instead put the onclick on a it would trigger the function call.

try this, and src="imagepath" add your image path
<img src=".." width="100%" height="80" id="ril_logo" />
<div id="logo-wrapper1">
<img src="..." width="5%" height="45" />
</div>
<div id="logo-wrapper2">
<a href="#">
<img id="charger" onclick="abc();" src=".." width="4%" height="50" />
</a>
</div>
<script type="text/javascript">
function abc() {
alert();
}
</script>

Just add your function abc() inside script tags
<script type="text/javascript">
function abc() {
alert("Success");
}
</script>

jQuery automatic scroll through images

I'm creating a simple little slideshow for a site I'm designing for a friend. So far I have it to work just perfectly via clicking images to show / hide the respective image. I'm trying to get it to automatically scroll through the images but it won't seem to work. Here's my code:
<script type="text/javascript">
$(function() // run after page loads
{
$('.slide1t').show();
$('.slide2').click(function()
{
$('.slide2t').show();
$('.slide1t').hide();
$('.slide3t').hide();
$('.slide4t').hide();
});
$('.slide1').click(function()
{
$('.slide1t').show();
$('.slide2t').hide();
$('.slide3t').hide();
$('.slide4t').hide();
});
$('.slide3').click(function()
{
$('.slide3t').show();
$('.slide1t').hide();
$('.slide2t').hide();
$('.slide4t').hide();
});
$('.slide4').click(function()
{
$('.slide4t').show();
$('.slide1t').hide();
$('.slide2t').hide();
$('.slide3t').hide();
});
});
</script>
This is the code i'm using to hide/show images when clicked. Could this be shortened using toggle?
This is what i've tried to get them automatically scrolling:
<script type="text/javascript">
$(function() // run after page loads
{
$('.slide1t').show([1000]),
$('.slide1t').hide(),
$('.slide2t').show([1000]),
$('.slide21t').hide(),
$('.slide3t').show([1000]),
$('.slide3t').hide(),
$('.slide4t').show([1000]),
$('.slide4t').hide()
});
</script>
I've tried other aspects of this same code to try and get it to do something, but to no anvil.
<div id="slideshow">
<div class="text">
<a class="slide1" href="#"><img src="images/1.png" width="240" height="60" /></a>
<a class="slide2" href="#"><img src="images/2.png" width="240" height="60" /></a>
<a class="slide3" href="#"><img src="images/3.png" width="240" height="60" /></a>
<a class="slide4" href="#"><img src="images/4.png" width="240" height="60" /></a>
</div>
<div class="image">
<a class="slide1t" href="#"><img src="images/image1.png" width="525" height="210" /></a>
<a class="slide2t" href="#"><img src="images/image1.png" width="525" height="110" /></a>
<a class="slide3t" href="#"><img src="images/image1.png" width="525" height="170" /></a>
<a class="slide4t" href="#"><img src="images/image1.png" width="525" height="190" /></a>
</div>
</div>
I've looked into the documentation and saw you can use .show([duration],[easing],[callback]) but I don't really know what to input into them.
Thanks all

Are you making a slideshow where you can see to previous and next slide to the left and right of the current slide, or just one slide fading into another?
If it's the latter you can use this very simple code for doing this.
HTML:
<div class="image">
<img src="images/image1.png" />
<img src="images/image2.png" />
<img src="images/image3.png" />
<img src="images/image4.png" />
</div>
CSS:
.image
{
position:relative;
}
.image img
{
position:absolute;
top:0;
left:0;
}
jQuery:
$(function() {
$('.image img:gt(0)').hide(); // to hide all but the first image when page loads
setInterval(function()
{
$('.image :first-child').fadeOut(1000)
.next().fadeIn(1000).end().appendTo('.image');
},5000);
}
This basically shuffles the images like a pack of cards. 5000 (5 seconds) is the interval between fading, 1000 (1 second) is the speed of the fading animation.
For this to work however you must use position:relative on the containing div and position:absolute to position the images on top of each other.
jsFiddle demo

The thing is, .show is async. So your javascript will continue will it does the effect. That's what the third parameter is for, it's an anonymous function that will get called when the effect has finished.
You should look into a jquery plugin, making this things yourself is wasting time. There are hundreds of these plugins so there is always one fitting your needs.
For example: http://www.1stwebdesigner.com/css/fresh-jquery-image-gallery-display-solutions/

You can do this:
$('.image a').each(function (index) {
$(this).show(1000, function () {
$(this).delay(index * 1000).hide(1000);
});
});
FIDDLE DEMO

If you don't want to change your structure much and still want to retain the click function, you can do something like this
This is similar to your original approach but is based in a function and element's siblings instead of doing each image individual. This is optimized for adding new elements easily and retaining functionality. I used a setInterval to loop the animation function as well
HTML (changed slightly)
<div id="slideshow">
<div class="text"> <a id='one' href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png" width="240" height="60" /></a>
<a id='two' href="#"><img src="https://si0.twimg.com/profile_images/604644048/sign051.gif" width="240" height="60" /></a> <a id='three' href="#"><img src="https://g.twimg.com/business/page/image/11TwitterForSmallBusiness-300_1.png" width="240" height="60" /></a> <a id='four' href="#"><img src="https://si0.twimg.com/profile_images/2204583306/fb_logo.png" width="240" height="60" /></a>
</div>
<div class="image"> <a id='one' href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png" width="525" height="210" /></a>
<a id='two' href="#"><img src="https://si0.twimg.com/profile_images/604644048/sign051.gif" width="525" height="110" /></a>
<a id='three' href="#"><img src="https://g.twimg.com/business/page/image/11TwitterForSmallBusiness-300_1.png" width="525" height="170" /></a>
<a id='four' href="#"><img src="https://si0.twimg.com/profile_images/2204583306/fb_logo.png" width="525" height="190" /></a>
</div>
</div>
CSS:
.image a:not(#one) {
display:none;
}
javascript:
$('.text a').click(function () {
var idName = $(this).attr('id');
$('.image a').each(function () {
if ($(this).attr('id') === idName) $(this).show(1000);
else {
$(this).hide(1000);
}
});
window.clearInterval(loop);
loop = self.setInterval(function () {
autoChangeSlide()
}, 5000);
});
function autoChangeSlide() {
var elem;
$('.image a').each(function () {
if ($(this).is(':visible')) elem = $(this);
});
if (elem.attr('id') != $('.image').children('a').last().attr('id')) {
elem.hide(1000).next().show(1000);
} else {
elem.hide(1000).parent().children('a').first().show(1000);
}
}
var loop = self.setInterval(function () {
autoChangeSlide()
}, 5000);
You can combine my solution with Dolchio's to make it particularly awesome