My goal is to allow someone to view several images and play, pause,
stop an audio file that will play when someone views the images.
Deliverable: multiple images that scroll to the next picture using
fancybox navigation and an audio player at the bottom that plays a
single audio clip.
I think I probably need to add a div at the bottom of Fancybox and
then embed my player. What's the proper method? I'm a bit new with JQuery and
Fancybox :(
try these API options instead of onComplete and onClosed
'titlePosition' : 'inside',
'titleFormat' : function(title) {
return '<span>'+title+'<br /><embed style="position:absolute;" src="test_song.mp3" type="audio/mpeg" controller="false" pluginspage="http://www.apple.com/quicktime/download/" width="1" height="1" /></span>';
}
of course, check that the embed part is correct (I just copy/paste from your code) ... you may test it as a normal html embed in your page.
NOTE: this is for fancybox v1.3.x
Related
How can I add allowfullscreen to featherlight.js for a video?
The example on the http://noelboss.github.io/featherlight/ website for the iFrame video has allowfullscreen on it, I just can't figure out how to add it to my own video url.
The format for adding the video URL I'm using is:
link
I can't figure out where to put the allowfullscreen since adding it to the URL doesn't work, I also tried this:
link
But it didn't work.
Thanks!
Charles
Either do like the example (have an hidden <iframe> already present on the page), or else use the afterContent callback to add the attribute.
I'm creating mobile page that has video player div in it.
And I'm trying to make it autoplay when someone visits the page.
So I tried this with settimeout function
My code is
javascript
setTimeout(function(){
window.location = $('#play').attr('href');
}, 2000);
html
<a id="play" href="<?=$data['video']?>">
I'm trying to play a video after 2sec when page is loaded.
but when I close the video and come back to the previous page, it loads the video again..
This keeps on going forever...
Is there any way to stop this?
And is there any other better way to autoplay the video other than the method I used?
The video is page. But there is nothing but a video. And when I click the link it gets large and plays by the player in the mobile device.
When you set window.location it takes you to the page with the video, then when you go back it starts the setTimeout again. The only way to make it work is to go at it from another route. If you need to use the href of the a tag then I would put the video in an iframe and when clicking on the link, show the iframe and set the source of the iframe.
Ok, weird issue:
1) Go here on an iPhone (Safari browser): http://powellcreative.com/our-team/
2) Click any of the team images to get to the team member page
3) Click the back button on the browser
4) The image is disappeared on the Team page now
I know this question is kind of old, but I was looking for a solution to a similar problem and after searching, I found a solution. Hopefully this helps other people with the same problem. The problem is when you give iOS a javascript event like onmouseover or onmouseout it doesn't like it, mainly because when your finger is "mousing over" an element in iOS, you are actually clicking on it, so this is the solution I came up with that seems to reload images after hitting the back button in iOS.
Here it is:
Make sure all images are in their own separate div with a distinctive name.
Example:
<div name="div1"><img src="yourimage" onmouseover="javascript:this.src='yourimage2';" onmouseout="javascript:this.src='yourimage';"></div>
In the javascript head part of your page you want to insert this:
window.onpageshow =
function(event){
if (event.persisted){
//for every div and image you want changed back you can add a loop here to change all at once or just one div by name//
document.getElementById('div1').innerHTML = '<img src="yourimage" onmouseover="this.src="yourimage2";" onmouseout="this.src="yourimage";">';
}
}
This will check for page back since Mobile Safari uses bfcache and reload your image into the div. Hopefully this helps OP or someone else.
On my page, overlays are loaded by inserting their content with jQuery and then fading in.
What I want to do is this:
When you click to open an overlay, an URI is loaded (e.g. news/12, where news is the category and 12 is the id of the item to load).
Except, instead of loading it in body, it should be loaded in the overlay.
In other words, I want to achieve something like on facebook, where you open an overlay, the url changes, but the main page stays the same.
I'm guessing you need ajax for this, but I have no idea whatsoever how to do it.
Thanks
It sounds like you want to use the new history.pushState(...) and history.popState(...) browser API.
This SO post might help you out: Change the URL in the browser without loading the new page using JavaScript
Use Boxy. See http://onehackoranother.com/projects/jquery/boxy/tests.html#
AJAX example:
<a href='#' onclick='Boxy.load("test-1.html");'>Test 1</a>
See this question: Ajax - How to change URL by content
I solved it thanks to Lethargy's answer.
.pushState() is exactly what I need to have the URL reflect the contents of the overlay that is dynamically created with jQuery.
With some tweaking around and debugging I managed to get it all working.
Now my overlays (or popups, dialogs, whatever) are search engine ready, and the url is copy-pastable for users :)
In my app I need to lay some text which I'm getting from a parsed data. Currently I'm currently laying it in a label. The problem is there are going to be some html tags indicating an image [along with its url] and videos etc in that plaintext. What is a good way to handle this identifying images and videos tags and laying corresponding images and videos along with rest of the plaintext dynamically?
EDIT:
Suppose I'm having following text
<img alt="" src="http://www.abc.com/editorial/wp-content/uploads/2010/05/hattos-150x150.jpg" title="Graduation" class="alignnone" width="150" height="150" />
For many, graduation is the time when they start thinking of their career planning. Many of you know that they want to make a difference, but don't know how to go past that statement.
Then while displaying I want to display an image indicated by the url in place of
<img alt="" src="http://www.abc.com/editorial/wp-content/uploads/2010/05/hattoss-150x150.jpg" title="Graduation" class="alignnone" width="150" height="150" />
and
display
For many, graduation is the time when they start thinking of their career planning. Many of you know that they want to make a difference, but don't know how to go past that statement.
as it is below the image. And this should happen at runtime. There might also be a video url in place of image url.
Thanx in advance.
If you see an "img" element, create your custom DetailView. In your "detail" view, pass the address in which will be found in the attributes property of the "img" element using [[element attributes] objectForKey:#"src"]; Use the address to download and populate a UIImage. The contents in the <p> element (the block tags are missing in your example) can be passed to a UILabel or UITextView whichever is appropriate. If you see a video tag, create an MPMoviePlayerController using initWithContentURL: with the "src" attribute and push onto the view stack.