I have the following list of images of a dynamic php array, how do I click on any image to show it on a div?

Question

I have the following list of images of a dynamic php array, how do I click on any image to show it on a div?

Navigation

#1 by (0 votes)

0

<?php
$dir="Paginas/"; 
$archivos=scandir($dir); 
$cantidad=count($archivos); 
$imagenes=array(); 
for($a="0";$a<=$cantidad;$a++) 
{ 
    if(eregi(".jpg", $archivos[$a])) 
    { 
        $imagenes[] = $archivos[$a];   
    } 
} 

$cant_imagenes=count($imagenes); 

foreach ($imagenes as $lista) 
{ 
  echo '<img id="list" src="'.$dir.''.$lista.'" ></a>';
} 
?>

php

asked by Alexwi 29.10.2018 в 18:54

source

1 answer

Linuxmint 18 does not start How to load certain tables of a DataGrid - MVVM - UWP?

score 0 · Answer 1

A little opaque the question, but if I understand it well, what you want is to generate a gallery in which the list of images that you generate, when you click on any, show the image in all its splendor in another div determined.

For that, at least in my experience, I suggest you use a javascript gallery like link to manage it. For example, once placed javascript dependencies, and with your code could be something like this:

    <ul id="light-slider">
        <?php
foreach ($imagenes as $lista) 
{
echo('<li data-thumb="'.$dir.''.$lista.'">'); 
echo('<img class="fotolistado"
                src="'.$dir.''.$lista.'"
                name="'.$dir.''.$lista.'"
                id="'.$dir.''.$lista.'"
                alt="'.$dir.''.$lista.'"
                />');
            echo('</li>');
} 
        ?>
        </ul>

And then start the gallery with:

jQuery(document).ready(function () {
    var slider = jQuery("#light-slider").lightSlider({
        item: 1,
        autoWidth: false,
        slideMove: 1, // slidemove will be 1 if loop is true
        slideMargin: 10,
        addClass: '',
        mode: "slide",
        useCSS: true,
        cssEasing: 'ease', //'cubic-bezier(0.25, 0, 0.25, 1)',//
        easing: 'linear', //'for jquery animation',////
        speed: 500, //ms'
        auto: false,
        pauseOnHover: false,
        loop: true,
        slideEndAnimation: true,
        pause: 6000,
        keyPress: false,
        controls: true,
        prevHtml: '',
        nextHtml: '',
        rtl: false,
        adaptiveHeight: true,
        vertical: false,
        verticalHeight: 500,
        vThumbWidth: 100,
        thumbItem: 6,
        pager: true,
        gallery: true,
        galleryMargin: 5,
        thumbMargin: 5,
        currentPagerPosition: 'middle',
        enableTouch: true,
        enableDrag: true,
        freeMove: true,
        swipeThreshold: 40,
        responsive: [],
        onBeforeStart: function (el) {},
        onSliderLoad: function (el) {},
        onBeforeSlide: function (el) {},
        onAfterSlide: function (el) {},
        onBeforeNextSlide: function (el) {},
        onBeforePrevSlide: function (el) {}
    });
    slider.play();
  });