I'm using the library JQuery Filer. It can upload files pretty well and can display the upload files.
I'm using templates to show the files icons (Like this example).
I tried put a link to download file by clicking over the icon. So I put the href for itemAppend template, but I need put the url.
<a href=" ? ">
<div class="jFiler-item-inner">
...
</div>
</a>
Because I retrieve a Json object like this:
{
"name":"appended_file.jpg",
"size":5453,
"type":"image\/jpg",
"file":"191a1a.jpg",
"url":"http:\/\/dummyimage.com\/720x480\/f9f9f9\/191a1a.jpg"
}
But I don't found a way to use a *fi-** personalized variable ti insert the url in href. I would like something like 'fi-url' to generate the link:
<a href='{{fi-url}}'>
<div class="jFiler-item-inner">
...
</div>
</a>
I think it would be a good feature. Anyone knows if JQuery filer allows personalized fi-* variables or there another method to put the link.
Thanks
Related
I am running a flask app, and using a plugin named "Autoindex" for listing all the files in a directory,
like this
Now, when i click on an image name, it opens the image. But I want to downlaod the image without leaving the page on button click.
I cannot modify the HTML code of this. So I was thinking, can i use Javascript to perform this task?
EDIT
This is the HTML CODE:
<td class="name">
2.jpg</td>
<td class="modified">
<time datetime="2019-07-15 15:42:20.989829">2019-07-15 15:42:20.989829</time>
</td>
<td class="size">
Now, I cannot modify the HTML Code directly. The link has no class, how can I change this
2.jpg
to this, for all image links in the page.
2.jpg
You can use JS to add download attribute to a HTML element:
element.setAttribute('download','')
Or even simpler:
element.download=''
So, you can easily add this for each link with a href ending .jpg:
const links=document.querySelectorAll('a[href$=".jpg"]')
links.forEach(link=>link.download='')
It is so easy!
Put the image inside an tag or withing an tag then add the attribute download and the images' URL withing that tag.
here is an example:
<a href="https://www.publicdomainpictures.net/pictures/320000/nahled/background-image.png" download>
<img src="https://www.publicdomainpictures.net/pictures/320000/nahled/background-image.png" alt="W3Schools" width="104" height="142">
</a>
image
Note: The download attribute is not supported in IE or Edge (prior version 18), or in Safari (prior version 10.1).
I have a photo gallery on a website: http://www.firstaidlifeline.co.uk/gallery/.
However, no images are displayed on the website.
I believe the problem lies in the CSS (or JS), since the HTML looks good to me.
The HTML looks as follows:
<div id="flickrGal0" class="justified-gallery">
<a href="https://farm6.staticflickr.com/5813/22733190139_f81bfe7a9b_b.jpg" rel="flickrGal0" title="20130213_153547"><img alt="20130213_153547" src="https://farm6.static.flickr.com/5813/22733190139_f81bfe7a9b_m.jpg" data-safe-src="https://farm6.static.flickr.com/5813/22733190139_f81bfe7a9b_m.jpg">
<div class="caption">
<div class="photo-title photo-title-with-desc">20130213_153547</div>
</div>
</a>
...
...
...
</div>
The html by itself works elsewhere. So I think there is a conflict somewhere in the JS or CSS somewhere however, I'm unsure exactly where.
I looked up the source code, and the library. justifiedGallery.js file isn't loaded in the page. Function fjgwppInit_flickrGal0() that calls justifiedGallery() isn't called; this explains why the console doesn't fire up any error. Load justifiedGallery.js in the <head>
Put
jQuery(function(){
fjgwppInit_flickrGal0();
};
Somewhere on your page.
Edit
It seems the gallery is generated by a plugin, I presume you should play the settings, or, the plugin could be damaged. Plugin homepage
I am trying to get the URL of a link in the source code. The challenge is that the URL is hidden behind a image, and thus only letting me fetch the image-url.
I've been trying to figure a way to solve this issue by using the new CSS selector in the trigger system and also made a DOM variable that should get the URL when the image is clicked. There can also be multiple downloads.
Here is an example of what I am trying to achieve:
<div>
<div class="download">
<a href="example.com/The-URL-I-Want-to-get-if-top-image-is-clicked.pdf" target="_blank">
<img src="some-download-image.png"/></a>
<div class="download">
<a href="example.com/Another-URL-I-Want-to-get-if-middle-image-is-clicked.pdf" target="_blank">
<img src="some-download-image.png"/></a>
<div class="download">
<a href="example.com/Last-URL-I-Want-to-get-if-bottom-image-is-clicked.pdf" target="_blank">
<img src="some-download-image.png"/></a>
</div>
</div>
There are much code above and below this snippet, but with the selector it should be fairly easy to get the information I want. Only that I don't.
If anyone have met this wall and solved it, I really would like to know how. :)
This is one possible solution. So as I understand it, you would like to grab the anchor element's href attribute when you click the "download" image.
A Custom Javascript variable would need to be created so that you can manipulate the click element object:
function(){
var ec = {{Click Element}};
var href = $(ec).closest('a').attr('href');
return href;
}
So you will need to do your due diligence and add in your error checking and stuff, but basically this should return to you the href, and then you will need to parse the string to extract the portion that you need.
The problem I am having is similar to some questions already posted, but none of them provids an answer in respect to ZF2.
What I am trying to achieve is this: on an image click a clearbox (lightbox) should open with a form from a different PHP file.
What i have:
a view script in .phtml format which contains the image to be clicked.
an image.php file which contains the code for the function to be executed when the form is processed in the clearbox.
clearbox is attached and working fine:
<a
href="link\to\image.php"
rel="clearbox[width=800,height=600]"
title="Caption"
>
<img
src="img/test.jpg"
class="img-responsive img-rounded"
style="width:150px; height:200px;"
>
</a>
The problem:
First of all, where should I keep the image.php file in ZF2? And if I need to write a function as we do in pure PHP, keep all the functions in one file, whats the best practice in ZF2?
I tested the file as separately and it worked, but if I use the same URL for the clearbox, it will also display the layout for the page in box, which I don't want. So I need just the content of the file to work.
Please, let me know if the question is unclear.
EDIT:
Also, the page used in clearbox is coming through router using a separate .phtml view script, it would be great if someone can tell me how to call the file directly for the clearbox.
the solution for your problem is very simple you need to tell ZF2 that your view model is terminal so it won't render the layout file:
<a href="link\to\image.php?terminal=true" ...
and in the action :
$isTerminal = $this->params()->fromQuery('terminal',false);
$view = new ViewModel();
$view->setTerminal($isTerminal);
$view->setTemplate('my view script');
$view->setVariables(array(
'myvar' => $myvar,
));
return $view;
I am wondering if anyone knows a way to combine the "a href", "img src", and "alt" tags. We deal with a large amount of images and it is pretty tedious copying and pasting the same thing for all three fields for each picture in dreamweaver. Doing it once would be ideal. From what I have seen there is probably not much of a chance in doing this. I am using either HTML or Javascript.
<a href="../../0_Images/CRG_UnitType.jpg" target="_blank">
<img src="../../0_Images/CRG_UnitType.jpg" alt="CRG_UnitType.jpg" width="775" height="617" border="2" class="picture">
</a>
AngularJS can also solve this problem. Source it in your HTML and set up a controller that includes your image data, and then you can use ng-repeat. The result is something like this.
<div ng-repeat="image in images">
<a href ="{{image.href}}" target="_blank">
<img SRC="{{image.src}}" width="{{image.width}}" height="{{image.height}}" border="2" class="picture">
</a>
</div>
First of all, your alt attributes should not contain your image file name, they should be used to describe the content of images in case they don't load, or in case someone visually impaired navigate through your website.
To answer the question, you definitivly need to use some server-side language to save time.
You could for instance display all your images quite easily with PHP by looping through an array of files and titles.
You need some basic understanding of this language (or any other server-side language) before doing so but the time you'll spend doing so won't be lost.
It's possible,
you can use jquery to do what you want, and if the src is the same of the href as in your example the way is:
In HTML use only image, and place an additional class:
<img src="../../0_Images/CRG_UnitType.jpg" alt="CRG_UnitType.jpg" width="775" height="617" border="2" class="picture auto_add_link">
Now add jquery function:
$( ".auto_add_link" ).wrap(function() {
return '';
});
Not so pretty, but it works
Demo on jsfiddle