Используя синтаксис ReST с Pelican, как мне сделать так, чтобы мои изображения внутри рисунков можно было щелкнуть до полного размера?

Я проверил существующие сообщения, касающиеся этого, в соответствии с связывание изображения с его полноразмерным изображением, но это а) не совсем ответ и б) использование Markdown.

Я предпочитаю использовать ReST из-за поддержки фигур. Это означает, что я могу использовать Better Figures. и плагин «Изображения» и иметь краткие подписи под моими изображениями. Учитывая, что я использую свой веб-сайт в основном для портфолио пользовательского опыта, это необходимо.

Эта страница о увеличение изображений с помощью CSS и javascript кажется почти правильным, за исключением той части, где я не совсем уверен, как интегрировать это с pelican. До сих пор я помещал CSS img.expanded в файл style.css под разделом .figure img {}, как .figure img.expanded :

.figure img {
border: none;
border-radius: 0;
padding: 0;
margin: 0;
box-shadow: none;
}

/* enlarge on click */
.figure img.expanded {
max-width: none;
}

И я поместил бит javascript в шаблон base.html, в нижней части раздела заголовка, но перед конечным блоком:

  <!-- expand images -->
  <script type="text/javascript">
     $(document).ready(function() {
       var imageLinks = $('a[href$=".png"], a[href$=".jpg"], a[href$=".gif"], a[href$=".bmp"]');
       if (imageLinks.children('img').length) {
         imageLinks.children('img').each(function() {
            var currentTitle = $(this).attr('title');
            $(this).attr('title', currentTitle + ' (click to enlarge image)');
         });
         imageLinks.click(function(e) {
            e.preventDefault();
            $(this).children('img').toggleClass('expanded');
         });
       }
     });
  </script>
  {% endblock %}
  </head>

Тем не менее, теперь я застрял в том, как сделать изображения на рисунке кликабельными. Первое изображение на https://suzannehillman.com/pages/fedora-regional-hubs.html в настоящее время имеет следующий код:

  .. figure:: {filename}/images/competitive_ss.png
     :width: 400px
     :alt: Competitive analysis
     :figclass: center

     Sample of the analysis spreadsheet

Я думаю, мне нужно выяснить, как сделать так, чтобы изображение внутри рисунка ссылалось на себя?

Имейте в виду, я понятия не имею, будет ли работать то, что я уже сделал, учитывая, что я не могу проверить это без расширяемой ссылки, по которой можно щелкнуть.


image restructuredtext pelican
person Suzanne Hillman    schedule 31.03.2017    source источник
comment
Если бы директива ReST figure позволяла вам добавлять определенный класс CSS для изображений, то вы могли бы написать Javascript, который (на странице готов) выбирает все изображения, которые имеют этот конкретный набор классов, и добавляет правильное поведение при щелчке (потому что теперь вы знаете URL-адрес изображения). По сути, вместо того, чтобы добавлять поведение при клике при создании сайта, вы добавляете его после его загрузки.   -  person Malte Schwerhoff    schedule 04.04.2017
comment
Мальте: Это интересная идея. Хотя я не совсем уверен, как бы я это сделал! Я знаю, что могу указать классы изображений (действительно, у меня есть выше с «figclass»). Однако я не очень хорошо знаком с Javascript.   -  person Suzanne Hillman    schedule 05.04.2017
comment
Увидев $ в вашем фрагменте Javascript, я предполагаю, что вы используете jQuery. В таком случае взгляните на их документы: они довольно обширны и содержат множество примеров выбора узлов HTML на основе различных критериев, включая классы CSS, и способы изменения выбранных узлов.   -  person Malte Schwerhoff    schedule 06.04.2017