jQuery

【jQuery】HTML5とCSS3を使ったProductZoomer

April 8, 2017
productzoomer

ProductZoomerはHTML5とCSS3を使ったJQueryベースのプラグイン。

HTML

    <div class="wrapper">
        <div class="product-wrapper">
            <div class="product-main">
                <div class="main-image">
                    <img src="images/image1.jpg" alt="" />
                    <div class="zoomer"></div>
                </div>
            </div>
            <div class="product-sub">
                <div class="sub-image-wrapper">
                    <ul>
                        <li class="sub-image active">
                            <img src="images/image1.jpg" alt="" />
                        </li>
                        <li class="sub-image">
                            <img src="images/image2.jpg" alt="" />
                        </li>
                        <li class="sub-image">
                            <img src="images/image3.jpg" alt="" />
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/productchooser.js"></script>
    <script src="js/script.js"></script>