[GH-ISSUE #11] Alt Text button for mobile devices #10

New Issue

2026-06-06T22:29:02-04:00

yindo commented

2026-06-06 22:29:02 -04:00

Originally created by @hijinksensue on GitHub (Jan 24, 2015).
Original GitHub issue: https://github.com/Frumph/comic-easel/issues/11

Per our conversation, here's the js I use on my site for this. The positioning and graphics are obviously specific to my site:


<script type="text/javascript">
jQuery(document).ready(function() {
    var cA = jQuery('#comic img').attr('alt');
    jQuery('<a id="checker"></a>').insertAfter('.comic_navi_wrapper').magnificPopup({
        items: {
            src: '<div class="alt-text-popup">'+cA+'</div>',
            type: 'inline'
        },
        removalDelay: 500,
        closeOnContentClick: true,
        closeBtnInside: true,
        mainClass: 'mfp-fade'
    });
});
</script>

<!--End Mobile Alt Text Button Code-->```

---

Note: the programmer that wrote this for me said it was using a style or a container that was specific to my theme and would need to be changed if I ever changed themes. Obviously it needs to be adjusted to be more universal. Maybe it could just overtake the comics div or something that you are guaranteed to have on every easel site. 

---

Here's the CSS if that helps: 

/\* Start Mobile Alt Text Styles */
# checker {

position:absolute;
width:125px;
height:41px;
background:url(http://hijinksensue.com/assets/misc/mobile-alt-text-button.png);
background-position:0 -40px;
display:inline-block;
bottom: 82px;
right: 25px;
cursor:pointer;


}
# checker:hover {

background-position:0 0;


}
@media (max-width:767px) {
    #checker {
        position: static;
    }
}
.alt-text-popup {
  position: relative;
  background: white;
  padding: 25px;
  width: auto;
  max-width: 600px;
  margin: 0 auto;
  font-size:20px;
  -webkit-border-radius: 14px;
  -moz-border-radius: 14px;
  border-radius: 14px;
}
# comic-wrap {

position: relative;


}
/\* End Mobile Alt Text Styles */

Originally created by @hijinksensue on GitHub (Jan 24, 2015). Original GitHub issue: https://github.com/Frumph/comic-easel/issues/11 Per our conversation, here's the js I use on my site for this. The positioning and graphics are obviously specific to my site: --- ``` <script type="text/javascript"> jQuery(document).ready(function() { var cA = jQuery('#comic img').attr('alt'); jQuery('<a id="checker"></a>').insertAfter('.comic_navi_wrapper').magnificPopup({ items: { src: '<div class="alt-text-popup">'+cA+'</div>', type: 'inline' }, removalDelay: 500, closeOnContentClick: true, closeBtnInside: true, mainClass: 'mfp-fade' }); }); </script> ``` --- Note: the programmer that wrote this for me said it was using a style or a container that was specific to my theme and would need to be changed if I ever changed themes. Obviously it needs to be adjusted to be more universal. Maybe it could just overtake the comics div or something that you are guaranteed to have on every easel site. --- Here's the CSS if that helps: /\* Start Mobile Alt Text Styles */ # checker { ``` position:absolute; width:125px; height:41px; background:url(http://hijinksensue.com/assets/misc/mobile-alt-text-button.png); background-position:0 -40px; display:inline-block; bottom: 82px; right: 25px; cursor:pointer; ``` } # checker:hover { ``` background-position:0 0; ``` } @media (max-width:767px) { #checker { position: static; } } .alt-text-popup { position: relative; background: white; padding: 25px; width: auto; max-width: 600px; margin: 0 auto; font-size:20px; -webkit-border-radius: 14px; -moz-border-radius: 14px; border-radius: 14px; } # comic-wrap { ``` position: relative; ``` } /\* End Mobile Alt Text Styles */

yindo referenced this issue

2026-06-07 16:09:25 -04:00

[GH-ISSUE #10] "First in Chapter" navigation not working correctly #8

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: Frumph/comic-easel#10