Как отобразить галерею изображений php внутри div?

На моем веб-сайте есть две колонки div: вертикальное меню навигации и основное содержание. Я использовал php для навигации по различным страницам своего веб-сайта до главного div (similar to this php example) ... (например, index.php? Pg = about_us -> получить контент из /page/about.html). Но на одной из страниц я хочу отобразить эту галерею (http://sye.dk/sfpg/) на главном div.Как отобразить галерею изображений php внутри div?

Как правильно отображать мою галерею в главном div (установленном под /pages/gallery/index.php) (например, ширина около 700 пикселей)? У меня такая же проблема, если меню навигации указано на внешний веб-сайт. (скажем, google) Размер и кодировка отображаются неправильно при использовании div. Спасибо.

<?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>

источник

2015-12-16 Sarah Yung

Как выглядит код на '/ pages/gallery/index.php'? –

, если ресурс 'php' находится на вашем сервере, а не просто' include' вместо 'file_get_contents'? – chriz

Да, если вы эхо-содержимое страницы php, детали php не будут обработаны. если вы используете include, тогда детали php будут обработаны. –

Упрощенно выше становится:

gallery.php:

<?php 
    $name = 'gallery'; // Fixed for this example. 
    $html_gallery = 'pages/'. $name . '.html'; 
?> 
<html> 
    <section> 
     <?php include $html_gallery ?> 
    </section> 
</html>

страницы/gallery.html:

<img src="/images/foo.jpg"> 
<img src="/images/bar.jpg"> 
<img src="/images/baz.jpg">

gallery.php сделает так же, как это:

<html> 
    <section> 
     <img src="/images/foo.jpg"> 
     <img src="/images/bar.jpg"> 
     <img src="/images/baz.jpg"> 
    </section> 
</html>

Итак, как вы можете видеть, вам нужно стилизовать выход.

источник

2015-12-16 14:53:54 Progrock

получить немного головокружение, думая об этом над n над ~~ –

извините, я не очень уверен в том, что вы имеете в виду, создав еще одну gallery.html? так что, возможно, мне придется объяснить больше: все отображается на главной странице (index.php). После нажатия на меню навигации главный div отображает содержимое с других html-страниц. галерея предварительно сделана кем-то в формате php .. (думаю, что это похоже на внешний сайт, например google) –

Я назвал его gallery.php, чтобы я мог ссылаться на него. Назовем его page.php. Я понимаю вашу проблему сейчас, вы глотаете выход php-скрипта (отдельную галерею файлов), который выводится как целая html-страница. Вы пытаетесь сэндвич HTML в существующий HTML. Возможно, вы можете использовать iframe. Из файла SFPG: Single File PHP Gallery версии 4.x является автономной галереей. Он не предназначен для включения в существующие страницы. Это по дизайну. – Progrock

Мне очень нравится ваша идея ... но я думаю, вам будет намного проще использовать JavaScript и AJAX для этого. Кроме того, этот подход предотвратит перезагрузку страницы!

EDIT - Так что, если вы говорите, у вас есть как HTML и PHP файлы для использования, в ext параметров (расширение) в ваших мероприятиях будет делать трюк. - EDIT

Моя идея была бы дать onclick события на каждом li вызов функции JavaScript, скажем onclick="getContent(page, ext)". Поэтому, конечно, вам нужно заменить page на любую нужную вам строку, допустим, gallery; и ext на любое расширение, необходимое вам в качестве строки, допустим, php.

результат Пример:

<li onclick="getContent('news', 'html')" title="News">News</li> 
<li onclick="getContent('gallery', 'php')" title="Gallery">Gallery</li>

Теперь давайте создадим наш JavaScript-AJAX вещи. Нам сначала нужно создать функцию и поместить ее сразу после тега <body> внутри тега <script>, конечно. Затем не забудьте добавить id в свой основной столбец, в следующем примере это будет 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>

Так что теперь эта функция создает запрос и получает данные из URL, а затем помещает все HTML, в нем внутри section. Конечно, убедитесь, что файл HTML содержит только то, что вам нужно в section.

Ваш основной столбец в HTML должен выглядеть следующим образом:

<section class="main_col clearfix" id="content"></section>

- EDIT -

О предварительно сделанных одной файле PHP галереи и изменения размеров проблемы ... Я видел дема и Я думаю, что я знаю, как это работает ... Мой совет - убедиться, что вы установите ширину для своего раздела main_col, потому что контент, предоставленный демо, кажется, имеет большое количество div с классом thumbbox, который, оказывается, упорядочен по CSS display:inline-block, поэтому он должен просто отлично работать ke это.

Но самая большая проблема, которую я вижу, заключается в том, что как только вы загружаете контент на своей странице, он не будет работать, если вы не используете файл include(); (PHP) или, по крайней мере, исходный код для вашей страницы PHP-галереи, потому что вы будете только загрузите HTML, и я также вижу, что он использует событие JavaScript onclick, как и моя идея.

Я могу сказать, что, чтобы помочь вам полностью решить эту проблему, я должен уметь видеть, как вы реализуете эту библиотеку и многое другое. Я думаю, вы можете это сделать, если включить файл, как я сказал (так что PHP-код загружается и, надеюсь, печатает необходимый JavaScript).

Кроме того, кодировка может быть решена с использованием PHP utf8_encode(); или utf8_decode();. Используйте первый код для кодирования от ISO-8859-1 до UTF8, а второй для другого.

источник

2015-12-16 15:00:41 Zeke

Я с удовольствием попробую это позже, но галерея находится в предварительно подготовленном в php формате (проблема с размером снова ...?), А другие страницы - html (они выглядят отлично). –

Вы все равно можете загрузить.php с этим методом, произойдет то, что php запустится, и все, что он выводит, появится в вашем столбце. Предположим, что вы хотите смешивать .html и .php или любой другой формат, вы можете передать расширение как параметр, чтобы вы могли указать его в событии 'onclick'. Я отредактирую и покажу вам. Задача калибровки - это нечто большее, чем HTML-CSS-вещь, которую вы можете отсортировать по-разному. Я попытаюсь дать вам небольшой пример в моем редактировании и давайте посмотрим, соответствует ли он вашим потребностям. – Zeke

И кстати ... Я использую 'section' только потому, что вы его используете, но использование' div' не будет проблемой, если вы выберете CSS 'width',' display', 'position' и/или' vertical-align', 'float'. Обычно я устанавливаю небольшой столбец с фиксированным размером, скажем 300px, а затем используем 'width: calc (100% - 310px);' в другом, а также другие свойства, чтобы он выглядел красиво. И вычисляет потребности -webkit- и -moz- префиксы. – Zeke

Как отобразить галерею изображений php внутри div?

ответ

Смежные вопросы