Speaking of lightbox2 version 2.8? downloaded march 2016...
How set maxwidth?
Here mi setup:
Under mi website folder i've, created a folder 'lightbox2' and put into the contain of the 'dist' folder of lightbox: css, images and js folders.
Then into de 'head'`section of html page, enter this code:
<link rel="stylesheet" href="lightbox2/css/lightbox.min.css">
<script>
lightbox.option({
'maxWidth' : 400,
})
<script>
and
<script src="lightbox2/js/lightbox-plus-jquery.min.js"></script>
at end of page
Now display the image with:
<img src=image-sample.jpg width=120 border=0>
The image always show at original size!
Help, please
well ... after searching and testing, I discovered that options should go under the line that invokes the js, not the css :)
After this, the image limit size work ok.
Related
I am a new developer and I want to implement a popup screen in Drupal 7.
I found a code online and it works, except for the "link rel" code the example has at the <head> section.
The code is the following:
<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" />
I tried opening this link and adding the whole code at the styles.css file, but the popup appears without any style.
Is there a way to do it correctly?
If you added the CSS content to your CSS file maybe you should clear the CSS cache to see changes.
You also should check the selectors match to the CSS rules (for instance with Firebug in Firefox browser).
Or in the template.php you can add external CSS in this way:
function mytheme_preprocess_html(&$variables) {
`drupal_add_css('http://www.jacklmoore.com/colorbox/example1/colorbox.css',`
`array('type' => 'external'));`
}
I am new to caman js. I want to edit image residing at my local machine using caman js. I searched for it but could not find appropriate code. I also went through tutorial of caman js.
link: http://camanjs.com/guides/
Can anyone please help me?
Thank you.
The link you provided gives the information you are looking for. If I understand your question correctly, these are the basic steps you need to take.
Make sure the Camanjs plugin is included in your project.
Have an img or canvas element on your working DOM
After the DOM is ready Initialize Camanjs by passing to it either a selector or DOM element. Here is the relevant code to the link you provided:
Caman("#image-id", function () {
// Setup whatever options or image processing you want here
// Make sure to render after
this.brightness(5).render();
});
Your question asks about a file on your local machine. From my understanding, your image has to be present in the DOM to work on it with Camanjs. Therefore, your image should be located somewhere your html/javascript can find. (i.e. 'img/myLocalPicture.jpg' relative to your .html file)
For me, looking at the source code of Camanjs was very helpful as well as looking at the API docs: http://camanjs.com/api/
If you want a more specific answer please rephrase your question to be more specific.
You can load a file using the HTML5 File API.
If you are using JQuery, the following will allow you to browse for a local file, and then apply an effect to it. (You don't need jquery, this is just a feature of HTML5)
<html>
<head>
<link href="css/style.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/caman.full.min.js"></script>
</head>
<body>
<img id="myimage" alt="Image go here" />
<form>
<input type="file" id="fileinput" />
</form>
</body>
<script>
$("#fileinput").change(function(evt) {
var image = evt.target.files[0];
$("#myimage").attr("src", URL.createObjectURL(image));
processImage();
});
function processImage() {
Caman("#myimage", function() {
// Perform your effects here
});
}
</script>
</html>
I am trying to find out why my Lightbox is not showing 0.8 opacity and no close button or outer container for the image. I do get a black background and the image. I, to the best of my knowledge, followed the instructions. Here is a link to my page, http://www.crawfordcountyhistoricalsociety.org/Pages/Sale.html only the first item for sale is set for lightbox.
I am using Dreamweaver CS4 and have a template for the pages to keep the banner,background and footer the same.
Looks to me like you have the paths to your jQuery, lightbox js, img and css files incorrect. They're pointing to crawfordcountyhistoricalsociety.org/Pages/, while it looks like they're actually located at crawfordcountyhistoricalsociety.org/. Try changing your import lines in the page source from:
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/lightbox-2.6.min.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />
To:
<script src="/js/jquery-1.10.2.min.js"></script>
<script src="/js/lightbox-2.6.min.js"></script>
<link href="/css/lightbox.css" rel="stylesheet" />
(In other words add a leading slash to indicate they're at the root of your folder structure)
I've added the required tags, but it is still not showing. I've added this in head:
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'lt', parsetags:'explicit'}
</script>
and this in the body:
<g:plusone href="http://www.fanuspinta.lt/katalogas/lietuva-mar%C5%A1kin%C4%97liai-31"></g:plusone>
At first I thought it didn't show up because I was using a local server, but now it's in production, and still not showing.
URL in case: http://www.fanuspinta.lt/katalogas/lietuva-mar%C5%A1kin%C4%97liai-31
Thanks for any ideas.
I used a html5 tag like shown here without the data-href attribute, dynamically added it afterwards (when the lightbox was loaded) and explicitely loaded the div containing the plusone code at the end.
I've been fiddling with a partial trust XBAP - how can I change the icon shown in the IE-tab and the title (aside from changing the assembly-name in the project properties)?
I would also like to change what is shown in the Internet header (right now it shows the address of the XBAP.
I had a similar issue where I could not change the title in IE 10 (this was the first stack overflow answer that comes up when you Google "xbap title"). I found the solution here:
In code, set Application.Current.MainWindow.Title to the title you want to show. This worked for me, hopefully this will be helpful for the next guy.
Load your XBAP from a HTML page using an IFRAME. In the HTML page add a title and icon.
Something like this:
<html>
<head>
<title>This is my title</title>
<link rel="shortcut icon" href="http://wherever.com/icon.ico">
</head>
<body>
<iframe location="something.xbap"
style="width:100%; height:100%; border:0; overflow:auto" scrolling="no"></iframe>
</body>
</html>
This is simplified from code that I actually use, except due to some other requirements I'm giving the iframe an id and setting its location using JavaScript in the body's onload event. I assume the above will work just as well.