Target on parent div's with jquery cycle plugin
Using Jquery cycle plugin from here http://jquery.malsup.com/cycle/begin.html with this code
jQuery(function($) {
$('#s2').cycle({
fx: 'scrollDown'
});
});
I'm trying to cycle featured property. I get it working, but I need only the container div with the class of inner to cycle, not all the elements inside it.
<div id="s2">
<div class="inner">
<h2>{title}</h2>
<img src="{image001}" width="250" height="175">
<div id="partial-details">
<ul class="partial-details-a">
<li><span class="bold">ZAR: </span><span class="highlight">{property_price}</span></li>
开发者_运维问答 <li><span class="bold">Web Reference:</span> {web_reference}</li>
<li><span class="bold">Erf Size:</span> {property_erfsize}</li>
<li><span class="bold">Building Size:</span> {property_buildingsize}</li>
</ul>
<ul class="partial-details-a partial-details-b">
<li class="bedrooms">{property_bedrooms}</li>
<li class="bathrooms">{property_bathrooms}</li>
<li class="garages">{property_garages}</li>
</ul>
<h3>Property Details:</h3>
<p>{property_snippet}</p>
<em><a href="#">Details</a></em>
</div><!-- end partial details-->
</div><!-- end inner-->
<div class="inner">
<h2>{title}</h2>
<img src="{image001}" width="250" height="175">
<div id="partial-details">
<ul class="partial-details-a">
<li><span class="bold">ZAR: </span><span class="highlight">{property_price}</span></li>
<li><span class="bold">Web Reference:</span> {web_reference}</li>
<li><span class="bold">Erf Size:</span> {property_erfsize}</li>
<li><span class="bold">Building Size:</span> {property_buildingsize}</li>
</ul>
<ul class="partial-details-a partial-details-b">
<li class="bedrooms">{property_bedrooms}</li>
<li class="bathrooms">{property_bathrooms}</li>
<li class="garages">{property_garages}</li>
</ul>
<h3>Property Details:</h3>
<p>{property_snippet}</p>
<em><a href="#">Details</a></em>
</div><!-- end partial details-->
</div><!-- end inner--></div><!-- end s2-->
its seems to work just fine. its just show only the inner div and slide that down.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>untitled</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script>
<script type="text/javascript" charset="utf-8">
jQuery(function($) {
$('#s2').cycle({
fx: 'scrollDown'
});
});
</script>
</head>
<body>
<div id="s2">
<div class="inner">
<h2>{title}</h2>
<img src="{image001}" width="250" height="175">
<div id="partial-details">
<ul class="partial-details-a">
<li><span class="bold">ZAR: </span><span class="highlight">{property_price}</span></li>
<li><span class="bold">Web Reference:</span> {web_reference}</li>
<li><span class="bold">Erf Size:</span> {property_erfsize}</li>
<li><span class="bold">Building Size:</span> {property_buildingsize}</li>
</ul>
<ul class="partial-details-a partial-details-b">
<li class="bedrooms">{property_bedrooms}</li>
<li class="bathrooms">{property_bathrooms}</li>
<li class="garages">{property_garages}</li>
</ul>
<h3>Property Details:</h3>
<p>{property_snippet}</p>
<em><a href="#">Details</a></em>
</div><!-- end partial details-->
</div><!-- end inner-->
<div class="inner">
<h2>{title}</h2>
<img src="{image001}" width="250" height="175">
<div id="partial-details">
<ul class="partial-details-a">
<li><span class="bold">ZAR: </span><span class="highlight">{property_price}</span></li>
<li><span class="bold">Web Reference:</span> {web_reference}</li>
<li><span class="bold">Erf Size:</span> {property_erfsize}</li>
<li><span class="bold">Building Size:</span> {property_buildingsize}</li>
</ul>
<ul class="partial-details-a partial-details-b">
<li class="bedrooms">{property_bedrooms}</li>
<li class="bathrooms">{property_bathrooms}</li>
<li class="garages">{property_garages}</li>
</ul>
<h3>Property Details:</h3>
<p>{property_snippet}</p>
<em><a href="#">Details</a></em>
</div><!-- end partial details-->
</div><!-- end inner--></div><!-- end s2-->
</body>
</html>
加载中,请稍侯......
精彩评论