I am making a website, in the website i haven an image with an image map.
I am stuck on this point, the popover is working perfectly in an tag but not in the tag. does anyone know how to get the twitter-bootstrap popover work on an image map?
I think it has someting to do with this line: $('#example').tooltip(options) tooltip exaple
the twitter-bootstrap pover
Thanks (i hope my English is understandable)
Turn your image map into something like (fill the ...px with actual dimensions):
<div id="#map" style="position:relative;width:...px;height:...px;background-image:...">
<a id="map-link-1" href="/path/url/for/target/or/#"
style="position:absolute;top:...px;left:...px;width:...px;height:...px"> </a>
<a id="map-link-2" href="/path/url/for/target/or/#"
style="position:absolute;top:...px;left:...px;width:...px;height:...px"> </a>
...
</div>
Then deal with the anchors like you are used to.
Related
I have been searching around and I couldn't find any post related to my Issue, so I decided to ask on Stackoverflow. I have this simple prettyPhoto gallery which I need to open via a FontAwesome Icon in a lightbox. Can someone please help me out?
CODE:
Photos:
I have a foreach loop in PHP which renders images for each gallery in their respective gallery which in this case is pp_gal
foreach ($talent_photos as $image) {
echo "<a href='{$image['url']}' rel='prettyPhoto[pp_gal]'><img src='{$image['url']}' width='{$image['width']}' height='{$image['height']}' alt='{$image['alt']}' /><br></a><br>";
}
Icon:
This is the Markup for the Icon by which they gallery should be opened in a lightbox.
<a class="icon-btn lens-icon"><br>
<img src="http://192.55a.myftpupload.com/wp-content/uploads/2015/10/lens.png" alt=""><br>
</a>
I hope I explained this correctly, if I didn't please let me know ..
Thanks ..
On prettyPhoto plugin page, there is no documentation for the plugin methods, so the best way is to trigger a click event on the first element of your gallery.
So on the fontAwesome button add the prettyPhoto gallery id eg:
<a class="icon-btn lens-icon" data-gallery="prettyPhotto[pp_gal]"><br>
<img src="http://192.55a.myftpupload.com/wp-content/uploads/2015/10/lens.png" alt=""><br>
</a>
Than you can trigger this from your JavaScript :
$("[data-gallery]").click(function(){
var galleryID = $(this).data("gallery");
$("a[rel='"+galleryID+"']").eq(0).trigger("click");
});
I want to share my google plus description. I am using Yoast WordPress SEO plugin v1.7.1.
No doubt it is making the meta decription tags but on clicking the description is not shared properly why ?
<a class="social-is social-googleplus" href="https://plus.google.com/share?url=" onclick="gplus=window.open(this.href+escape(window.location),
'', 'menubar=no,toolbar=no,resizable=no,scrollbars=no,height=300,width=600');return false;" target="_blank"></a>
What will be the issue ? Is my HTML Code true or there is something new ?
I was using og image with size 200x200. I used the image of size 600x600 and my problem resolved now.
For a while now I've been working on a rather simple website for myself.
I wanted to add a Lightbox since I thought it would suit the design, but I made a mistake in the process. Since I chose to use black and white images I decided to use the grayscale function. Now all the Images that I view with my Lightbox are black and white.
This is the Lightbox I use:
http://lokeshdhakar.com/projects/lightbox2/
This is a small but very important piece of my html:
<a href="img/Baking-Lightbox.jpg" data-lightbox="Baking" img src="img/Baking.jpg" data-title="My caption">
<img src="img/Baking.jpg">
</a>
can anybody tell me what I did wrong
Thank you in advance
According to how you implement this lightbox and based on the code you put into your HTML, it seems as though you have implemented the lightbox incorrectly. First, inside the head tag of your HTML, make sure that you include the CSS and links to the javascript files as follows:
<head>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/lightbox.min.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />
</head>
Once you have included those files, you should add images to you HTML using the following format ONLY:
Image #1
Replace "img/image-1.jpg" with the path to your image.
Replace "image-1" with any name that you would like to group your images together with. Make sure that any images that you would like to show together have this same value.
Replace "My caption" with what you would like to appear as a caption in the lightbox.
Replace "Image #1" with something that you would like to have appear in the HTML.
You can add as many anchor (a) tags as you need for each image.
Example
In the following example, I have two lightbox groups. One will show cars, and the other will show animals:
FROGS
DOGS
My SUV
A Toyota Camry
I want to change the text of a link using javascript. The problem is this particular link does not have an id. I am unable to change the html, as this is a SharePoint page, and this particular link is created by a page layout, which I do not have access to. Using IE Developer Tools, I see that the HTML surrounding the link is this:
<span id="DeltaPlaceHolderPageTitleInTitleArea">
<span>
<a href="#ctl00_PlaceHolderPageTitleInTitleArea_ctl00_SkipLink">
<img width="0" height="0" style="border-width: 0px;" alt="Skip Navigation Links" src="" /></a>
<span>
<a title="State-Compliance" href="/sites/tax/Compliance/SitePages/State-Compliance.aspx">State-Compliance</a>
</span>
<a id="ctl00_PlaceHolderPageTitleInTitleArea_ctl00_SkipLink"></a>
</span>
The link I wish to change is the second one, the one with "State-Compliance" for the tooltip.
I looked at jQuery, and found I could use $('#DeltaPlaceHolderPageTitleInTitleArea').find("a").text("Test"); to change the text, but it changes the text of all three links. How can I change just the one? Do I need to iterate through the three, or is there an easier way of getting the link I wish to change?
Sorry if this is a stupid question, I'm a c# developer, and this is my first experience using javascript.
Let me know if you need more information.
Warren
Use .eq():
$('#DeltaPlaceHolderPageTitleInTitleArea').find("a").eq(1).text("Test");
jsFiddle example
How about this, using the attribute equals selector:
$('#DeltaPlaceHolderPageTitleInTitleArea a[title="State-Compliance"]')
im using the "CREATE IMAGE GALLERY IN 4 LINES OF JQUERY" (link below), which works just fine.
But i like to make the large images clickable (not just the thumbs), so that when i click on which ever image that is showing as the large image, another bigger version of the image opens in a new window.
http://workshop.rs/2010/07/create-image-gallery-in-4-lines-of-jquery/
Any ideas is greatly appreciated. Thank you.
You can wrap the large image in an anchor element:
<div id="panel">
<a href="images/image_01_largest.jpg" target="_blank">
<img id="largeImage" src="images/image_01_large.jpg" />
</a>
<div id="description">First image description</div>
</div>
This follows the convention that one image comes in three sizes: *_thumb.jpg, *_large.jpg, and *_largest.jpg. All you need to do now is change anchor's href attribute when changing #largeImage's src.
$('#thumbs img').click(function(){
$('#largeImage').attr('src', $(this).attr('src').replace('thumb', 'large'));
$('#largeImage').parent().attr('href', $(this).attr('src').replace('thumb', 'largest'));
$('#description').html($(this).attr('alt'));
});
Hi you may try with the Pretty photo plugin for displaying the gallery in the light box. Demo for Preety Photo.This may help you