Jquery с Sliing Page и скользящими изображениями

Question

Jquery с Sliing Page и скользящими изображениями

0

я только что закончил сайт 5 Sliding page, на каждой странице которого есть слайдер изображений.

Я использую ползунок изображения в слайдере страницы. когда я пытаюсь использовать один и тот же слайдер изображения с разными изображениями для слайда страницы 3, он не работает. пожалуйста, помогите было бы здорово.

я не очень хорош в JQuery, поэтому я много исследовал и не повезло...

                            <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>

Я использовал метод ниже, и на слайдере первой страницы, я получаю 2 перекрытия изображений, мне нужно 3 небольших изображения в 3-страничном слайдере с разным размером

Ссылка: http://theshoaibahmed.com/jquery.photocradle-0.4.2.js

вот ссылка на то, чего я пытаюсь достичь и не работаю

http://www.theshoaibahmed.com/roman/

если вы заметили, что я использовал

Photocradle. $ area = $ ('').appendTo($ ("# kitchen2"));

какой вариант я могу использовать, поэтому, если мне нужно использовать еще 3 слайдера изображения с разным размером, я бы смог его использовать.

SHOBI98 04 янв. 2014, в 06:06

Источник

0

я думаю, что вы забыли добавить ссылку на jquery и jquery.photocradle-0.4.0.js
Somnath Kharat 04 янв. 2014, в 04:27

Теги:

javascript

jquery

html

css

2 ответа

Ещё вопросы

я думаю, что вы забыли добавить ссылку на jquery и jquery.photocradle-0.4.0.js

SHOBI98 · Answer 1 · 2014-01-10T05-31-00.000Z

Вот ссылка, когда я пробовал технику выше

http://www.theshoaibahmed.com/roman/

dzeki · Answer 2 · 2014-01-04T02-42-00.000Z

Это связано с тем, что у вас есть 2 разных div с одним и тем же классом имен на одной странице, а фотокадр смущен, к которому он должен добавить код.

Сделайте так:

<div id="first" class="photocradle" style="Position:absolute; top:58px; left:360px;width:690px;height:420px;float:right;text-align:right;"></div>

-

$( '#first' ).photocradle( params, options );

-

<div id="second" class="photocradle" style="Position:absolute; top:58px; left:360px;width:690px;height:420px;float:right;text-align:right;"></div>

-

$( '#second' ).photocradle( params, options );