Create "Slide" from image

Asked

Viewed 476 times

-1

I googled plugins/ libraries to do this function but could not find anything.

I need to create a "slide" of products like a virtual store, like in this example (but without the zoom).

I’m requesting images and product details with PHP and Mysql;

the large image is inside <div class="imagem-big_produto"></div> and the smaller images (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 on imagem-big_produto

javascript jquery

  • Like that? http://demos.mashitup.de/demo-with-autoscroll/

  • Or that? http://www.jacklmoore.com/colorbox/example2/

  • Or that? http://ashleydw.github.io/lightbox/#single-image

  • @Ivanferrer none of these, I don’t need slide, fade, zoom, modal or anything, just static image, clicked....

  • You don’t need a plugin for this.

  • You want me to make an example?

  • If you can, I’d appreciate it.

  • I did there... @Rafaelacioly

Show 3 more comments

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

I hope I’ve helped

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

style="cursor:pointer;"

  • Something’s missing there, don’t you think? rs

  • Yes, some... kkk were missing

0

That’s exactly what you need then:

Example: http://www.tocadigital.com.br/biblioteca/galeria/

Download: http://www.tocadigital.com.br/biblioteca/galeria/galeria.zip

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

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.