naming and placing divs

Question

Im asking this question more as a way to simplify my code. I feel this is possible, but not sure how to achieve it. I want these divs to be next to each other with the same JS function, but i've only been able to achieve this by giving certain divs unique names, while feeling that might be unnecessary.

http://jsfiddle.net/uvb1u8y1/6/

CSS:

#grid {
width:1024px;
position:absolute;
background-color: #7f82a3;
}
.tile {
position:relative;
display: block;
float:left;
margin-left:10px;
margin-top:10px;
border:2px solid #fff;
-moz-box-shadow:5px 5px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow:5px 5px 5px rgba(0, 0, 0, 0.5);
box-shadow:5px 5px 5px rgba(0, 0, 0, 0.5);
}
.slider {
margin: 0px auto;
}
.contenthover {
padding: 22px 20px 10px 20px;
}
.contenthover, .contenthover h4, contenthover a {
color: #fff;
font-size:16px;
}
.contenthover h4, .contenthover p {
margin: 0 0 10px 0;
line-height: 1.1em;
padding: 0;
}
.contenthover h4 {
text-align:center;
}
.contenthover a.mybutton {
display: block;
text-align:center;
padding: 5px 10px;
margin-top: 15px;
background: #0b94e5;
color: #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.contenthover a.mybutton:hover {
background: #005588;
}

HTML:

<div id="grid">
<div class="tile">
    <div class="slider">
        <img id="slidercell01" src="http://placehold.it/188x106" width="188" height="106" />
        <div class="contenthover">

<h4>Lorem ipsum dolor</h4>

            <p><a href="#" class="mybutton">Lorem ipsum</a>

            </p>
        </div>
    </div>
</div>
<div class="tile">
    <div class="slider">
        <img id="slidercell02" src="http://placehold.it/188x106" width="188" height="106" />
        <div class="contenthover">

<h4>Lorem ipsum dolor</h4>

            <p><a href="#" class="mybutton">Lorem ipsum</a>

            </p>
        </div>
    </div>
</div>
<div class="tile">
    <div class="slider">
        <img id="slidercell03" src="http://placehold.it/188x106" width="188" height="106" />
        <div class="contenthover">

<h4>Lorem ipsum dolor</h4>

            <p><a href="#" class="mybutton">Lorem ipsum</a>

            </p>
        </div>
    </div>
</div>
</div>

JS:

$('#slidercell01').contenthover({
effect: 'slide',
slide_speed: 300,
overlay_background: '#000',
overlay_opacity: 0.8
});
$('#slidercell02').contenthover({
effect: 'slide',
slide_speed: 300,
overlay_background: '#000',
overlay_opacity: 0.8
});
$('#slidercell03').contenthover({
effect: 'slide',
slide_speed: 300,
overlay_background: '#000',
overlay_opacity: 0.8
});

Answer 1

There are always more options!

$('.slider > img').contenthover({
  effect: 'slide',
  slide_speed: 300,
  overlay_background: '#000',
  overlay_opacity: 0.8
});

If you use the above selector string, it will match all IMG tags that are immediate children of the DIV with the class "slider".

jQuery's (basically) selectors use CSS selectors. You can read about children selecting here: https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors

Answer 2

You could use classes instead of ids.

$('.slidercell').contenthover({
    effect: 'slide',
    slide_speed: 300,
    overlay_background: '#000',
    overlay_opacity: 0.8
});

Fiddle: http://jsfiddle.net/uvb1u8y1/7/

Answer 3

$('#slidercell01,#slidercell02,#slidercell03').contenthover({
    effect: 'slide',
    slide_speed: 300,
    overlay_background: '#000',
    overlay_opacity: 0.8
});