I have some fotorama pictures and I want to get a link to an specific one. For example I'd like to go to the third image of the carousel with a link and not only to the first one. I guess I should use the .activeIndex but I don't know how to do it.
Thanks in advance!
This is covered in the fotorama documentation.
Just add the attribute data-hash="true" to the enclosing fotorama div element:
<div class="fotorama" data-hash="true">
<img src="1.jpg" id="photo_1">
<img src="2.jpg" id="photo_2">
<img src="3.jpg" id="photo_3">
... etc ...
</div>
and then link to them using the id attribute as a URL fragment identifier, e.g.:
http://example.com/my_gallery.html#photo_1
http://example.com/my_gallery.html#photo_2
http://example.com/my_gallery.html#photo_3
There are some examples you can play with here: http://fotorama.io/customize/hash/
Related
Currently, i'm buiding my rich text editor with quill and i need to create an embed for images. Before quill, i used to use redactor and i try to move to redactor. But, i already have 2 version of data from redactor before where the users is already uploaded images.
Version 1:
<p>
<img src="http://lorempixel.com/400/200/" data-image="5bb71bdc65465e0675ba" class="img-fluid img-responsive">
</p>
Version 2:
<figure>
<img src="http://lorempixel.com/400/200/" data-image="1bdc65465e0675ba1b2b" class="img-fluid img-responsive">
</figure>
Expected behavior:
I expect to replace the p with figure on initial parsing in quill. So, all the images have same parent figure
Actual behavior
figure is always deleted by default
I tried to register figure with blots/block/embed but i can't check and add the figure if the image doesn't have figure on its parent
Thank you
I like to post the video link on my website but that doesnot work
<div ng-repeat="vid in video">
<iframe class="embed-responsive-item" width="250px" height="250px" src="https://www.youtube.com/embed/+{{vid.youtube}}" frameborder="0" allowfullscreen></iframe>
</div>
The above code not working, please help.
You must use the ngSrc attribute as they say in the Angular documentation otherwise your browser tries to fetch the url with "{{vid.youtube}}".
Plus you don't need to add a "+", there isn't any on Youtube urls.
EDIT : I actually had the same problem with iFrames, and I forgot about it : you must tell Angular you "trust" the Url given. Take a look a this post, it's exactly the same problem.
I am trying to apply angular-translate using the 'translate="KEY"' directive.
However, if I add this to a <p> tag and then to an <a> tag within this, only the first translation appears. When I view this in console, the translation appears to work, but it does not appear on the screen.
<p translate="CLICK">
</p>
This should output as:
Click here
But it appears only as:
Click
Thanks for any help.
The problem is that the <p> surrounds the <a> tag. The translate directive replaces the content of <p> with the translation. So the result is <p>Click</p>.
The directive itself is working fine, see my working Plunker .
-
$translateProvider.translations('en',{
'LINK_A': 'Stackoverflow',
'LINK_B': 'Google'
}).preferredLanguage('en');
In Canada, we have a new law that you must have ALT tags for images but when my page loads, the fotorama plug-in seems to remove them from the code. Is there a workaround or something that I can do?
I have been in a same situation like you are now.
Fotorama seems to discard and totally remove alt and title tags as not necessary in its purposes.
You need to raise a bug in its bug tracking system so that in its future releases it may include this tag particularly and all the other HTML standard tags that blindfully it discards.
In order to show the Alt and Title in image use the image with in DIV.
Use :
<div><img src="http://www.example.com/image.png" alt="My Alt" title="My Title"/></div>
Instead of :
<img src="http://www.example.com/image.png" alt="My Alt" title="My Title"/>
Just want to let you(other) know. Issue with stripping "Alt", "Title" attributes have been fixed (I really like this dll, and this issue used to freak me out), I asked owner to pull fix.
I want to put a image on header in jQuery mobile.
I try this, but it doesn't work at all.
<div data-role="header">
<img src = "hello.png">
<h1>welcome</h1>
</div>
but strange is that the image did not show in Header.
The pic appears before the header.
But I want the pic inside the header
on one here.
I find the problem it seems that you should put the element in the tag
<h1><image src="a.png"></h1>
and it works