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');
Related
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>";
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 am using a script, blazy, to change my page's images as the user scrolls down. It works fine, and I would like the user to have the possibility to share each image to his friends on Facebook. I managed to link the url to an anchor to the image. When sharing a link, a little thumbnail is displayed with the link with a short description of the image. My problem is that only the logo of my website is displayed and not the image the user wants to share.
<a class="facebook_share" href="actualites.php#237" onclick="
window.open(
'https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href.split(location.hash||'#')[0] + '#237'),
'facebook-share-dialog',
'width=626,height=436');
return false;">
</a>
<div id="237">
<a href="content/posts/237/449.jpg" title="Voir en taille réelle">
<img class="b-lazy"
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-src="content/posts/237/449_thumb.png" alt="image" width="700px">
</a>
</div>
Looking at The Open Graph protocol, I tried to create a meta tag when clicking on the Facebook share button. The result is the same -- the image I want to share is not displayed, this is because Facebook linter only looks at the HTML in the response and does not run any scripts. The content of my page always changes, I cannot write the meta tags "by hand".
<a class="facebook_share" href="actualites.php#237" onclick="
$('meta[name=og:image]').remove();
$('head').append('<meta name=\'og:image\' content=\'***/content/posts/237/449_thumb.png\'>');
window.open(...[see above]);
I'm rather new to programming, but I'm trying to find a way to do what is described below.
<body>
<div class="gallery">
<img src="photo_1.jpg">
<img src="photo_2.jpg">
<img src="photo_3.jpg">
<!-- trigger for user to load items that weren't downloaded on page load -->
<img src="photo_4.jpg">
<img src="photo_5.jpg">
<img src="photo_6.jpg">
</div>
</body>
I'm trying to find PHP functions that would, ideally, only load the first 3 img embeds within a certain class/ID, and have a clickable trigger to request the remaining img embeds from the server.
I don't know if this is how the typical message board software(such as vBulletin) handles things with "spoiler tags" .. as in whether or not it actually prevents loading, or just hides the content from view. Something like that, if it actually prevents loading, is what I'd like to know about.
First, this has nothing to do with PHP.
The only way to prevent a page from loading the image is to not include the tags on the page.
You could accomplish this a couple ways:
Place the last three photos inside a hidden container and use a Javascript click event to display them when wanted, but that still loads the images when the page is loaded.
Or, you can use an AJAX call to retrieve the items only on demand. Unless they are really large images I would think the first option the best.
<div class="gallery">
<img src='photo1.jpg'/>
<img src='photo2.jpg'/>
<img src='photo3.jpg'/>
<a href="#" onClick='document.getElementById("hidden-gallery").display="visible"'>show more</a>
<div id="hidden-gallery" class="hidden-gallery" style="display:none">
<img src='photo4.jpg'/>
<img src='photo5.jpg'/>
<img src='photo6.jpg'/>
</div>
</div>
I recognize that embedding CSS styles and Javascript the way I did is not the preferred method but it is there just for the examples sake.
i need to open a div (or somethings other, dunno what) when mouse go on a link. But this div doesnt move other div. It must open OVER the others div (like this website...when there are the "popup/error" div over others div. How can do it? Transparent? Or somethings like it?
for example, if i write somethings into title field in a link statement, there is a small windows that show to me what i wrote. somethings like it, but with a div, or somethings other when i can put text, image, ecc.
as another example, on facebook when i go on the main wall and i go with mouse on the name of the users, it show me a small windows with more details. the same when i open the chat box :)
code :
<div class="playerDetailsOff">
Name : Marco<br />
Surname : Daghine
</div>
<a class="viewt" href="#" onmouseover="viewPlayerOn('id1?>');return false" onmouseout="viewPlayerOff();return false">link 1</a>
<a class="viewt" href="#" onmouseover="viewPlayerOn('id2?>');return false" onmouseout="viewPlayerOff();return false">link 2</a>
<a class="viewt" href="#" onmouseover="viewPlayerOn('id3?>');return false" onmouseout="viewPlayerOff();return false">link 3</a>
<a class="viewt" href="#" onmouseover="viewPlayerOn('id4?>');return false" onmouseout="viewPlayerOff();return false">link 4</a>
function viewPlayerOn(val) {
$('.playerDetailsOff').removeClass().addClass('playerDetailsOn');
}
function viewPlayerOff() {
$('.playerDetailsOn').removeClass().addClass('playerDetailsOff');
}
.playerDetailsOn{width:200px; height:100px; position:fixed;}
.playerDetailsOff{display:none;}
Basically what you want is an overlay or a lightbox (both terms are easy to google). Just as Felix Kling pointed out you will want absolute positioning - or you can look at z-index (highest z-index is on top).
Just to make it easy on you there was a similar question with example code which should definitely get you started: jQuery - How Do I Place a DIV On Overlay?
You want overLIB. Check out their homepage to see features and documentation.
Regards, Alin
You can use this one: http://www.leigeber.com/2008/06/javascript-tooltip/. It is a lightweight javascript if you don't want to use JQuery.