Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Просто слайдер с увиличением картинки при клике (https://javascript.ru/forum/dom-window/34752-prosto-slajjder-s-uvilicheniem-kartinki-pri-klike.html)

Antond 17.01.2013 12:45

Просто слайдер с увиличением картинки при клике
 
Добрый день!
Помогите, плиз!
Есть слайдер, который прокручивает массив картинок.
Вот код
<script type="text/javascript">

                        /*** 
                        Simple jQuery Slideshow Script
                        Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc.  Please link out to me if you like it :)
                         ***/

                        function switchNext(){
                            var $active = $('#slideshow IMG.active');

                            if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

                            // use this to pull the images in the order they appear in the markup
                            var $next =  $active.next().length ? $active.next()
                            : $('#slideshow IMG:first');

                            // uncomment the 3 lines below to pull the images in random order
                                                                                                                                                                                                                        
                            // var $sibs  = $active.siblings();
                            // var rndNum = Math.floor(Math.random() * $sibs.length );
                            // var $next  = $( $sibs[ rndNum ] );


                            $active.addClass('last-active');

                            $next.css({opacity: 0.0})
                            .addClass('active')
                            .animate({opacity: 1.0}, 1000, function() {
                                $active.removeClass('active last-active');
                            });
                        }

                        function switchPrev(){
                            var $active = $('#slideshow IMG.active');

                            if ( $active.length == 0 ) $active = $('#slideshow IMG:first');

                            // use this to pull the images in the order they appear in the markup
                            var $next =  $active.prev().length ? $active.prev()
                            : $('#slideshow IMG:last');

                            // uncomment the 3 lines below to pull the images in random order
                                                                                                                                                                                                                        
                            // var $sibs  = $active.siblings();
                            // var rndNum = Math.floor(Math.random() * $sibs.length );
                            // var $next  = $( $sibs[ rndNum ] );


                            $active.addClass('last-active');

                            $next.css({opacity: 0.0})
                            .addClass('active')
                            .animate({opacity: 1.0}, 1000, function() {
                                $active.removeClass('active last-active');
                            });
                        }

                        $(function() {
                            //setInterval( "switchNext()", 5000 );
                        });
                                                                                                                                                                                                                                                    
                        $(document).ready(function(){
                            $('#img_btn_left').click(function(){switchPrev();});
                            $('#img_btn_right').click(function(){switchNext();});
                            $('#slideshow img').click(function(event){
                                var url = $(this).attr("src");
                                var windowName = "popUp";//$(this).attr("name");
                                window.open(url);
                                                                                                                                                                                                             
                                event.preventDefault();
                            });
                                                                                                
                            $('#i-gallery-header').css('cursor', 'pointer');
                            $('#i-gallery-header').click(function(){
                                    document.location.href = '/index.php?option=com_content&view=article&id=72&Itemid=306';
                    });
                });

                    </script>

<div id="slideshow">
    <img class="active" src="/images/slider/15.png" border="0" alt="" /> 
    <img src="/images/slider/01.png" border="0" alt="" /> 
   ............
</div>



Я прикрутил к этому слайдеру плагин FancyBox, следовательно, html код мой изменился до след .вида

<div id="slideshow">
    <a id="single_image" rel="group" href="images/slider/15.png"><img  src="images/slider/15.png" border="0" alt="" title="картинка 2" /> </a>
    <a id="single_image" rel="group" href="images/slider/01.png"><img  src="images/slider/01.png" border="0" alt="" /> </a>
   ....
</div>


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


Часовой пояс GMT +3, время: 21:05.