CODEWITHSUNDEEP
phphtml
Sarah Yung
Sarah Yung

Reputation: 1

How to display php image gallery inside a div?

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>

Upvotes: 0

Views: 1607

Answers (2)

Zeke
Zeke

Reputation: 1291

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.

Upvotes: 0

Progrock
Progrock

Reputation: 7485

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.

Upvotes: 2

Related Questions