using the "inline player" demo.
<li>play song</li>
that will take me to a mp3 link, but since it has more parameters at the end, soundmanager doesn't load it as a mp3.
Try adding &filename=soundcloud.mp3 at the end.
<li>play song</li>
Please, try to add type="audio/mpeg" in your code like this:
<li>
<a type="audio/mpeg" class="sm2_button"
href="https://api.soundcloud.com/tracks/214947467/stream?client_id=THE_CLIENT_ID">
your eyes (title track) with intro
</a>
</li>
It, solved the same problem I was having.
Related
I have an little site with a video. Its a YouTube Video.
But if fancybox show up, the video it will not autostart.
Here is my code:
<section class="contact bg-primary" id="video">
<div class="container">
<h2>Videoteaser</h2>
<a data-fancybox data-width="640" data-small-btn="true" data-height="360" class="btn btn-outline2 btn-xl js-scroll-trigger"ata-small-btn="true" href="https://www.youtube.com/watch?v=MkCbpgUpkMo">Videoteaser</a>
</div>
</section>
To open up automatically I have this little JS on the bottom of the site:
$('[data-fancybox]').eq(0).trigger('click');
The Problem ist that the video do not autostart. No matter if I click on the button or if I use the little JS to autoopen the fancybox.
Only after klicken the Play-Button the Video do start.
How can I make ist autostart?
You are using Chrome, right? Then the answer is simple - it will not start due to Autoplay Policy Changes, see https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
Other then that - it works fine https://codepen.io/anon/pen/pqyzEM?editors=1000
I'm trying to use Fancybox 3 for opening vimeo embedded clips. I've Tried to replace an online image herf with the vimeo url but it doesn't work, how can I fix it?
<a class="fancybox" href="https://player.vimeo.com/video/179809192" data-fancybox >
<img src="video_preview/berlin_preview.png" class="berlin_preview"></a>
Thanks a lot ;)
I have a Tumblr and where are my Home and Ask links I want to put a PNG image with the words of the font I want. But I want the link to redirect to what I've originally put in the links of the blog. What should I add in the HTML to manage do that?
This is possible.
What you can do is create your png images and then upload them to tumblr here: http://www.tumblr.com/themes/upload_static_file
Make a note of the file link. Then in your theme you can code the links to have images instead of text.
This will depend on your theme to some extent, but it could look something like this:
<a href="/">
<img src="http://static.tumblr.com/yourfile.png" />
</a>
<a href="/ask">
<img src="http://static.tumblr.com/yourfile2.png" />
</a>
I am having a problem using fancybox with expression engine.
Basically I have different galleries set-up using matrix plugin. Each gallery has around 10 images. Basically I want the thumbnail to open up fancybox and fancybox to be able to scroll through the images in that matrix entry/gallery.
Sounds simple but I can’t seem to get fancybox to scroll through the images, it just stays on the first image.
This is my code for the thumbnails:
<ul id="image_gallery">
{exp:channel:entries channel="gallery_images"}
<li>
<a class="grouped_elements" href="{title_permalink='gallery/view'}" rel="{title}">
{gallery_image limit="1"}
{exp:imgsizer:size src="{image}" width="200px" height="180px"}
<img src="{sized}" width="{width}" height="{height}" alt="" />
{/exp:imgsizer:size}
{/gallery_image}
</a>
<h1>{title}</h1>
</li>
{/exp:channel:entries}
</ul>
This is my code for the fancybox template:
{exp:channel:entries channel="gallery_images"}
<ul id="img_gallery">
{gallery_image}
<li>
{exp:imgsizer:size src="{image}" width="650px" height="500px"}
<img src="{sized}" width="{width}" height="{height}" alt=""/>
{/exp:imgsizer:size}
</li>
{/gallery_image}
</ul>{/exp:channel:entries}
Everything works fine except for the image scrolling.
I’d appreciate any help!
Without seeing the output of your ExpressionEngine tags, it's difficult to understand where the problem is. However, your problem may be as simple as making sure all of the images in a gallery share the same HTML relationship attribute.
Fancybox Galleries are created from elements who share the same rel="" attribute:
<a class="gallery" rel="set_1" href="#"><img src="1.jpg" alt=""/></a>
<a class="gallery" rel="set_1" href="#"><img src="2.jpg" alt=""/></a>
<a class="gallery" rel="set_1" href="#"><img src="3.jpg" alt=""/></a>
<script>
$('a.gallery').fancybox();
</script>
In looking over your code, you're using the ExpressionEngine {title} tag as the rel="" attribute.
Since the title of your channel entry likely contains spaces and other special characters, a better choice would be to use the URL Title field, {title_permalink}.
The {title_permalink} tag converts the channel entry title to be URL-safe using either hyphens or underscores as character separators (using the Word Separator for URL Titles setting in the Global Channel Preferences).
Your updated thumbnail code would then be:
<a class="grouped_elements" href="{title_permalink='gallery/view'}" rel="{title_permalink}">
<img src="{sized}" width="{width}" height="{height}" alt="" />
</a>
If this doesn't work, perhaps you can provide a more complete code sample such as a jsFiddle or Pastie to help us understand where the problem may be.
I've been playing with html5 and I've noticed that sometimes the page displays my html differently in the dom (viewed through firebug) than it actually appears in my html files. The result is an element being replicated several times in different ways. I only notice this on nested elements.
For example:
<a href="#" class="block top-middle">
<h5 class="title-top">TITLE</h5>
<img src=""path/to/img.png" alt="TITLE" />
</a><!-- .top-middle -->
Is occasionally displaying as:
<a class="block top-middle" href="#"> </a>
<h5 class="title top">
<a class="block top-middle" _moz-rs-heading="" href="#">TITLE/a>
</h5>
<a class="block top-middle" href="#">
<img alt="TITLE" src="path/to/img.png">
</a>
I'm not really sure what the solution is but I wanted to know if anyone else has experienced glitches like this. I've sifted through every bit of my code and I can't find anything broken and the pages it happens on validate without any problems. It's especially frustrating because it only happens once in a while.
thanks!
**edit also, I know using anchor tags like this is not valid but as far as I have been able to tell with what I've read about html5 it is valid wrap content inside an anchor*
The browser/rendering engine was made before HTML 5 existed, so it is obeying the rule that anchors which are inline elements cannot contain h5s, which are block level.
This makes perfect sense. I don't think you can really do anything other than wait and see if the rendering engine adopts the HTML 5 rule that allows anchors to nest block levels such as h5s.
EDIT: I assume you are using the HTML 5 Doctype, although it probably won't have much bearing.
EDIT #2: This has been filed as a bug, even though I personally think it shouldn't be. A way around this seems to be wrapping the h5 in a div.