Just completed a 5-page sliding site, each page featuring an image slider.
Utilizing an image slider within a page slider. However, when attempting to use the same image slider with different images for page slide 3, it's not functioning. Any assistance would be greatly appreciated.
Not well-versed in Jquery, so despite extensive research, no luck...
<div id="address">
<img src="images/address.png" width="300" height="119" alt="address">
</div>
<div id="shop">
<img src="images/shop.jpg" width="300" height="225" alt="Shop">
</div>
<div class="photocradle" style="Position:absolute; top:58px; left:360px;width:690px;height:420px;float:right;text-align:right;"></div>
<div id="kitchen2">
<script type="text/javascript">
$(function(){
var options = {
firstImageIndex: 0,
borderWeight: 0 },
params = {
sources: [
{
preview: 'images/previews/1.jpg',
original: 'images/originals/1.jpg',},
{
preview: 'images/previews/2.jpg',
original: 'images/originals/2.jpg',},
{
preview: 'images/previews/3.jpg',
original: 'images/originals/3.jpg',},
{
preview: 'images/previews/4.jpg',
original: 'images/originals/4.jpg',}
]
};
$( '.photocradle' ).photocradle( params, options );
}); </script>
</div>
<div id="address">
<img src="images/address.png" width="300" height="119" alt="address">
</div>
<div id="shop">
<img src="images/shop.jpg" width="300" height="225" alt="Shop">
</div>
<div class="photocradle" style="Position:absolute; top:58px; left:360px;width:690px;height:420px;float:right;text-align:right;"></div>
<div id="kitchen3">
<script type="text/javascript">
$(function(){
var options = {
firstImageIndex: 0,
borderWeight: 0 },
params = {
sources: [
{
preview: 'images/previews/5.jpg',
original: 'images/originals/5.jpg',},
{
preview: 'images/previews/6.jpg',
original: 'images/originals/6.jpg',},
{
preview: 'images/previews/7.jpg',
original: 'images/originals/7.jpg',},
{
preview: 'images/previews/8.jpg',
original: 'images/originals/8.jpg',}
]
};
$( '.photocradle' ).photocradle( params, options );
}); </script>
</div>
Used the following method, and on the first page slider, there is an issue with 2 images overlapping. Need 3 small images in 3-page slider with different sizes.
Link:
Link showing what is being attempted to achieve but not working:
If you notice, used
photocradle.$area = $( '' ) .appendTo( $( "#kitchen2") );
What options can be used to add 3 more image sliders with different sizes successfully.