How to display php image gallery inside a div?
Question
My website has two div columns: a vertical navigation menu and main content. I used php to navigate different pages of my website to the main div ( similar to this php example )...(eg. index.php?pg=about_us --> get content from /page/about.html). But one of the pages I want to display this gallery ( http://sye.dk/sfpg/ ) on the main div.
How to display my gallery correctly in the main div (installed under /pages/gallery/index.php) (eg. width about 700px)? I have the same problem if the navigation menu is pointed to an external website. (let's say google) The size and charset are not displayed correctly while using div. Thank you.
<?php
// ...blah blah blah
$pgname = isset($_GET['pg']) ? trim(strip_tags($_GET['pg'])) : 'index';
//....
?>
// starts html, header and body
<div class="left_col">
<nav id="navigation">
<ul>
<li><a href="index.php" title="Home">Home</a></li>
<li><a href="index.php?pg=news" title="News">News</a></li>
<li><a href="index.php?pg=gallery" title="Gallery">Gallery</a></li>
<li><a href="index.php?pg=donate" title="Donate">Donate</a></li>
<li><a href="index.php?pg=about_us" title="About Us">About Us</a></li>
</ul>
</nav>
</div>
<section class="main_col clearfix">
<?php
if ($pgname != 'gallery'){
echo file_get_contents('pages/'. $pgname. '.html');
} else {
echo file_get_contents('http://google.com/'); // this doesn't work, and neither work with '/pages/gallery/index.php'
}
?>
</section>
2 answers
solution1
2 2015-12-16 14:53:54
Simplified, the above becomes:
gallery.php:
<?php
$name = 'gallery'; // Fixed for this example.
$html_gallery = 'pages/'. $name . '.html';
?>
<html>
<section>
<?php include $html_gallery ?>
</section>
</html>
pages/gallery.html:
<img src="/images/foo.jpg">
<img src="/images/bar.jpg">
<img src="/images/baz.jpg">
gallery.php would render much like this:
<html>
<section>
<img src="/images/foo.jpg">
<img src="/images/bar.jpg">
<img src="/images/baz.jpg">
</section>
</html>
So as you can see, it is up to you to style the output.
solution2
0 2015-12-16 15:00:41
I like your idea a lot... but I think it would be much easier for you to use JavaScript and AJAX for this. Also, this approach will prevent the page from reloading!
EDIT - So, if you say you have both HTML and PHP files to use, an ext parameter (extension) in your events will do the trick. - EDIT
My idea would be to give an onclick event on each li calling a JavaScript function, let's say onclick="getContent(page, ext)" . So of course you need to replace page to whatever string you like, let's say gallery ; and ext to any extension you need as a string, let's say php .
Sample result:
<li onclick="getContent('news', 'html')" title="News">News</li>
<li onclick="getContent('gallery', 'php')" title="Gallery">Gallery</li>
Now, let's build our JavaScript-AJAX stuff. What we first need to do is create the function and place it right after the <body> tag inside a <script> tag, of course. Then remember to add an id to your main column, in the following example it will be content .
<script type="text/javascript">
function getContent(pageName, ext){
var url = "pages/"+pageName+"."+ext, // gallery.php - news.html
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function(){
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("content").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
</script>
So now this function creates the request and gets the data from your URL and then places all the HTML in it inside your section . Of course, make sure that the HTML file contains only what you need inside the section .
Your main column in HTML should look like this:
<section class="main_col clearfix" id="content"></section>
- EDIT -
About the pre-made single file PHP gallery and resizing problem... I saw the demo and I think I know how it works... my advice is to make sure you set a width to your main_col section because the content given by the demo seems to be lots of div 's with a class thumbbox which happens to be arranged by CSS display:inline-block so it should just work fine like that.
But the biggest problem I see is that once you load the content on your page, it will not work unless you include(); (PHP) the file or at least the source code for your single page PHP gallery, because you will only load the HTML and I also see that it uses the JavaScript onclick event just like my idea.
What I can say is that to help you solve this thing entirely, I should be able to see how you're implementing this library and many other things. I think you can work it out tho if you include the file like I said (so that the PHP code loads and hopefully prints the necessary JavaScript).
Also, the charset might be solved using PHP utf8_encode(); or utf8_decode(); . Use the first one to encode from ISO-8859-1 to UTF8 and the second one for the other way round.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.