Q: ¿Como puedo hacer para que la imagen principal sea reemplazada por una de la galeria? tengo un producto con galeria con imagenes traida de la base de datos, en el foreach si el producto contiene imagenes mayores a 1, muestra una galeria con 6 imagenes traidas de la base de datos.
 <div class="col-md-7">
            <div class="sh-ficha-galeryBox">
                <div class="sh-ficha-galery">
                    <ul class="sh-ficha-galery-list">
                        <?PHP
                        foreach ($galery as $key => $g) {
                            if (($key != 1) and ($g)) {
                        ?>
                                <li class=""><a data-fancybox="gallery" href="<?= $g ?>"><img name='imgGalery' src="<?= $g; ?> " onclick="setSrc('imagMain', galery.src)" class="img-responsive center-block"></a></li>
                        <?PHP
                            }
                        }
                        ?>
                    </ul>
                    </div>
            <div class="sh-ficha-mainPic">
                <a data-fancybox="gallery" href="<?= $galery[1] ?>"><img name='imgMain' src="<?= $galery[1]; ?>" class="img-responsive center-block" style="border-radius: 5px;"></a>

                    <script type="text/javascript">

                        function $($galery)
                        {
                            return document.getElementsByName('imgMain');
                        }
                        function setSrc(name, src)
                        {
                            var galery = document.getElementsByName('imgGalery');
                            galery.src = src;
                        }
                    </script>
                </div>
            </div>
        </div>
    </div>

Lo que se muestra en el navegador es una imagen principal(1) y al costado las otras 5. Yo quisiera que al hacer clic en alguna de esas otras 5, reemplacen a la principal y a su vez la principal pase a formar parte de las 5.
