I searched a lot, but didn't find a solution...
Short version
Is there a way to call the Lightbox without the <a>-tag?
Long version :P
I want to display my pics in a table, for every pic a new table cell.
The pic should be centered.
It should be possible to click anywhere inside the table cell to open the lightbox.
The size of the pic is 100px * 100px.
At the moment the code for a table cell looks like this:
<td align="center" width="150" height="150">
<a href="mypic.jpg" data-lightbox="mygallery" data-title="My Title" class="linkcell">
<img src="mypic.jpg">
</a>
</td>
Additional CSS-File
a.linkcell{
display: block;
width: 100%;
height: 100%;
}
td:hover{
background-color: #b6849c;
}
Since the position of the pic isn't centered(hovering on the left table cell)
and I can't change the position, no matter what I do, I'd like to use onclick, which is working quite fine, but for lightbox.
That came to my mind:
<td align="center" width="150" height="150" onclick="...">
<img src="mypic.jpg">
</td>
What do I have to write instead of ..., to open the lightbox?
It'd be okay to use some JavaScript.
An alternative to lightbox2 would be okay, too.
Or do you have another solution?
Thank you so much in advance,
MasterBolle
i think this would help you :
//set album values
IMG = $('<a href="...">')
.attr('data-lightbox','roadtrip')
.append('<img src="...">')
//lightbox open:
IMG.click(function(){
lighbox.start($(this));
return false;
})
Reference :
lightbox 2: how to add dynamically images via javascript
Related
I am new to jquery and I am trying to scrape the image source of the second img tag within a div, but can't seem to figure out the correct syntax to pull the second image by id. I feel like this isn't complicated to do, but after trying multiple ways of doing it I'm still stuck and keep getting an "undefined" error. Also not sure if "find" is not the best way to pull this and maybe I should be using something like "getElementbyID"?
Here is the source code I am trying to pull from:
<div class="mainImage" style="width:438px; height:333px;">
<img src="images/default/zoom.png" alt="Click here to see slideshow"
title="Click here to see slideshow" class="zoom" style="display: none;">
<img id="property_image"
src="http://website.com/images/assets/6695_18262.jpg" show="1"
style="width: 438px; height: 333px;">
</div>
Here is what I have:
$('.mainImage').each(function(i, element){
var imgID = $(element).find('img');
var img = $(imgID).find('#property_image').attr('src');
console.log (img);
Any help is much appreciated!
You can simply, use
var img = $('#property_image');
console.log(img.attr('src'));
I had an idea today, and I was wondering if it was possible to do, and if I could get any pointers on how to accomplish it.
I own an e commerce website that dynamically loads a product's image upon page load. Here's the basic html structure for the image when it is loaded on the page:
<div id="container">
<table>
<tr>
<td>
<a id="product_photo_zoom_url" herf="#">
<img id="product_photo" />
</a>
</td>
</table>
</tr>
</div>
My idea is this:
I would like to use a script to target the image #product_photo. This script would then set that targeted image as a background image for the div #container.
I would then need to be able to set the following css for that dynamically added background image within the div #container in the script as well:
#container {background-size: 100% auto; background-position: center top; opacity: 0.1;}
Hopefully that made sense. Is this at all possible?
Thanks guys - Much appreciated.
var image = $("#product_phoro").attr('src');
$("#container").css('background-image', image);
Here's the code, a bit messy, going to fix it up after this is answered.
<table>
<tr>
<td>
<a href="" onmouseover="document.getElementById('place-holder-1').src='graphics/websites/labyrinth/labyrintharrow1.png';" onmouseout="document.getElementById('place-holder-1').src='';">
website screenshot service
<img src="" id="place-holder-1" style="zindex: 100; position: absolute;" />
</a>
</td>
</tr>
</table>
Here is a live demo: http://jsfiddle.net/Lrnvrdub/
And thanks for the help it's greatly appreciated.
Edit: all of the replies work fantastically but when I try to adjust the size of the image, I have tried using both css and html, an empty square is in the image's place when the link isn't hovered.
Here's an example: http://jsfiddle.net/csewukgs/
Another option to Fabio's solid answer is to use a background image.
<a class="bullet" href="">Answer1</a>
<a class="bullet" href="">Answer2</a>
.bullet {
background: url("path/to/image.png") no-repeat 0 50%;
padding-left: 18px; //width of image, plus some extra spacing
}
The benefit being that if you have a list of links, you do not need to add an img element to every one.
One caveat, if the image is non-decorative and actually communicates something important, do use an img element with an appropriate title attribute, which is helpful to screen-reader users.
<a class="bullet" href="">Answer1 <img src="..." title="The correct answer"></a>
// use Fabio's float:left solution
delete the inline style and add this
a img{float:left}
you may want to add some margin as well, but you'll get the idea
Note: it's a good idea to give a class to that img so you don't have to be this generic. Like
.bullet{float:left}
HTML
<img class="bullet" src="uyourimage" id="place-holder-1" />
This is my solution: http://jsfiddle.net/1Latpnzn/2/
It assumes that you want to shift the text to the right to make room for the image. By setting the placeholder to be as follows:
#place-holder-1 {
display: inline-block;
vertical-align: middle;
}
reordering the html:
<a href="" id="hover-link">
<img id="place-holder-1" />
<span>Answer1</span>
</a>
and removing the position: absolute; image can be positioned to the left of the text.
If you can change the position from absolute to inline block and move the image before the "answer 1" text that will work, and to get it to be aligned with the text you can add the vertial-align:bottom style
<a href=""
onmouseover="document.getElementById('place-holder-1').src='graphics/websites/labyrinth/labyrintharrow1.png';"
onmouseout="document.getElementById('place-holder-1').src='';">
<img src="" id="place-holder-1" style="zindex: 100; position: inline-block; vertical-align:bottom" />
Answer1
</a>
I am trying to locate javascript code that, when I rollover an image, will make a box appear below the image and expand down (much like how a movie screen in a theater would roll from the ceiling to the floor). In that box, content would also appear, that I have previously added, that describes the image above. Already existing underneath the image I have a div with content in it...I would also like this div to be pushed down as the box described above expands down.
Any suggestions?
Thank you very much in advance!
C*
Forgot the code that I am using...so what is happening here is that I have a picture, and below it, a small box, that when I rollover that small box it changes color. So, I want to add, when I scroll over that small box, not only does it still change color, but the new vertical expanding box appears below it. I have javascript in a *.js file that handles the already existing rollover effect but it's quite long and I wasn't sure if I should add that (it was create by Dreamweaver when I created a rollover image).
<div class="images">
<figure class="images">
<img src="../images/Flower2.jpg" width="300" height="199" alt="Life">
</figure>
<figcaption class="content"><a class="typeB" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','../graphics/life2.jpg',4)"><img src="../graphics/life1.jpg" width="300" height="25" id="Image3" /></a>
</figcaption>
</div>
You don't give much information in your question about your current setup, but assuming that you have your HTML set out something like this:
<div>
<img id="tux" src="http://upload.wikimedia.org/wikipedia/commons/1/1c/Crystal_128_penguin.png" />
<div id="tux_desc" class="imgDesc" style="display: none">
<p>A cute penguin!</p>
</div>
</div>
<div>
<p>This text is part of the normal document flow</p>
</div>
Then you can use the following JavaScript (which makes use of jQuery):
$('#tux').hover(
function() {
$('#tux_desc').slideDown();
},
function() {
$('#tux_desc').slideUp();
});
You can see it working here: http://jsfiddle.net/wbAxm/1
something like this ought to to do it as long as the div to expand is directly after the image in the mark-up:
$(".class_for_images").on("mouseenter mouseleave", function() {
var content = $(this).next();
if (content.is(":visible")) {
content.slideUp();
} else {
content.slideDown();
}
});
If you want more than this, or it doesn't work, you'll need to post some code so that we can provide more detailed answers...
I have a thumbnail image declared dynamically like this :
<img id="productThumbnail" src="" style="float: left; width:100%"/>
I want to open a larger image in a JQuery dialog when a user clicks the thumbnail.
How can I accomplish this ?
Considering in my array, the thumbnail is "productThumbnail" and the larger image is "srcImg"
Something like :
<a href="#" data-rel="dialog" id="dialog1">
<img id="productThumbnail" src="" style="float: left; width:100%"/>
</a>
Thanks !!
This is almost exactly what jquery lightbox can do for you...is there a reason you can't or don't want to use it or other smiliar plugin?
http://leandrovieira.com/projects/jquery/lightbox/
Maybe some of this Jquery Pluggins can help you.
(See the number 4).