I made a "musicbox" which shows a music cover and when hovered over it shows a toggleable playbutton, to either play or pause the music.
Now what i want to achieve is the following:
When clicked ON the play/pause button the music will play or pause (did this part)
when clicking anywhere on the cover except the play/pause button it should link (href?) to another page
I tried several things but cannot get the playbutton excluded from the href, i think it should remain inside the ".overlay" because they contents need to be hidden unless you hover over the div/musicbox
echo"
<div class='musicbox' align='center'>
<a>
<div class='overlay'>
<img data-value='../../admin/uploads/tracks/".$music_track."'
data-value='../../admin/uploads/tracks/".$music_oggfile."'
onclick='updateSource(this)' class='btnplay' src='../media/images/go.png'></img>
<img class='btnpause' src='../media/images/stop.png'></img>
<div class='desc'>".$music_title."</div>
</div>
</a>
<img class='cover' src='../../admin/uploads/images/".$music_image."' width='350' height='350'>
</div>";
Related
I created an tooltip using qTip 2, where an image and the title is displayed.
But:
If you click the image inside the tooltip, a modal box displays.
In this modal-box the image should be displayed, but it isn't.
Here it is: http://jsfiddle.net/fDavN/8378/
<div id="openModal" class="modalDialog">
<div>
X
<img src='{{{img}}}' alt='image could not be displayed' class='profilep' />
</div>
</div>
Could you take a look at the source code of the modalbox?
Am I not allowed to use {{{img}}} inside it?
I have many documents on my server that are available for my visitors to download. I have a display set up like so:
<ul class="thumbnails">
<li class="span4">
<div class="thumbnail">
<img src="http://placehold.it/320X200" alt="ALT NAME">
<div class="caption">
<h3>Header Name</h3>
<p>Description</p>
<p align="center">Download</p>
</div>
</div>
</li>
</ul>
Now within this I currently have a image as the main display for each document. I am wanting to display a preview of the document in that space. Maybe a screenshot completed by the browser on page load of just the first page of the document.
I have tried <iframe src="assets/documents/NHSHandbook1314.doc" width="230" height="144"></iframe> instead of the image but that resulted in nothing being displayed in the iframe and the document downloading as soon as the page loads.
I would like to do this using javascript or php on page load. I basically want the browser to take a "screenshot" of the external document and then display it for the visitor to preview. I don't want them to be able to interact "read" the document from the preview, just see what they are downloading. (at least the first page)
I hope that makes sense on what I am wanting to do!
Browsers cannot render Microsoft Word documents. You will need to generate some sort of thumbnail on the server and display that.
I am using the jQueryUI dialog modal like this:
<div id="dialog-modal" title="Basic modal dialog">
<img src="#" alt="Pictures" />
</div>
I have a PHP foreach loop that displays three image icons at any given moment. The image urls are in a MySQL database. The images themselves are contained inside anchor tags, and shown as a thumbnail. The <a> contains a class called "theLink". jQuery knows to open up the dialog when you click on "theLink" (in essence, clicking on the pic).
My hope is to allow the image to be shown much larger than a thumbnail by clicking on it. And then it will dynamically transfer the image link to the modal dialog where it will be shown. So again, one modal dialog div (as seen above) just under the <body> tag. This is what I am looking for:
When you click on "theLink" it will take the PHP generated image link from the img and use it to replace the "#" in the modal div.
<a> <img src="PHP GENERATED" /> </a>
I figured out the answer by getting jQuery basics down.
I had to create a class called ImageLink in the image that is php generated. I had to use a class, not an ID because this class would be repeated three times as I have three thumbnails displayed at a time.
Keyword 'this' was important so I can point to the specific imageLink class.
<a><img src="PHP GENERATED" class="imageLink" /></a>
Then, in jQuery:
var realImage = $(this).find('.imageLink').attr("src");
$('#popUpImage').attr('src', realImage);
$('#dialog-modal').dialog('open');
I'm creating a website for a kiosk. I've got 3 divs on one page, everytime when a div is clicked, next div shows up using a photoslide, and the previous div hides away.
My problem is that when the welcome screen (first div) is showing (the whole page/div is an a tag), the status bar down the bottom shows the linking address all the time. I posted another post, people told me it is not possible to hide the status bar.
So my question is how do I set the cursor to be off screen/off set, so the status bar only shows when a visitor is interacting with the screen.
Can I set the cursor offset using javascript, html/css or php? Any code/suggestions is appreciated.
Thanks!
Here is my html page below or see http://jsfiddle.net/EXfnN/8/
<div id="item1" class="item">
<div class="content">
<a href="#item2" class="panel">
<video id="my_Video" width="100%" height="100%" preload="auto" autoplay loop>xxxxxx
</video>
</a>
</div>
</div>
<div id="item2" class="item">
<div class="content">
<div id="back">
<ul id="awesome-menu">
<li>
ABC
</li>
<li>
National
</li>
<li>
Other
</li>
</ul>
</div>
</div>
</div>
<div id="item3" class="item">
<div class="content">
<img src="images/thankyou.jpg" alt="Thank you" /></div>
</div>
I'd suggest that if you're using JavaScript for this, that you don't need ANCHOR tags because you've already negated the need for them.
I'd suggest changing to adding click events to the div tags and storing additional application data on "data-" attributes and reading those with JavaScript instead.
This workaround eliminates a few problems like the one above.
you could make the first element a div only (without the a tag) catch the onclick event and then redirect via javascript (or do whatever action the a tag has)?
I'm using addthis.com to share my pictures from an album (just a page with some pictures in it).
This is my addThis code:
<div class="addthis_toolbox addthis_default_style addthis_32x32_style"
addthis:url="<?php echo HTTP; ?>album.php?id=<?php echo $_GET['id']; ?>"
http://lasala-gastrobar.be/album.php?id=27
addthis:title="An Example Title"
addthis:description="An Example Description">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_print"></a>
<a class="addthis_button_email"></a>
I have this code for every image in my album, and the javascript at the bottom.
Now when I share on facebook, it shares all the images, but I want to be able to share one 1 image at a time.
Same when I click print, only print that 1 picture, not the rest.
got it: the link has to go to a separate page showing only 1 image with correct tags in the head