Create Image Slide

Navigation
-1

I tried google for plugins / libraries to do this function but could not find anything.

I need to create a slide of products just like a virtual store, like in this example (but not zoomed in).

I'm ordering images and product details with PHP and Mysql;

the large image is within <div class="imagem-big_produto"></div> and the thumbs are in <li class="lista_thumbs-produto"></li>

I would like to click on a li (smaller image) and it appears in place of the larger image in imagem-big_produto

    
asked by anonymous 21.08.2015 / 19:59

2 answers

5

Example (use only Javascript and ignore formatting, sizes, etc.): 

<div class="imagem-big_produto">
   <img id="imagemgrande" style='width:400;height:300'>
</div>

<ul>
   <li class="lista_thumbs-produto"><img src="imagem1" onclick="document.getElementById('imagemgrande').src=this.src"></li>
   <li class="lista_thumbs-produto"><img src="imagem2" onclick="document.getElementById('imagemgrande').src=this.src"></li>
</ul>

If you are using jQuery, this event can be optimized through a multi-selector

I hope I have helped

Edited: If you want to put a pointer like a click, you can put the following css in the image: 

style="cursor:pointer;"
    
21.08.2015 / 20:52
0

That's exactly what you need then:

Example: link

Download: link

Here is the code: 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }
        body {
            background: #fff;
            font-family: Arial, Tahoma, Verdana;
            font-size: 14px;
        }
        #content {
            width: 800px;
            margin: 20px auto 0;
            background: #fff;;
        }
        #gallery {
            overflow: auto;
            width: 120px;
            height: 650px;
            float: left;

        }
        #gallery ul li img {
            width: 103px;
            height:115px;
            border: 0;

        }
        #gallery ul li a {
           text-decoration: none;
            border-right: 6px solid #eee;
            display: block;
            margin: 10px 0;
        }
        #gallery ul li.active a {
            border-color: #b5b5b5;
        }
        #gallery ul li a:hover {
            border-right: 6px solid orange;
        }
        #principal {
            padding-top: 10px;
            margin-left: 150px;
            width: 480px;
            height: 640px;
        }
        #principal img {
            width: 480px;
            height: 630px;
        }
    </style>
</head>
<body>
<div id="content">
        <div id="gallery">
            <ul>
                <li class="item"><a href="javascript:void(0);" id="img_01"><img src="imagens/thumb/01.jpg" border="0"></a></li>
                <li class="item"><a href="javascript:void(0);" id="img_02"><img src="imagens/thumb/02.jpg" border="0"></a></li>
                <li class="item"><a href="javascript:void(0);" id="img_03"><img src="imagens/thumb/03.jpg" border="0"></a></li>
                <li class="item"><a href="javascript:void(0);" id="img_04"><img src="imagens/thumb/04.jpg" border="0"></a></li>
                <li class="item"><a href="javascript:void(0);" id="img_05"><img src="imagens/thumb/05.jpg" border="0"></a></li>
            </ul>
        </div>
        <div id="principal"><img src="imagens/01.jpg" onerror="this.src='imagens/error_img.png'" border="0"></div>
</div>
</body>
<script type="text/javascript" src="//code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function(){

    $('.item').on('click', function() {
        $('.item').removeClass('active');
        $(this).addClass('active');
        var $element = $(this).find('a').attr('id').replace('img_','') + '.jpg';
        $('#principal img').attr('src', 'imagens/' + $element);
    });
});
</script>
</html>
    
21.08.2015 / 21:20
How to put the data of a while inside a variable? How to do a multi-table query in PHP? [closed]