By default one item selected in webpage - php

Question

When i hover mouse at that time i got the effect but i want to set one image as a by default select when page is load.
Anyone Help me.
Here is my css.
.simpleLens-thumbnails-container a{
display: inline-block;
}
.simpleLens-thumbnails-container a img{
display: block;
}
.all-thumb{
width:50px !important;
}
#demo .img{
border: 5px solid #000;
}
.all-thumb:hover{
box-shadow: 0px 0px 10px #BFCBD5;
}
Here is my PHP code.
<a href="#" id="demo" class="simpleLens-thumbnail-wrapper" data-lens-image="<?php echo $img; ?>" data-bigimage="<?php echo $img; ?>">
<img class="all-thumb" id="demo" src="<?php echo $img; ?>">
</a>

Answer 1

add a class selected to the desired img element like this
$first_item = true;
foreach (............)
{
if($first_item){
<img class="all-thumb selected" id="demo" src="<?php echo $img; ?>">
$first_item = false;
}
else
<img class="all-thumb" id="demo" src="<?php echo $img; ?>">
}
and use this css
.all-thumb.selected, .all-thumb:hover{
box-shadow: 0px 0px 10px #BFCBD5;
}
this will work :)

Answer 2

Add selected to your defult image's class. Desired output for the default image:
<img class="all-thumb selected" id="demo" src="<?php echo $img; ?>">
If you can't hardcode it or do it from the PHP side, use this JQuery code to add the class selected to the first image:
$('.all-thumb:first').addClass('selected');
Then add this JQuery code to your page:
<script>
$(".all-thumb").not(".selected").hover(function(){
$(".all-thumb selected").css("box-shadow","none");
},function(){
$(".all-thumb selected").css("box-shadow","0px 0px 10px #BFCBD5");
});
</script>
It should work. JQuery must be included.

Answer 3

Try this:
Need to add any minimum jquery.
<script src="js/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function(){
$('.simpleLens-thumbnail-wrapper .all-thumb:first').css('box-shadow', '0px 0px 10px #BFCBD5');
$('.simpleLens-thumbnail-wrapper .all-thumb').mouseover(function(){
$('.simpleLens-thumbnail-wrapper .all-thumb:first').css('box-shadow', 'none');
});
$('.simpleLens-thumbnail-wrapper .all-thumb:first').mouseover(function(){
$('.simpleLens-thumbnail-wrapper .all-thumb:first').css('box-shadow', '0px 0px 10px #BFCBD5');
});
});
</script>
you can also use .hover instead of .mouseover