0

I will try two scalize id however only one more worked. Every time second scalize function worked. How can I use one more scalize in one page. I want use scalize in repater. I will try two scalize id however only one more worked. Every time second scalize function worked. How can I use one more scalize in one page. I want use scalize in repater. `

<div class="scalize" id="scalize2">
            <!-- Start Popover Template -->
            <div id="content6" class="content center top">
                <div class="head">
                    <a href="#" class="exit"><img src="img/close.png" alt="" /></a>
                    <h6 class="title">4</h6>
                </div>
                <div class="body">
                    <p>Lorem ipsum dolor sit amet, ne est populo dictas, et pri ferri ubique labitur.</p>
                    <p>Mel ad euismod adipiscing moderatius eos an decore quodsi animal.</p>
                </div>
            </div>
            <div id="content4" class="content right top">
                <div class="head">
                    <a href="#" class="exit"><img src="img/close.png" alt="" /></a>
                    <h6 class="title">5</h6>
                </div>
                <div class="body">
                    <p>Lorem ipsum dolor sit amet, ne est populo dictas, et pri ferri ubique labitur.</p>
                    <p>Mel ad euismod adipiscing moderatius eos an decore quodsi animal.</p>
                </div>
            </div>
            <div id="content5" class="content right bottom">
                <div class="head">
                    <a href="#" class="exit"><img src="img/close.png" alt="" /></a>
                    <h6 class="title">6</h6>
                </div>
                <div class="body">
                    <p>Lorem ipsum dolor sit amet, ne est populo dictas, et pri ferri ubique labitur.</p>
                    <p>Mel ad euismod adipiscing moderatius eos an decore quodsi animal.</p>
                    <p>Lorem ipsum dolor sit amet, ne est populo dictas, et pri ferri ubique labitur.</p>
                </div>
            </div>
            <!-- End Popover Template -->

            <img src="img/deneme.jpg" alt="" class="target">
            <!-- Start Item Point -->
            <div class="item-point item-point2" data-top="121" data-left="922" data-popover="#content4">
                <div><a href="#" class="toggle toggle2"></a></div>
            </div>
            <!-- End Item Point -->
            <!-- Start Item Point -->
            <div class="item-point item-point2" data-top="333" data-left="462" data-popover="#content5">
                <div><a href="#" class="toggle toggle2"></a></div>
            </div>
            <!-- End Item Point -->
            <!-- Start Item Point -->
            <div class="item-point item-point2" data-top="444" data-left="546" data-popover="#content6">
                <div><a href="#" class="toggle toggle2"></a></div>
            </div>
            <!-- End Item Point -->


        </div>

        <div class="scalize" id="scalize3">
            <!-- Start Popover Template -->
            <div id="content1" class="content right top">
                <div class="head">
                    <a href="#" class="exit"><img src="img/close.png" alt="" /></a>
                    <h6 class="title">1</h6>
                </div>
                <div class="body">
                    <p>Lorem ipsum dolor sit amet, ne est populo dictas, et pri ferri ubique labitur.</p>
                    <p>Mel ad euismod adipiscing moderatius eos an decore quodsi animal.</p>
                </div>
            </div>
            <div id="content3" class="content right top">
                <div class="head">
                    <a href="#" class="exit"><img src="img/close.png" alt="" /></a>
                    <h6 class="title">2</h6>
                </div>
                <div class="body">
                    <p>Lorem ipsum dolor sit amet, ne est populo dictas, et pri ferri ubique labitur.</p>
                    <p>Mel ad euismod adipiscing moderatius eos an decore quodsi animal.</p>
                </div>
            </div>
            <div id="content2" class="content right bottom">
                <div class="head">
                    <a href="#" class="exit"><img src="img/close.png" alt="" /></a>
                    <h6 class="title">3</h6>
                </div>
                <div class="body">
                    <p>Lorem ipsum dolor sit amet, ne est populo dictas, et pri ferri ubique labitur.</p>
                    <p>Mel ad euismod adipiscing moderatius eos an decore quodsi animal.</p>
                    <p>Lorem ipsum dolor sit amet, ne est populo dictas, et pri ferri ubique labitur.</p>
                </div>
            </div>
            <!-- End Popover Template -->

            <img src="img/2.jpg" alt="" class="target">
            <!-- Start Item Point -->
            <div class="item-point item-point3" data-top="320" data-left="922" data-popover="#content1">
                <div><a href="#" class="toggle toggle3"></a></div>
            </div>
            <!-- End Item Point -->
            <!-- Start Item Point -->
            <div class="item-point item-point3" data-top="180" data-left="462" data-popover="#content3">
                <div><a href="#" class="toggle toggle3"></a></div>
            </div>
            <!-- End Item Point -->
            <!-- Start Item Point -->
            <div class="item-point item-point3" data-top="192" data-left="546" data-popover="#content2">
                <div><a href="#" class="toggle toggle3"></a></div>
            </div>
            <!-- End Item Point -->
          
        </div>



<script type="text/javascript">
        $(document).ready(function () {
            $('#scalize2').scalize({
                styleSelector: 'circle',
                animationPopoverIn: 'fadeIn',
                animationPopoverOut: 'fadeOut',
                animationSelector: 'pulse2',
                selector: '.item-point2',
                getSelectorElement: function (el) {
                    $('.item-point2 .active').not($(el)[0]).find('.toggle2').click();
                }
            });
          

            $('#scalize3').scalize({
                styleSelector: 'circle',
                animationPopoverIn: 'fadeIn',
                animationPopoverOut: 'fadeOut',
                animationSelector: 'pulse2',
                selector: '.item-point3',
                getSelectorElement: function (el) {
                    $('.item-point3 .active').not($(el)[0]).find('.toggle3').click();
                }
            });
           
        });  

    </script>

`

kmrngrl
  • 1
  • 1

0 Answers0