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");
});
Related
I want to display banner HTML code in popup for websites when someone click on the banner.
For example a banner is
<img src="https://myweb.com/images/banners/1.gif">
I want to display the following data in popup on clicking the banner image.
<img src="https://myweb.com/images/banners/1.gif" border=0><br>[url=https://myweb.com] [img]https://myweb.com/images/banners/1.gif[/img] [/url]
I don't have any knowledge about how this issue can be solved. Please help me in solving this problem.
Thanks
If you are just looking to display static text in a popup, would a confirm or alert prompt work e.g:
<a href="myweb.com" target="_blank" onClick="showHTML()">
<img src="https://myweb.com/images/banners/1.gif" border=0>
</a>
<script>
function showHTML(){
alert("<img src=\"https://myweb.com/images/banners/1.gif\" border=0>");
}
</script>
I am having trouble getting fancybox to display its corresponding images on a website that I'm building http://www.nomadicdrift.com/test/kaniwa#events . It's a custom one page portfolio theme that I set up on the WordPress platform.
If you follow the link to the events section you will see 1 figure item in a gallery like position. I have this image set up to work as a fancybox gallery, but when you click on it, it opens up the fancybox interface but does not place a image in the frame, even though it should. So this is the problem...the images do not show up in fancybox and instead I see just the frame.
Here is the html that I'm displaying:
<figure>
<a class="fancybox" data-fancybox-type="Fashion Show de Paris, France" href="http://www.nomadicdrift.com/test/kaniwa/wp-content/uploads/2012/07/NM2.jpg">
<img class="attachment-evento wp-post-image" width="231" height="191" title="NM" alt="NM" src="http://www.nomadicdrift.com/test/kaniwa/wp-content/uploads/2012/07/NM2-231x191.jpg">
</a>
<figcaption>
<a class="fancybox" data-fancybox-type="Fashion Show de Paris, France" href="http://www.nomadicdrift.com/test/kaniwa/wp-content/uploads/2012/07/CEDESAN.jpg"> </a>
<h4>Fashion Show de Paris, France</h4>
</figcaption>
</figure>
I'm not going to bore you with the PHP that I used to get that output because I think the problem lies elsewhere.
***I have tried to set up a simple standard fancybox gallery on the site also, but it gives me thes same problem, leading me to believe that the problem is deeper than the html markup. I have also successfully used this same markup for a one thumbnail fancybox gallery on another site.
I thought maybe it was due to some conflict in the .js files I'm using. I tried uninstalling all of my plugins/addons (which aren't too many) one by one and still had the same result. I have all of my personal javascript in the functions.js file, which is where I call the fancybox plugin using the standard $("a.fancybox").fancybox();.
I have installed this plugin before on other sites and have searched extensively for an answer, so any help is greatly appreciated.
Thanks,
Sean
Well, your code may seem semantically correct for a fancybox but is not. The problem that you have is that fancybox uses the data-fancybox-type attribute to determine what type of content it should open (in your case is an image gallery) BUT "Fashion Show de Paris, France" doesn't say anything to fancybox so the type of content is unknown or undefined hence the empty box.
The valid options for that attribute should be either image, iframe, ajax, html or inline.
Maybe you meant to use data-fancybox-group="gallery_name_here". Check https://stackoverflow.com/a/9037826/1055987 for more.
You may try to remove the data-fancybox-type attribute (reserved for fancybox) -OR- rename it in something like
data-description="Fashion Show de Paris, France"
... for your own use, so it won't conflict with fancybox.
BTW, another issue that you have is that the z-index of you header (#header) is higher (9998) than the fancybox z-index (which is around 8010 by default) so I would recommend you to lower the z-index of your #header, otherwise the fancybox close button will be placed behind of it.
Saludos a la tierra del buen café.
Can you try
<figure>
<a class="fancybox" data-fancybox-type="Fashion Show de Paris, France" href="http://www.nomadicdrift.com/test/kaniwa/wp-content/uploads/2012/07/NM2.jpg">
<img class="attachment-evento wp-post-image" width="231" height="191" title="NM" alt="NM" src="http://www.nomadicdrift.com/test/kaniwa/wp-content/uploads/2012/07/NM2-231x191.jpg">
</a>
<figcaption>
<h4>Fashion Show de Paris, France</h4>
</figcaption>
</figure>
Should only leave one <a class="fancybox"/>
Remove the orphaned:
<a class="fancybox" data-fancybox-type="Fashion Show de Paris, France" href="http://www.nomadicdrift.com/test/kaniwa/wp-content/uploads/2012/07/CEDESAN.jpg"> </a>
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
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.
Im using the jQuery Colorbox plugin to load some images on the page. My issue is, colorbox will naturally take multiple instances in the same Div, and then allow the user to scroll through the images with the arrow buttons.
I would like to have colorbox just load each image individually, without creating a separate instance/class of colorbox for each image.
Example Code:
<a href="../../images/rd/demo/1.3.png" class="group2" ><img src="/images/rd/demo/2.png" /></a>
<a href="../../images/rd/demo/1.3.png" class="group2" ><img src="/images/rd/demo/2.png" /></a>
<a href="../../images/rd/demo/1.3.png" class="group2" ><img src="/images/rd/demo/2.png" /></a>
$(".group2").colorbox({
rel:'group2',
transition:"fade",
opacity:0.50,
innerWidth:650,
innerHeight:400,
arrowKey: false
});
If I click on one of the images/links above, colorbox will load all three and allow the user to tab through them. I just want each image loaded individually, without having to give each one a unique class id.
I checked the Colorbox Documentation, and did not see anything that helped my case.
I think you just need to remove this:
rel:'group2',
According to the docs, that's what is causing it to group them together.
have you tried $("a.gallery").colorbox({rel:"group1"}); that should over-ride the default grouping?