I'm currently working on modifying a code snippet that utilizes jQuery to display the "title" attribute in an HTML element using JavaScript:
<a id="photo" href="{%=file.url%}" title="{%=file.name%}"
download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}"></a>
By setting the "title="{%=file.name%}", it outputs the full name of the file (including the image extension - .jpg.)
I attempted to introduce an id, as shown above, and used:
document.getElementById("photo").setAttribute("title", "new title");
However, I wasn't able to get it to work. My goal is to incorporate the following script:
var title2="{%=file.name%}";
title = (title2.slice(2, title2.length-4));
This script aims to remove the first 2 characters and last 4 characters from the file name, and then set it as the new title.
Would anyone be able to provide assistance?
Thank you!: )
<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<td style="padding-left:10px; display: inline-block;" class="template-download fade">
<div align="center" class="thumbnail" class="preview">
{% if (file.thumbnailUrl) { %}
<a id="photo" href="{%=file.url%}" title="{%=file.name%}"
download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}"></a>
{% } %} </div>
<p class="name">
{% if (file.url) { %}
<a href="{%=file.url%}" {%=file.thumbnailUrl?'data-gallery':''%}></a>
{% } %}</p></td>'{% } %}
</script>
I'm providing this information because the < a > tag resides within JavaScript in the body, rather than clean HTML, which may impede the use of document.getElementsById and document.getElementsByName here. I am unsure where to call this ID from. There's a small bug in this JS (') but it appears to be functioning correctly! :)