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?
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>";
opencart product carousel and popup magnifition of product image after click on it
Hi dear anthers,
I have a problem in opencart product carousel that when my customers are clicking on the image of product block in product carousel it shows the image of product instead of redirecting customer to the page of product. How can I make it so that when I choose inspect element it shows in the code file a jquery icon at the end of code row. The jquery code box in debugger contains a magnificent popup code for showing an image. So how can I disable it so that when a customer clicks on the image of product, a product page opens after.
This is the code of product:
<div class="image clearfix">
<a class="img" itemprop="url" title="Kunc euismods" href="http://localhost/pavo1/index.php?route=product/product&product_id=138">
<img class="img-responsive" itemprop="image" src="http://localhost/pavo1/image/cache/catalog/demo/cosmetic/4c-199x201.jpg" title="Kunc euismods" alt="Kunc euismods">
</a>
</div>
you'll need to change the class name "image":
<div class="image clearfix">
to something else, or change the jQuery trigger at the very bottom of the page, as this makes the links within the <div class="image"></div> all behave as Gallery Popups.
$(document).ready(function() {
$('.image').magnificPopup({
type:'image',
delegate: 'a',
gallery: {
enabled:true
}
});
});
Personally I'd go for changing the class as the Magnific popup is tied into several features throughout the Opencart system.
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 the latest version of anything slider on wp 3.0.4 and i'm having a problem. The slider works but for each slides it adds an extra empty slide -.- (if i have 2 slides it adds 1 slide per "real" slide)
This is the code that i use in my page on wordpress
http://pastie.org/1492604
how do i fix this stupid problem ? Thanks
edit: this is the generated code from wordpress i think that there is nothing wrong
http://pastie.org/1492679
Also from my custom post type there no blank posts.
just don't hit return before entering the next image, wordpress enters a break automatically which messes with the script.
instead of
<div id="slider>
<img src="..." />
<img src="..." />
</div>
use
<div id="slider>
<img src="..." /><img src="..." />
</div>