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
Related
I am very new to jQuery and not entirely sure what I'm doing. Will try my best to explain the problem I'm facing.
I'm trying to lock some content on a landing page until a user shares the link using FB, Twitter, LinkedIN or G+. The first version of the script I wrote (which worked fine) ran like this:
<head>
<script type="text/javascript">
...
$(document).ready(function()
{
$('.class').click(clearroadblock());
buildroadblock();
}
</script>
<style>
.class
{
[css stuff]
}
</style>
</head>
<body>
<div id="something">
<ul>
<li> Link1 </li>
<li> Link2 </li>
</ul>
</div>
</body>
The problem I'm now facing is changing out this code to replace the list elements with social share buttons. As they are no longer under .class, but classes like fb-share-button and twitter-share-button. Please help me understand what I need to modify to accommodate this? PS: This is not a Wordpress site.
function clearroadblock()
{
$('#roadblockdiv').css('display', 'none');
$('#roadblockBkg').css('display','none');
}
This is the way I'm clearing the overlay once a click is detected, BTW.
Can I wrap the social buttons in divs, assign them IDs and use those IDs to trigger the click like below?
<div id="Button">
Tweet
</div>
$('#Button').click(clearroadblock());
You can have multiple classes on an element by separating them with a space. Try the following:
class="class fb-share-button"
Your jquery will still work off the "class" class. I would recommend you change this name to something more meaningful though. Your css can target the "class" for general styles, but you can also target fb and twitter separately.
Update
I decided to create a quick JSFiddle for this.
Some of the styles etc won't be the same as what you're doing, but the problem is resolved. I've created a div with id main that contains the content that you want to hide. There's an absolutely positioned div over the top of this, this is the roadblock. The javascript is showing the roadblock (assuming that's what you wanted to do with buildroadblock()).
On click of a link in the ul with id socialMedia we call clearroadblock. Notice the lack of parenthesis. This hides the roadblock.
This isn't a great way of preventing someone from seeing information, you might want to think about pulling the content down from the server when the action is performed, however, I think this answers your question.
I’m new with JS and looking for any tips how to implment or even how can I replace a part of big image (that conisists of two smaller images) when you change some option on the sidebar for example when you change product parameters.
When you click either or “Kolor karnisza:” or “Wzór końcówki:” a part of image changes. Either the color of curtain rod or curtain rod end.
How can I achieve this, as far as I already learnt two images are positioned absolutely with z-index and I need some JS or jQuery library to do this effect (what library?).
This is the website I’m talking about:
https://www.sklep-karnisze.net/1136,-34-Carbonera-34-podwojne-proste-19-mm?r=#/#8,7,2,50,1,10,
Thx in advance for your help.
<head>
<script>
function changeImage(imgName)
{
image = document.getElementById('largepic');
image.src = imgName;
}
</script>
</head>
<body>
<img src = 'largemaimimage.jpg' id = 'largepic' />
<img src ='small1.jpg' onClick="javaScript:changeImage('small1.jpg');"/>
<img src ='small2.jpg' onClick="javaScript:changeImage('small2.jpg');"/>
<img src ='small3.jpg' onClick="javaScript:changeImage('small3.jpg');"/>
</body>
Many Times this is answered on this site
I have code something like this
<img width="250" height="220" src="img/port1.png" class="wp-post-image" alt="1" />
View Large Image
<img width="250" height="220" src="img/port1.png" class="wp-post-image" alt="1" />
View Large Image
<img width="250" height="220" src="img/port1.png" class="wp-post-image" alt="1" />
View Large Image
When we click on view large image link , Image should be display large and not disturb other images location.
http://lokeshdhakar.com/projects/lightbox2/releases/lightbox2.6.zip
PART 1 - GET SETUP
1.Download and unzip the Lightbox from above.
2.Look inside the js folder to find jquery-1.10.2.min.js and lightbox-2.6.min.js and load both of these files from your html page. Load jQuery first:
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/lightbox-2.6.min.js"></script>
3.Look inside the css folder to find lightbox.css and load it from your html page:
<link href="css/lightbox.css" rel="stylesheet" />
4.Look inside the img folder to find close.png, loading.gif, prev.png, and next.png. These files are used in lightbox.css. By default, lightbox.css will look for these images in a folder called img.
------------------------------------------------------------------------------------------
PART 2 - TURN IT ON
1.Add a data-lightbox attribute to any image link to activate Lightbox. For the value of the attribute, use a unique name for each image. For example:
image #1
Optional: Set the title attribute if you want to show a caption.
2.If you have a group of related images that you would like to combine into a set, use the same data-lightbox attribute value for all of the images. For example:
image #2
image #3
image #4
I am usually using the fancybox jQuery plugin for these purposes. You can use the old free 1.34 version for simple purposes too, no need for pro license. You can also find a lot of examples etc. on the linked site.
First I'll start with this: I am in no way shape or form a developer, coder etc etc. I'm just a graphic designer helping a friend with her website.
As of right now, I'm having issues linking up thumbnails to the full images on my lightbox call out - you can view the site at www.chrissybulakites.com
I noticed
With VOID:(0) being in every single one ... my thought process was that if I correspond 0 thumb with 0 full then 1 thumb with 1 full then 2 thumb wwith 2 full etc etc it would work .. it didn't.
Can somebody explain to me if I'm on the right path or what I can do to make this work.
Thanks
Rob
Have have two basic elements per image; the thumb and the full image. The thumb is using JavaScript to show and hide a div (kind of like a frame) to hold the full image.
The HTML on the page repeats itself a lot, you can probably solve your problem whilst removing some of the repetition. I'd keep all of your thumbs but on each one, add in a reference to the full image the thumb represents. As well as reducing repetition, it'll make it easier to update the page in the future as changing a thumb and main image is done in one place rather than two.
In the below I've added another part to the "onclick" to say update the src of 'frame' to be the full version of the thumb.
<img src="http://chrissybulakites.com/thumbnails/longshot_thumbnail.png" />
Then delete all of the large images except one, updating it so that the img tag has an ID of 'frame'
<div id="light" class="white_content"><img id='frame' src="http://chrissybulakites.com/images/longshot_full.png" /> <br />Actor Observor - Boston, MA Close</div>
<div id="fade" class="black_overlay"></div>
This will mean that as each thumb is clicked, it will do the light and fad bits it did before but it will also update the image being displayed.
Doing this for two images as a proof of concept I get this which works as expected:
<img src="http://chrissybulakites.com/thumbnails/longshot_thumbnail.png" />
<img src="http://chrissybulakites.com/thumbnails/actor_thumbnail.png" />
<div id="light" class="white_content"><img id='frame' src="http://chrissybulakites.com/images/longshot_full.png" /> <br />Actor Observor - Boston, MA Close</div>
<div id="fade" class="black_overlay"></div>
you need to give each full image div its own unique id like: id="image23". Then modify the onclick to refrence the corresponding id: onclick="document.getElementById('image23')...
The meaning of the function void() in JavaScript is "do nothing". This prevents it to load a new new page (or to open the thumbnail image).
onclick = "document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block' "
Says that when user clicks that item it will capture the element light and change the display to block it will also capture the element fade and change the display to block. The thing is all your images are wrapped in an element called "light" so the browser is opting to show the first one (instead of throwing an error).
There is plenty of fuzzy logic here.
Starting with the fact that you are loading all images (the high definition ones).
If you want my two cents (and you only want to get the results, as opposed to learn how JavaScript works) I would go with something like prettyPhoto that does it out of the box, in an easy and straightforward way and is well documented.
How to add prettyPhoto to your page?
Download the code and include both the Javascript and the CSS file's on your header.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
Then put this code on your page
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
The docs say to put it on the bottom of the page but you (should) also put it on the header.
And then put the thumbnails with links to the actual images. PrettyPhoto will take care of everything else. Do note the rel="prettyPhoto[my_gal]"
<a href="img/full/1.jpg" rel="prettyPhoto[my_gal]" title="Caption 1">
<img src="images/thumbnails/t_1.jpg" width="60" height="60" alt="Red round shape" />
</a>
You can customize it further and should really read the manual here.
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.