I'm having problems getting the Next/Previous images to show up in lightbox 2. No other answers here about this have solved this for me so I don't know what I'm still missing.
It almost seems like the "outer container" (I think that's what it's called) that the image "sits" inside of isn't wide enough for the Next/Prev gifs to show up. The link is there; i.e., when you hover over the right left sides of the images and click, it will go to the next and previous images.
I would like for the next/previous images to be:
1. visible all the time
2. located below the image x of x text and above the Close - or - ideally centered at the bottom of the image:
Image 3 of x
Prev Close Next
I don't necessarily have to use images per say, simple text links will be fine.
If I have to change something in another file besides the css, please let me know which one because I am relatively clueless when it comes to programming language. ROFL
What did work is to remove all instances of, "../" in the lightbox.css file. For example, change, "../img/prev.png" to "img/prev.png". Basically go through the lightbox.css file and remove the "../" where ever it occurs.
I had the same issue the second time I implemented Lightbox. In my case, I've changed all the occurrences where the gifs are linked from
content: url(../img/close.png)
to
content: url(http://www.../img/close.png)
Now it works.
I had the same problem, nothing worked, finally got it to show the buttons by adding<!doctype html>to the first line of your html page, just before the head
I think the solution is just adding a gallery name in the "rel" tag.
So change this:
rel="lightbox"
into this:
rel="lightbox[gallery]"
in each of your image links.
Worked for me!
None of the above suggestions worked for me.
The problem is the background URLs in lightbox.css - these URLs link to nothing. So I downloaded the images and amended the URL's in lightbox.css. Here's an example:
Default:
background: url(../images/close.png) top right no-repeat;
Amended:
background: url(../../images/lightbox2/prev.png) top right no-repeat;
if you go in the lightbox.min.css file you can see that this line ".lb-nav a.lb-next{width:64%;right:0;float:right;background:url(../images/next.png)".
Maybe the "next.png" don't be in the default directory "images" so just change the path to your "next.png".
Example "background:url(..path/to/my/images/next.png) for the next button.
Do the same for the others buttons.
[Ctlr + F] and look for "next.png", then "previous.png", then "loading.png", and finally "close.png" and put the right path so that you can see these buttons.
just copy arrows and close icons from
lightbox2-dev (1)\lightbox2-dev\dist\images
to your project and link proper. it will 100% work.
I had The Same Problem,To Make The Arrows and Close Button Show The Key is the background URLs in lightbox.min.css Make Sure They Are Pointing to The Right Directory where the images close.png, prev.png, next.png & loading.gif are stored, for me i had To Copy them from lightbox2-master\dist\images folder to my projects images folder and made Sure that in the lightbox.min.css file, the line of code background:url(../images/close.png); background:url(../images/prev.png); background:url(../images/next.png); background:url(../images/loading.gif); points to the images folder where the Arrows and close button images are stored and each referenced respectively
Related
I have a problem diagramming with CSS. What happens:
I have two files. That one is for responsive.
But sometime or right now i working with one. put one button for close one modal. But this button when i up the file to the github have a position good that happen in responsive in my cellphone in not right.
i wan to know what happen.
all the files is here.
https://github.com/wilsonromero1/room2
open the folder responsive/ style-index.css
the button is a. cerra this is the class
the index is in the starting
i fix the problem, i change the font family for Arial
I have a problem with new images. When I'm uploading a new image it looks like this:
Any suggestions how to fix this ?
I ran into this problem. Every time I added an image into a page, part would be cropped off. I tried playing with the settings > media etc, turned off the Smush plugin, changed the image size and dimensions in photoshop. But part of the image still kept getting trimmed off when uploading. Finally, I uploaded the image directly into Media, where it looked fine. Tried placing it in the page - cut off again. Copied and pasted the image code into the page and it shows up fine. I haven't nailed down the issue, but at least this is a workaround if it is only one or two problematic images.
If your problem is that img is cut at the top or/and at the bottom, you probably have a hard crop in your template.
This might help you
Or, try a work around:
Add a high-quality, max-height image, then you can and scale it up with transform: scale(1.5); in css.
Hope that helps.
If you go to Settings -> Media, you should set width or height to 0. In this way, that dimension will be scaled and nothing is cut off.
If you set width to 0, vertical (height > width) images will be reduced, and horizontal images will be enlarged a bit.
Go to settings > media and you will see your image settings. What is happening is that the image you are uploading is too large and thus it gets cropped. Uncheck Crop thumbnail to exact dimensions (normally thumbnails are proportional), and your images will get scaled rather than cropped.
If this is still no good to you, then you will have to jump into the code that is displaying the images.
http://rockstarrose.com/shop/hometest/#
Can't figure out where to target or place css. Is it in my theme file somewhere?
Just want the space to be halved above the text where it says "Flat Rate[...]Us"
Also can't figure out how to add code to this stupid box.
You can download a txt file of the code of the wordpress page here from my dropbox.
https://dl.dropboxusercontent.com/u/1355646/Chameleon%20sharing/Rockstarrose/wordpresspage.rtf
Remove the top margin from .site-content. The WebKit inspector/Firebug are your friends when it comes to things like this.
I am presently working for watermarking site and I have done completely and everyting is working fine.Now I would like to add a weblink to image as watermark instead of text.
I have tried by taking a hyperlink and adding to Image but it just draws the text and dosen't add it as a URL.
Is it possible to do so?I so how can I achieve this?
This is how I tried to do it:
pth.AddString(txtLink.NavigateUrl, New FontFamily(DropFont.SelectedValue), 0, Integer.Parse(DropFontSize.SelectedValue), New Point(left, top), StringFormat.GenericTypographic)
Two approaches come to mind:
Use anchor elements - <a> around your images with the appropriate link.
Use image maps with your images.
Images are images - they don't have links embedded in them that you can click on - you need something extra in order to make them clickable.
Let's say I have my whole sites CSS in 1 css file so it is fairly large, I am wanting to know if a page uses 3 classes with something like below that request 3 images from the server, lets say there is something like 50 of these in the whole css file, does everyone get called/requested from the server or just the 3 that a page needs?
background-image:url(http://localhost/images/btn3.gif);
There's one easy way to find out (ok, not easier than just asking Stack Overflow). Put this into a CSS file:
#nonExistantElement {
background-image: url(myScript.php);
}
and make that script record the hit by writing to a file or something.
Ok, I've just done that myself now. Turns out: no it doesn't get the file. (Tested on Firefox 3.5.2, IE7, Chrome 2.0)
I don't think so. Images required for hover pseudo-class (mouseover) are loaded when you hover, and there can be a noticeable lag on the first appearence (unless you use a cheat to get it preloaded).
The browser will load what it needs to display a page. Although I can imagine various browsers could employ certain caching techniques and prefetch everything they see in a CSS file.
Your answer lies with firebug
No, a request for the image is made only when the class, or id is present on the page.
If you do want an image that's not visible on page load to "preload", then there are a variety of tricks you can use, such as displaying the image off screen on load. The most common case where "preloading" is necessary is in the case of background images that change on hover, where there would otherwise be an unacceptable lag the first time the user hovers and causes the image to change. The most common solution to this problem is called "CSS Sprites". You combine the default, hover, and (if present) active images into one file, one above the other, and you simply change the background image offset on :hover and :active.