2024-08-13 16:38:02 +02:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
2024-08-28 21:31:27 +02:00
{{ if .IsThemeDark }}
< meta name = "darkreader-lock" >
{{ end }}
2024-10-09 21:03:53 +02:00
< title > {{ .Query }} - {{ translate "site_name" }}< / title >
2024-08-13 16:38:02 +02:00
< link rel = "stylesheet" href = "/static/css/style.css" >
2024-10-06 01:24:59 +02:00
< link rel = "stylesheet" href = "/static/css/style-fixedwidth.css" >
2024-08-13 16:38:02 +02:00
< link rel = "stylesheet" href = "/static/css/{{.Theme}}.css" >
2024-10-08 22:11:06 +02:00
< link rel = "search" type = "application/opensearchdescription+xml" title = "{{ translate " site_name " } } " href = "/opensearch.xml" >
2024-08-13 16:38:02 +02:00
< / head >
< body >
< form action = "/search" id = "prev-next-form" class = "results-search-container" method = "GET" autocomplete = "off" >
2024-10-22 12:15:09 +02:00
< h1 class = "logomobile" >
< div class = "logo-container" herf = "/" >
< a href = "/" >
< svg
id="svg"
version="1.1"
viewBox="0, 0, 29 ,86"
sodipodi:docname="logo.svg"
inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:bx="https://boxy-svg.com">
< sodipodi:namedview
id="namedview19"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
showgrid="false"
inkscape:snap-grids="true"
inkscape:zoom="4.8866279"
inkscape:cx="5.8322427"
inkscape:cy="12.483046"
inkscape:window-width="1920"
inkscape:window-height="1008"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg" />
< defs
id="defs4">
< bx:grid
x="-70.745"
y="-5.396"
width="237.293"
height="88.009" />
< / defs >
< g
id="svgg"
transform="translate(-31.678924,4.8938759)">
< path
id="path1"
d="m -44.354555,0.78356149 c -26.434,5.97600001 -30.434,42.38301051 -6.319,54.94200051 1.703,0.88701 4.424,1.702 7.829,2.221 4.486,0.68301 9.6,0.86601 9.583,0.154 -0.035,-1.43199 -7.299,-8.279 -8.664,-8.279 -3.155,0 -9.941,-5.66599 -11.972,-9.995 -8.053,-17.17399 5.784,-35.2969905 22.777,-29.8329902 13.493,4.3390002 18.108,22.6990002 8.656,34.4380002 -1.846,2.29399 -1.744,2.299 -4.39,-0.225 -4.805,-4.583 -8.58,-5.24601 -11.988,-2.104 -2.173,2.002 -2.148,2.663 0.153,4.144 1.906,1.227 13.408,12.956 17.488,17.833 4.294,5.133 5.245,6.141 7.526,7.971 4.4209992,3.548 12.4439992,5.86 14.67499925,4.229 0.67199995,-0.492 1.86099995,-7.792 1.35199995,-8.302 -0.118,-0.118 -1.337,-0.393 -2.70799997,-0.612 -5.35200003,-0.854 -9.21900003,-3.454 -14.18899923,-9.542 -3.492,-4.278 -4.129,-5.268 -3.386,-5.268 2.543,0 8.0529992,-8.62 9.8619992,-15.429 5.712,-21.502 -14.1099992,-41.3560005 -36.2849992,-36.34300051 m 65.138,1.52300001 c -15.8590008,3.717 -25.6410008,20.0570005 -21.51200077,35.9340005 3.73899997,14.378 19.16900077,21.386 34.40300077,19.394 4.709,-0.616 2.438,-0.651 4.456,-0.792 2.018,-0.141 6.447,-0.015 6.93,-0.194 0.409,0.019 0.716,-0.458 0.723,-0.948 l -0.006,-13.389 c -0.003,-7.364 -0.153,-13.62 -0.332,-13.902 -0.258,-0.407 -2.36,-0.488 -10.182,-0.391 -11.445,0.143 -10.964,-0.036 -10.964,4.079 0,2.439 -0.044,3.991 1.166,4.706 1.139,0.674 3.431,0.58499 6.689,0.409 l 3.754,-0.202 0.276,5.676 c 0.321,6.593 0.561,6.151 -3.647,6.704 -15.524,2.038 -24.0100008,-5.017 -23.3770008,-19.434 0.6630003,-15.104 12.1950008,-22.7790005 26.9570008,-17.94 4.51,1.478 4.409,1.524 6.165,-2.7910006 1.5,-3.6869999 1.499,-3.6919999 -0.825,-4.6919999 -5.427,-2.335 -15.559,-3.426 -20.674,-2.227 m 78.83,0.796 c -2.87,0.772 -2.908,0.847 -3.151,6.1239999 -0.257,5.5670006 0.122,4.9680006 -3.351,5.2910006 -3.431,0.319 -3.325,0.157 -2.758,4.206 0.61,4.363 0.59,4.34 3.755,4.34 h 2.651 v 12.696 c 0,14.499 1.548,16.328 3.503005,18.304 3.592,3.477 9.588,4.915 14.93,3.057 2.445,-0.851 2.427,-0.809 2.176,-4.955 -0.247,-4.096 -0.428,-3.489 -3.157,-2.908 -7.732,1.646 -8.272,0.605 -8.272,-15.048 v -11.341 h 5.664 l 5.335,-0.09 c 0.676,-0.02 0.976,0.395 1.286,-3.905 0.346,-4.798 -0.203,-4.014 -0.808,-4.144 l -5.813,0.177 -5.664,0.268 v -5.163 c 0,-5.8370005 -0.204,-6.4770005 -2.251,-7.0460005 -1.752,-0.486 -1.762,-0.486 -4.075005,0.137 m -34.494,11.0180005 c -2.645,0.382 -4.719,1.042 -8.548,2.718 l -4.031,1.766 c -1.086,0.383 -0.284,1.285 0.687,3.881 1.063,2.752 1.355,3.356 2.115,3.035 0.76,-0.321 0.701,-0.229 1.427,-0.649 9.076,-5.254 20.264,-2.635 20.264,4.742 v 2.135 l -5.957,0.205 c -13.838,0.477 -20.284,4.751 -20.374,13.511 -0.128,12.397 14.176,17.214 24.615,8.289 l 2.302,-1.967 0.23,1.849 c 0.316,2.538 0.608,3.064 2.044,3.67 1.414,0.597 7.158,0.623 7.746,0.035 0.767,-0.767 0.374,-6.004 -0.245,-6.337 -0.942,-0.507 -0.773,-1.57 -0.885,-12.635 -0.152,-14.866 -0.508,-16.501 -4.391,-20.131 -3.037,-2.839 -11.558,-4.903 -16.999,-4.117 m 72.851005,0.007 c -27.192,5.263 -24.132,43.953 3.472,43.89 14.663,-0.033 24.399,-12.771 21.526,-28.162 -1.856,-9.949 -14.324,-17.793 -24.998,-15.728 m 8.286,8.958 c 6.882,2.345 9.617,11.514 5.902,19.79 -4.124,9.191 -17.884,9.174 -22.137,-0.027 -1.317,-2.849 -1.237,-10.788 0.137,-13.535 2.999,-5.999 9.448,-8.494 16.098,-6.228 m -68.832005,18.5 v 3.091 l -1.856,1.636 c -7.456,6.574 -16.358,5.485 -15.595,-1.907 0.448,-4.344 3.618,-5.768 13.056,-5.866 l 4.395,-0.046 v 3.092"
stroke="none"
fill-rule="evenodd"
style="fill:currentColor" />
< g
aria-label="SEARCH ENGINE"
id="text7"
style="font-family:'ADLaM Display';white-space:pre;fill:currentColor"
transform="matrix(0.96497818,0,0,0.96497818,-146.24769,-215.06201)">
< path
d="m 170.42488,293.75705 v 1.1543 q -0.67383,-0.32227 -1.27148,-0.48047 -0.59766,-0.15821 -1.1543,-0.15821 -0.9668,0 -1.49414,0.375 -0.52149,0.375 -0.52149,1.06641 0,0.58008 0.34571,0.87891 0.35156,0.29297 1.32422,0.47461 l 0.71484,0.14648 q 1.32422,0.25195 1.95117,0.89063 0.63281,0.63281 0.63281,1.69921 0,1.27149 -0.85546,1.92774 -0.84961,0.65625 -2.4961,0.65625 -0.62109,0 -1.32422,-0.14063 -0.69726,-0.14062 -1.44726,-0.41601 v -1.21875 q 0.7207,0.4043 1.41211,0.60937 0.6914,0.20508 1.35937,0.20508 1.01367,0 1.56446,-0.39844 0.55078,-0.39843 0.55078,-1.13671 0,-0.64454 -0.39844,-1.00782 -0.39258,-0.36328 -1.29492,-0.54492 l -0.72071,-0.14062 q -1.32421,-0.26368 -1.91601,-0.82618 -0.5918,-0.5625 -0.5918,-1.56445 0,-1.16016 0.81445,-1.82812 0.82032,-0.66797 2.25586,-0.66797 0.61524,0 1.25391,0.11133 0.63867,0.11132 1.30664,0.33398 z"
id="path13" />
< path
d="m 172.79793,293.46994 h 5.53125 v 0.99609 h -4.34766 v 2.58985 h 4.16602 v 0.99609 h -4.16602 v 3.16992 h 4.45313 v 0.9961 h -5.63672 z"
id="path15" />
< path
d="m 183.30379,294.63596 -1.60547,4.35351 h 3.2168 z m -0.66797,-1.16602 h 1.3418 l 3.33398,8.74805 h -1.23047 l -0.79687,-2.24414 h -3.94336 l -0.79688,2.24414 h -1.24805 z"
id="path17" />
< path
d="m 192.73738,298.11642 q 0.38086,0.12891 0.73828,0.55079 0.36328,0.42187 0.72656,1.16015 l 1.20118,2.39063 h -1.27149 l -1.11914,-2.24414 q -0.43359,-0.87891 -0.84375,-1.16602 -0.4043,-0.28711 -1.10742,-0.28711 h -1.28906 v 3.69727 h -1.1836 v -8.74805 h 2.67188 q 1.5,0 2.23828,0.62695 0.73828,0.62696 0.73828,1.89258 0,0.82617 -0.38672,1.3711 -0.38086,0.54492 -1.11328,0.75585 z m -2.96484,-3.67382 v 3.10547 h 1.48828 q 0.85547,0 1.28906,-0.39258 0.43945,-0.39844 0.43945,-1.16602 0,-0.76758 -0.43945,-1.1543 -0.43359,-0.39257 -1.28906,-0.39257 z"
id="path19" />
< path
d="m 202.87996,294.14377 v 1.24805 q -0.59766,-0.55665 -1.27734,-0.83204 -0.67383,-0.27539 -1.43555,-0.27539 -1.5,0 -2.29688,0.91993 -0.79687,0.91406 -0.79687,2.64843 0,1.72852 0.79687,2.64844 0.79688,0.91406 2.29688,0.91406 0.76172,0 1.43555,-0.27539 0.67968,-0.27539 1.27734,-0.83203 v 1.23633 q -0.62109,0.42187 -1.31836,0.63281 -0.69141,0.21094 -1.46484,0.21094 -1.98633,0 -3.12891,-1.21289 -1.14258,-1.21875 -1.14258,-3.32227 0,-2.10937 1.14258,-3.32226 1.14258,-1.21875 3.12891,-1.21875 0.78515,0 1.47656,0.21093 0.69726,0.20508 1.30664,0.6211 z"
id="path21" />
< path
d="m 204.70808,293.46994 h 1.1836 v 3.58594 h 4.30078 v -3.58594 h 1.18359 v 8.74805 h -1.18359 v -4.16602 h -4.30078 v 4.16602 h -1.1836 z"
id="path23" />
< path
d="m 217.54597,293.46994 h 5.53125 v 0.99609 h -4.34765 v 2.58985 h 4.16601 v 0.99609 h -4.16601 v 3.16992 h 4.45312 v 0.9961 h -5.63672 z"
id="path25" />
< path
d="m 225.12801,293.46994 h 1.59375 l 3.8789,7.31836 v -7.31836 h 1.14844 v 8.74805 h -1.59375 l -3.87891,-7.31836 v 7.31836 h -1.14843 z"
id="path27" />
< path
d="m 240.06941,300.96994 v -2.34961 h -1.93359 v -0.97266 h 3.10547 v 3.75586 q -0.68555,0.48633 -1.51172,0.73829 -0.82617,0.24609 -1.76367,0.24609 -2.05078,0 -3.21094,-1.19531 -1.1543,-1.20118 -1.1543,-3.33985 0,-2.14453 1.1543,-3.33984 1.16016,-1.20117 3.21094,-1.20117 0.85547,0 1.62304,0.21093 0.77344,0.21094 1.42383,0.6211 v 1.25976 q -0.65625,-0.55664 -1.39453,-0.83789 -0.73828,-0.28125 -1.55273,-0.28125 -1.60547,0 -2.41407,0.89649 -0.80273,0.89648 -0.80273,2.67187 0,1.76953 0.80273,2.66602 0.8086,0.89648 2.41407,0.89648 0.62695,0 1.11914,-0.10547 0.49218,-0.11132 0.88476,-0.33984 z"
id="path29" />
< path
d="m 243.4034,293.46994 h 1.18359 v 8.74805 h -1.18359 z"
id="path31" />
< path
d="m 246.94246,293.46994 h 1.59375 l 3.87891,7.31836 v -7.31836 h 1.14843 v 8.74805 h -1.59375 l -3.8789,-7.31836 v 7.31836 h -1.14844 z"
id="path33" />
< path
d="m 255.91902,293.46994 h 5.53125 v 0.99609 h -4.34765 v 2.58985 h 4.16601 v 0.99609 h -4.16601 v 3.16992 h 4.45312 v 0.9961 h -5.63672 z"
id="path35" />
< / g >
< / g >
< / svg >
< / a >
< / div >
< / h1 >
2024-08-13 16:38:02 +02:00
< div class = "wrapper-results" >
2024-09-27 17:27:16 +02:00
< input type = "text" name = "q" value = "{{ .Query }}" id = "search-input" / >
2024-08-13 16:38:02 +02:00
< button id = "search-wrapper-ico" class = "material-icons-round" name = "t" value = "image" > search< / button >
2024-08-21 23:23:08 +02:00
< div class = "autocomplete" >
< ul >
< / ul >
< / div >
2024-08-13 16:38:02 +02:00
< input type = "submit" class = "hide" name = "t" value = "image" / >
< / div >
< div class = "sub-search-button-wrapper" >
< div class = "search-container-results-btn" >
< button id = "sub-search-wrapper-ico" class = "material-icons-round clickable" name = "t" value = "text" > search< / button >
2024-10-08 22:11:06 +02:00
< button name = "t" value = "text" class = "clickable" > {{ translate "web" }}< / button >
2024-08-13 16:38:02 +02:00
< / div >
< div class = "search-container-results-btn" >
< button id = "sub-search-wrapper-ico" class = "material-icons-round clickable search-active" name = "t" value = "image" > image< / button >
2024-10-08 22:11:06 +02:00
< button name = "t" value = "image" class = "clickable search-active" > {{ translate "images" }}< / button >
2024-08-13 16:38:02 +02:00
< / div >
< div class = "search-container-results-btn" >
< button id = "sub-search-wrapper-ico" class = "material-icons-round clickable" name = "t" value = "video" > movie< / button >
2024-10-08 22:11:06 +02:00
< button name = "t" value = "video" class = "clickable" > {{ translate "videos" }}< / button >
2024-08-13 16:38:02 +02:00
< / div >
< div class = "search-container-results-btn" >
< button id = "sub-search-wrapper-ico" class = "material-icons-round clickable" name = "t" value = "forum" > forum< / button >
2024-10-08 22:11:06 +02:00
< button name = "t" value = "forum" class = "clickable" > {{ translate "forums" }}< / button >
2024-08-13 16:38:02 +02:00
< / div >
< div id = "content" class = "js-enabled" >
< div class = "search-container-results-btn" >
< button id = "sub-search-wrapper-ico" class = "material-icons-round clickable" name = "t" value = "map" > map< / button >
2024-10-08 22:11:06 +02:00
< button name = "t" value = "map" class = "clickable" > {{ translate "maps" }}< / button >
2024-08-13 16:38:02 +02:00
< / div >
< / div >
< div class = "search-container-results-btn" >
< button id = "sub-search-wrapper-ico" class = "material-icons-round clickable" name = "t" value = "file" > share< / button >
2024-10-08 22:11:06 +02:00
< button name = "t" value = "file" class = "clickable" > {{ translate "torrents" }}< / button >
2024-08-13 16:38:02 +02:00
< / div >
< / div >
< / form >
< form class = "results_settings" action = "/search" method = "get" >
< input type = "hidden" name = "q" value = "{{ .Query }}" >
< select class = "results-settings" name = "safe" id = "safeSearchSelect" >
2024-10-08 22:11:06 +02:00
< option value = "disabled" { { if eq . Safe " disabled " } } selected { { end } } > {{ translate "safe_search_off" }}< / option >
< option value = "active" { { if eq . Safe " active " } } selected { { end } } > {{ translate "safe_search_on" }}< / option >
2024-08-13 16:38:02 +02:00
< / select >
< select class = "results-settings" name = "lang" id = "languageSelect" >
{{range .LanguageOptions}}
2024-10-10 18:41:53 +02:00
< option value = "{{.Code}}" { { if eq . Code $ . CurrentLang } } selected { { end } } > {{.Name}}< / option > <!-- this is too wide or too less, fix -->
2024-08-13 16:38:02 +02:00
{{end}}
< / select >
2024-10-08 22:11:06 +02:00
< button class = "results-save" name = "t" value = "image" > {{ translate "save_settings" }}< / button >
2024-08-13 16:38:02 +02:00
< / form >
2024-10-06 01:24:59 +02:00
< div class = "search-results" id = "results" >
2024-08-13 16:38:02 +02:00
<!-- Results go here -->
{{ if .Results }}
< div class = "images images_viewer_hidden" >
<!-- Images Grid -->
2024-10-06 01:24:59 +02:00
{{ range $index, $result := .Results }}
2024-10-06 18:11:58 +02:00
< div class = "image" >
2024-10-13 00:04:46 +02:00
< img
src="/static/images/placeholder.svg"
data-id="{{ $result.ID }}"
alt="{{ .Title }}"
2024-10-14 22:15:38 +02:00
data-full="{{ .ProxyFull }}"
data-proxy-full="{{ .ProxyThumb }}"
2024-10-13 00:04:46 +02:00
class="clickable"
2024-10-14 22:15:38 +02:00
/>
2024-10-06 18:11:58 +02:00
< div class = "resolution" > {{ .Width }} × < / div >
< div class = "details" >
2024-10-06 01:24:59 +02:00
< span class = "img_title clickable" > {{ .Title }}< / span >
2024-10-08 22:11:06 +02:00
< a href = "{{ .Source }}" target = "_blank" class = "img_source" > {{ translate "source" }}< / a >
2024-08-13 16:38:02 +02:00
< / div >
2024-10-13 00:04:46 +02:00
< / div >
2024-08-13 16:38:02 +02:00
{{ end }}
< / div >
2024-10-06 01:24:59 +02:00
2024-08-13 16:38:02 +02:00
< noscript >
< div class = "prev-next prev-img" >
< form action = "/search" method = "get" >
< input type = "hidden" name = "q" value = "{{ .Query }}" >
< input type = "hidden" name = "t" value = "image" >
{{ if .HasPrevPage }}
2024-10-08 22:11:06 +02:00
< button type = "submit" name = "p" value = "{{ sub .Page 1 }}" > {{ translate "previous" }}< / button >
2024-08-13 16:38:02 +02:00
{{ end }}
{{ if .HasNextPage }}
2024-10-08 22:11:06 +02:00
< button type = "submit" name = "p" value = "{{ add .Page 1 }}" > {{ translate "next" }}< / button >
2024-08-13 16:38:02 +02:00
{{ end }}
< / form >
< / div >
< / noscript >
{{ else if .NoResults }}
2024-10-08 22:11:06 +02:00
< div class = "no-results" > {{ translate "no_results" .Query }}< / div >
2024-08-13 16:38:02 +02:00
{{ else }}
2024-10-08 22:11:06 +02:00
< div class = "no-more-results" > {{ translate "no_more_results" }}< / div >
2024-08-13 16:38:02 +02:00
{{ end }}
< / div >
< div class = "message-bottom-left" id = "message-bottom-left" >
2024-10-08 22:11:06 +02:00
< span > {{ translate "searching_for_new_results" }}< / span >
2024-08-13 16:38:02 +02:00
< / div >
2024-10-06 01:24:59 +02:00
< div id = "image-viewer-overlay" style = "display: none;" > < / div >
2024-10-16 22:51:13 +02:00
< div id = "template-data" data-page = "{{ .Page }}" data-query = "{{ .Query }}" data-type = "image" data-hard-cache-enabled = "{{ .HardCacheEnabled }}" > < / div >
2024-08-30 17:22:07 +02:00
< script defer src = "/static/js/dynamicscrolling.js" > < / script >
2024-08-21 23:23:08 +02:00
< script defer src = "/static/js/autocomplete.js" > < / script >
2024-10-06 18:11:58 +02:00
< script defer src = "/static/js/imagetitletrim.js" > < / script >
2024-10-06 01:24:59 +02:00
< script >
2024-10-06 22:43:24 +02:00
document.addEventListener('DOMContentLoaded', function() {
let viewerOpen = false;
const viewerOverlay = document.getElementById('image-viewer-overlay');
viewerOverlay.innerHTML = `
< div id = "image-viewer" class = "image_view image_hide" >
< div class = "image-view-close" >
<!-- <button class="btn - nostyle">
< div id = "viewer-prev-button" class = "material-icons-round icon_visibility clickable image-before" > navigate_before< / div >
< / button >
< button class = "btn-nostyle" >
< div id = "viewer-next-button" class = "material-icons-round icon_visibility clickable image-next" > navigate_next< / div >
< / button > FIX THIS LATER! --!>
< button class = "btn-nostyle" >
< div id = "viewer-close-button" class = "material-icons-round icon_visibility clickable image-close" > close< / div >
< / button >
< / div >
< a class = "image-viewer-link" >
< div class = "view-image" id = "viewer-image-container" >
< img id = "viewer-image" class = "view-image-img" src = "" alt = "" >
< / div >
< / a >
< p class = "image-alt" id = "viewer-title" > < / p >
< p > View source: < a id = "viewer-source-button" class = "image-source" href = "" target = "_blank" > < / a > < / p >
< p >
< a class = "full-size" href = "#" > Show source website< / a >
< a class = "proxy-size" href = "#" > Show in fullscreen< / a >
< / p >
2024-10-06 01:24:59 +02:00
< / div >
2024-10-06 22:43:24 +02:00
`;
const imageView = document.getElementById('image-viewer');
function openImageViewer(element) {
const parentImageDiv = element.closest('.image');
if (!parentImageDiv) return;
const imgElement = parentImageDiv.querySelector('img.clickable');
2024-10-14 22:15:38 +02:00
const fullImageUrl = imgElement.dataset.proxyFull; // Use data-proxy-full for ProxyFull
const thumbnailUrl = imgElement.src; // Use ProxyThumb for the thumbnail
2024-10-06 22:43:24 +02:00
const title = imgElement.alt;
2024-10-14 22:15:38 +02:00
const sourceUrl = parentImageDiv.querySelector('.img_source').href; // Source webpage URL
2024-10-06 22:43:24 +02:00
2024-10-14 22:15:38 +02:00
if (!fullImageUrl || viewerOpen) {
2024-10-06 22:43:24 +02:00
return; // Don't open if data is missing or viewer is already open
}
viewerOpen = true;
const viewerImage = document.getElementById('viewer-image');
const viewerTitle = document.getElementById('viewer-title');
const viewerSourceButton = document.getElementById('viewer-source-button');
const fullSizeLink = imageView.querySelector('.full-size');
const proxySizeLink = imageView.querySelector('.proxy-size');
2024-10-14 22:15:38 +02:00
// Set the viewer image to ProxyFull
viewerImage.src = fullImageUrl;
2024-10-06 22:43:24 +02:00
viewerTitle.textContent = title;
viewerSourceButton.href = sourceUrl;
2024-10-14 22:15:38 +02:00
fullSizeLink.href = sourceUrl; // Link to the source website
proxySizeLink.href = fullImageUrl; // Link to the proxied full-size image
2024-10-06 22:43:24 +02:00
viewerOverlay.style.display = 'flex';
imageView.classList.remove('image_hide');
imageView.classList.add('image_show');
}
// Attach event listener to the document body
document.body.addEventListener('click', function(e) {
let target = e.target;
let clickableElement = target.closest('img.clickable, .img_title.clickable');
if (clickableElement) {
e.preventDefault();
openImageViewer(clickableElement);
}
});
function closeImageViewer() {
imageView.classList.remove('image_show');
imageView.classList.add('image_hide');
viewerOverlay.style.display = 'none';
viewerOpen = false;
2024-10-06 01:24:59 +02:00
}
2024-10-06 22:43:24 +02:00
// Close viewer on overlay or button click
document.getElementById('viewer-close-button').addEventListener('click', closeImageViewer);
viewerOverlay.addEventListener('click', function(e) {
if (e.target === viewerOverlay) {
closeImageViewer();
}
});
// Handle keyboard events for closing and navigation
document.addEventListener('keydown', function(e) {
if (viewerOverlay.style.display === 'flex') {
if (e.key === 'Escape') {
closeImageViewer();
}
}
});
});
2024-10-14 22:15:38 +02:00
2024-10-06 01:24:59 +02:00
< / script >
2024-10-13 00:04:46 +02:00
<!-- JavaScript to Load Images -->
< script >
document.addEventListener("DOMContentLoaded", function() {
2024-10-16 22:51:13 +02:00
const templateData = document.getElementById('template-data');
const hardCacheEnabled = templateData.getAttribute('data-hard-cache-enabled') === 'true';
2024-10-17 10:22:31 +02:00
if (hardCacheEnabled) {
2024-10-16 22:51:13 +02:00
// Hard cache is disabled, so skip polling and load images directly
const images = document.querySelectorAll("img[data-id]");
images.forEach((img) => {
// Use the ProxyFull URL directly
img.src = img.dataset.proxyFull;
img.onload = function() {
img.classList.add('loaded');
};
img.onerror = function() {
console.error('Failed to load image:', img.dataset.proxyFull);
};
});
return;
}
2024-10-13 00:04:46 +02:00
let imageMap = {}; // Map of image IDs to img elements
let loadedImageIDs = new Set(); // Keep track of loaded image IDs
let pollingInterval = 2000; // Initial polling interval in milliseconds
let polling = false;
function initializeImages() {
const images = document.querySelectorAll("img[data-id]");
images.forEach((img) => {
const id = img.dataset.id;
if (!imageMap[id]) {
imageMap[id] = img;
}
});
}
// Initialize with images present at page load
initializeImages();
// Set up MutationObserver to detect new images added to the DOM
const observer = new MutationObserver((mutationsList) => {
for (let mutation of mutationsList) {
if (mutation.type === 'childList') {
mutation.addedNodes.forEach((node) => {
if (node.nodeType === Node.ELEMENT_NODE) {
if (node.matches & & node.matches('img[data-id]')) {
const img = node;
const id = img.dataset.id;
if (!imageMap[id]) {
imageMap[id] = img;
console.log('New image added:', id);
if (!polling) {
checkImageStatus(); // Start polling if not already started
}
}
} else {
// Check for nested images within added nodes
const nestedImages = node.querySelectorAll & & node.querySelectorAll('img[data-id]');
if (nestedImages & & nestedImages.length > 0) {
nestedImages.forEach((img) => {
const id = img.dataset.id;
if (!imageMap[id]) {
imageMap[id] = img;
console.log('New nested image added:', id);
if (!polling) {
checkImageStatus(); // Start polling if not already started
}
}
});
}
}
}
});
}
}
});
// Start observing the document body for added nodes
observer.observe(document.body, { childList: true, subtree: true });
function checkImageStatus() {
polling = true;
const imageIDs = Object.keys(imageMap).filter(id => !loadedImageIDs.has(id));
if (imageIDs.length === 0) {
polling = false;
console.log('All images loaded.');
return;
}
console.log('Checking status for images:', imageIDs); // Debugging
fetch('/image_status?image_ids=' + imageIDs.join(','))
.then(response => response.json())
.then(statusMap => {
console.log('Status map:', statusMap); // Debugging
let imagesStillLoading = false;
for (const [id, url] of Object.entries(statusMap)) {
const img = imageMap[id];
if (url) {
// Append cache-busting query parameter
const cacheBustingUrl = url + '?t=' + new Date().getTime();
if (img.src !== cacheBustingUrl) {
img.src = cacheBustingUrl;
img.onload = function() {
// Image loaded successfully
img.classList.add('loaded');
loadedImageIDs.add(id);
};
img.onerror = function() {
console.error('Failed to load image:', url);
};
}
} else {
imagesStillLoading = true;
}
}
if (imagesStillLoading) {
// Poll again after a delay
setTimeout(checkImageStatus, pollingInterval);
} else {
polling = false;
console.log('All images loaded.');
}
})
.catch(error => {
console.error('Error checking image status:', error);
// Retry after a delay in case of error
setTimeout(checkImageStatus, pollingInterval * 2);
});
}
// Start polling
checkImageStatus();
});
2024-10-16 22:51:13 +02:00
< / script >
2024-08-13 16:38:02 +02:00
< script >
// Check if JavaScript is enabled and modify the DOM accordingly
document.getElementById('content').classList.remove('js-enabled');
< / script >
< / body >
2024-10-06 18:11:58 +02:00
< / html >
