CODEWITHSUNDEEP
javascriptphphtmlflexbox
Siriss
Siriss

Reputation: 3777

Load image from script into flexbox using DirectoryIterator

I have read many posts, but still can't get this to work correctly. I am writing a movie review site, and I want to load the images of the movie title into my flexbox.

<body>
    <ul class="flex-container">
        <?php
            foreach (new DirectoryIterator('/Volumes/Movies') as $file) {
                if($file->isDot() || $file->getBasename() === '.DS_Store' || $file->getExtension() === 'srt') continue;
                $fullDir = "/Movies/" . $file;
                $fileParts = explode(".", $file);       
                $img = file_get_contents('http://www.movieposterdb.com/embed.inc.php?movie_title='.$fileParts[0]);  
                echo '<li class="flex-item"><img src="' . $img . '" /><a href="Movies/'. $file .'" download>'. $file .'</a></li>';

            }
        ?>
    </ul>
</body>

Movies are just text files that are titled in the format needed by movieposterdb ex. Avatar (2009).txt. This was my latest attemp. I see the image on my flexbox, but the image never loads. How can I get the lazy load image from movieposterdb into my flexbox container?

Upvotes: 0

Views: 91

Answers (1)

Igor Adamenko
Igor Adamenko

Reputation: 878

Check output of movieposterdb. It returns js document.write like this:

document.write('<a target=\"_new\" href=\"http://www.cinematerial.com/movies/avatar-i499549\"><img title=\"Avatar\" alt=\"Avatar\" style=\"width: 100px; height: 143px; border: 0px;\" src=\"http://www.movieposterdb.com/posters/10_08/2009/499549/t_499549_43475538.jpg\" /></a>');

So your code will be like this:

<body>
    <ul class="flex-container">
        <?php
            foreach (new DirectoryIterator('/Volumes/Movies') as $file) {
                if($file->isDot() || $file->getBasename() === '.DS_Store' || $file->getExtension() === 'srt') continue;
                $fullDir = "/Movies/" . $file;
                $fileParts = explode(".", $file);       
                $img = file_get_contents('http://www.movieposterdb.com/embed.inc.php?movie_title='.$fileParts[0]);  
                echo '<li class="flex-item"><script>' . $img . '</script><a href="'. $fullDir .'" download>'. $file .'</a></li>';

            }
        ?>
    </ul>
</body>

Upvotes: 2

Related Questions