Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Type: 'image', and 'ajax'

edited March 2016 in Lightview
I'm using PHP to grab a feed of thumbnails which are displayed on the page and when one is clicked it activates lightview.

When the thumbnail is clicked, lightview opens and uses ajax to call the full sized image URL from a another PHP page.
It is configured this way to avoid the page calling and recieving the full sized image until one of the thumbs are clicked - otherwise the page takes 10 seconds to load, but with just the thumbs, it only takes a second to load.

The problem now is that the full size img URL does not contain anything that would indicate it is an image: (example full size image url) - and therefore needs the option "type: image", but for the ajax part the type must be set to "type:ajax".

As it stands, lightview displays the URL rather than the image it self.

So the question:
How can I have multiple option types? Specifically, ajax to get the URL and image to show the image rather than the URL?

Thanks :)


  • An update:
    I have managed to get the image showing by returning the URL wrapped in the HTML ready for display:

    <? echo "<img class='lv_content_image' src='".getScreenFull($sUrl)."' />"; ?>

    This shows the image, but the problem now is that there is no scaling taking place as happens with a normal image load.

    How can I apply the scaling function that is called with the normal image display?
    Thanks :)
  • There's no need to use ajax. You can simply use thumbnail images to display thumbnails and wrap those with links to their full sized images. With your full sized images as links you're never loading them upfront, they'll only load when clicked.

    Even if you open large collections of images, lightview will only preload a couple of images ahead. Adding ajax into the mix optimizes nothing here, it only complicates things.
  • Hey Nick, kudos for these great projects :)

    "You can simply use thumbnail images to display thumbnails and wrap those with links to their full sized images."

    Unfortunately, the full size image URL is not retrievable without following a few links. These URLs are retrieved using a PHP DOM parsing function that searches a specific class tag and grabs the content. Each full size URL takes about 1 second to retrieve, and to keep the page load time acceptable these URLs have to be fetched in the background and not on page load. As I am using PHP to loop and display the clickable thumbs, it seems the best option is to get the full size image URLs only when the appropriate thumb is clicked, or when the image is navigated to using the thumbnail navigation in lightview.

    I think ajax is the logical choice for this process, but would happily hear your ideas on making this process more simple.

    Thanks for your time :)
  • Update:
    I achieved the desired functionality using the callback function to dynamically resize the image and its containing folder:

    foreach($aItems as $aItem){ ?>
    <a href="axscreens.php"
    data-lightview-group-options="controls: 'thumbnails'"
    data-lightview-title="<input type='button' value='button' />"
    afterUpdate: function(element, position) {
    var parDiv = $(element.parentElement);
    var parDivWidth = parDiv[0].clientWidth;
    ajax: {type: 'get', data: {url: '<?php echo $aItem['full'];?>'} },
    thumbnail: '<?php echo $aItem['thumb'];?>',
    preload: false">
    <img src="<?php echo $aItem['thumb'];?>" />
    <?php } ?>

    There is a little right-hand gutter that I would like to remove, but I can live with that.
Sign In or Register to comment.