I have 3 pics that I want to link them in my photo gallery. So when I click one of the image, it should have the next and previous arrow that allow the user to go to another image. My codes with lightbox2 is as below.
<a href="my/path/images/image1.jpg" data-lightbox="roadtrip" data-title="My caption">
<img src="my/path/thumbnails/thumb1.jpg" alt="Surfing"/>
</a>
<a href="my/path/images/image2.jpg" data-lightbox="roadtrip" data-title="My caption">
<img src="my/path/thumbnails/thumb2.jpg" alt="Lifeguard Stand"/>
</a>
<a href="my/path/images/image3.jpg" data-lightbox="roadtrip" data-title="My caption">
<img src="my/path/thumbnails/thumb3.jpg" alt="Hot Air Balloons"/>
</a>
So now when I run the code, in the first image there will be an next arrow that links to the second image. However, when the user is in the second image, there is only previous arrow but no next arrow. But I want both arrows to appear.
If anyone knows how to solve the issue, please let me know. Appreciated!!
Ok so I found the answer by myself and below is the answer for many people who may have encountered the same problems.
Just change the width of .lb-nav a.lb-prev in the lightbox.css and it should work. I change it from 64% to 50% and then the next arrow appears.
I don't have time digging into what's the essential cause is, but this solution does work. If anyone knows what exactly happens there, please feel free to leave a comment or answer. Appreciated!
Related
I stuck with a problem I can not solve. You may help me.
I have different information pages and at the end is the following link:
"You may find more pictures in our GALLERY"
It jumps to the gallery page and right section, but if all pictures are loaded, it jumps to top. I would like to avoid this jump up!
A part of the gallery php:
<div class="products-section">
<div id="apco">Apartment Concept</div>
<div class="products-grids">
<div class="col-md-4 products-grid">
<div class="gallery">
<a class="mask" href="../data/pic/22.jpg"><img src="../data/pic/22.jpg" class="img-responsive zoom-img" alt="/" title="Apartment"></a>
</div>
</div>
…
I also use jQuery because of design.
Please help me and clarify the problem.
I am beginner-intermediate HTML-PHP user and mostly work from templates.
Thank you!
I have the habit to use an anchor-tag to refer to when I want this kind of navigation. You can even nest an h1 or something else in it.
i.e.
a(id="apco")
h1 someText
Never failed me, I think some teacher hammered it in me a long time ago.
Hopefully it works out for you!
Delete #apco on the tag.
So,
"You may find more pictures in our GALLERY"
I am totally new to js and stuff like that, but I was made an admin and editor of an existing webpage of my employer. The problem is, I cannot contact a man, who has written the webpage, so its sometimes pretty hard to find out the paths and solutions of problems.
The problem I want to solve is on the page using Lightbox for image gallery. When you click on the first image, it pops out and works brilliant. But when you come to the end of the gallery, you can continue to the next car.
Here is the link to show what I mean: http://bmw-groupm.sk/vozidla-na-sklade/
Can you please at least try to tell me, if the problem is in CSS or script itself? Thank you.
It is not that simple. Cars are added to the webpage by separate Admin panel, which creates a directory on server, puts the images inside and than the car content is called by some complex process. See the html:
$adresar[$cislo] = opendir("vehicles/".$cisl[$cislo]."/");
while ($subor[$cislo] = readdir($adresar[$cislo])){
if ($subor[$cislo]!="." && $subor[$cislo]!=".." && !is_dir($subor[$cislo]) && $subor[$cislo]!="t" && $subor[$cislo]!="tn" && $subor[$cislo]!="mcith") {
$ext[$cislo] = pathinfo($subor[$cislo], PATHINFO_EXTENSION);
$ext[$cislo] = strtolower($ext[$cislo]);
if ($ext[$cislo]!="pdf") {
list($w[$cislo], $h[$cislo], $type[$cislo], $attr[$cislo]) = getimagesize("vehicles/".$cisl[$cislo]."/".$subor[$cislo]);
if ($w[$cislo]<$h[$cislo]) {
$iclass="imgh";
}
else {
$iclass="imgw";
}
$pas[$cislo].='<a rel="group" href="/vehicles/'.$cisl[$cislo].'/'.$subor[$cislo].'"><img src="/vehicles/'.$cisl[$cislo].'/'.$subor[$cislo].'"></a>';
} else {
$docu[$cislo]="/vehicles/".$cisl[$cislo]."/".$subor[$cislo];
}
}
}
The images are placed in links, which have the same rel="group" attribute.
Change these such that each car/gallery group of images has a different value from the next.
For example, car 1 gallery images will be rel="group1", and car 2 images will berel="group2".
You have to create an image set and give a specific name. The details are found here in the official website.
Documentation
You have to create an image set and give a specific name. You can provide the name in the data-lightbox attribute. You can find an example with dummy image links below.
<p>Gallery One</p>
<a href="https://dummyimage.com/600x400/b0a4b0/ffffff" data-lightbox="car">
<img src="https://dummyimage.com/600x400/b0a4b0/ffffff" />
</a>
<a href="https://dummyimage.com/600x400/ff00ff/ffffff" data-lightbox="car">
<img src="https://dummyimage.com/600x400/ff00ff/ffffff" />
</a>
<a href="https://dummyimage.com/600x400/ed1520/ffffff" data-lightbox="car">
<img src="https://dummyimage.com/600x400/ed1520/ffffff" />
</a>
<p>Gallery Two</p>
<a href="https://dummyimage.com/600x400/17a621/ffffff" data-lightbox="jeep">
<img src="https://dummyimage.com/600x400/17a621/ffffff" />
</a>
<a href="https://dummyimage.com/600x400/0e2796/ffffff" data-lightbox="jeep">
<img src="https://dummyimage.com/600x400/0e2796/ffffff" />
</a>
<a href="https://dummyimage.com/600x400/616011/ffffff" data-lightbox="jeep">
<img src="https://dummyimage.com/600x400/616011/ffffff" />
</a>
The details are found here on the official website.
I'm new to programming unfortunately and so to help me I have been following some simple tutorials on youtube (in addition to following Treehouse lessons). The one I have been struggling with and can't seem to find a solution to is building a simple lightbox, well getting the click event to bring up the lightbox. I have checked all lines, syntax, whether I've omitted a ; or {}, thought maybe I had the javascript src incorrect, tried downloading, creating a js folder and linking to that, referencing google hosted javascript, checked firebug, tried different browsers, checked that the CSS is correct (which it seems to be as when setting the display to block it appears OK), thought maybe there is updated syntax rules (tried jQuery instead of $ but just can't see where I'm making an error. Probably I have omitted something really simple, so please forgive me in advance. The youtube link I'm following is: https://www.youtube.com/watch?v=k-uonF7Gdgw Have also checked the comments to the video to see if anyone else is having same problem, some are, but mostly everyone else seems ok, and no solutions posted for those not getting it to work!
Please see below code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.lightbox').click(function(){
jQuery('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear'); //fades in the backdrop and the lightbox - speed of 300, and displayed in a linear fashion. Only want the backdrop displayed with 50% opacity, and the box at 100% (see below line)
jQuery('.box').animate({'opacity':'1.00'}, 300, 'linear');
jQuery('.backdrop, .box').css('dispaly', 'block'); //sets the appearance of the box
});
});
</script>
Many thanks in advance, and thanks for great resource!
Nic
Lightbox is a JavaScript technique used to display images and other web content using modal dialogs where the image is shown up center filling most of the screen, and the rest of the window is dimmed out. Lightbox was originally the name of a specific JavaScript plugin. However, common usage of the term has evolved to encompass Lightbox-style JavaScript plugins and effects in general.
First we take some images (when we click on the images the LightBox will be shown). We will place this image in a
HTML code:
<section id="examples" class="examples-section">
<div class="container">
<h3 style="clear: both;">Four image set</h3>
<div class="image-row">
<div class="image-set">
<a class="example-image-link" href="img/demopage/image-3.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image" src="img/demopage/thumb-3.jpg" alt=""/></a>
<a class="example-image-link" href="img/demopage/image-4.jpg" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."><img class="example-image" src="img/demopage/thumb-4.jpg" alt="" /></a>
<a class="example-image-link" href="img/demopage/image-5.jpg" data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing."><img class="example-image" src="img/demopage/thumb-5.jpg" alt="" /></a>
<a class="example-image-link" href="img/demopage/image-6.jpg" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."><img class="example-image" src="img/demopage/thumb-6.jpg" alt="" /></a>
</div>
</div>
</div>
</section>
Now add css code files for screen and lightbox. Also download lightbox.js and jquery library java-script files.
http://geodit.com:8000/
If you try to click between "Spear St. Oakland" and the description, you'll notice that the anchor takes you nowhere. That's because there's a padding between them.
How do I get the hyperlink to work when the user clicks between the text?
Try putting the padding on the a element(s), instead of the div elements.
Your code is unnecessarily complex. For example you don't need to wrap everything (such as each link) in a DIV (or the other way round). Just style the link directly, possibly setting it's display style to block so that it behaves like a div.
If you merge both links into one then your problem will go away and you wouldn't need to "fake" the links with cursor: pointer.
Here an example how simple your HTML could be:
<div class="awallpost grid_doc_holder sub" data-image="http://s3.amazonaws.com/fabletest/7cgeq8hkdt">
<a href="/d/1339" class="trans_caption ">
See the sun whispering the light of our days from last summer...
</a>
<div class="trans_caption_over">
<img src="/media/img/brightmix/star.png"> Great Find!
<a href="/d/1339" class="extras">
<em><img src="/media/img/brightmix/placedot2_white.png" align="texttop" width="12" height="auto"> Spear St. Oakland, 94107</em>
<span>Hey it's weekend! Whohoooo :O) Made a few new photos on my favorite heathland just outside the city, the sunset ...</span>
</a>
</div>
<div class="title_text_only">
See the sun whispering the light of our days from last summer...
</div>
<div class="desc_text_only">
Hey it's weekend! Whohoooo :O) Made a few new photos on my favorite heathland just outside the city, the sunset was so gorgeous and soft just perfect for my &quot;cream ...
</div>
</div>
You do not have a link between the text. You have TWO links.
What is confusing is the
.grid_doc_holder {
cursor: pointer;
text-align: center;
}
which shows the hand when you are not over the links too
You could consider making the outer container clickable
I believe you want to just put your div(or Divs) within an A tag, that will make it all clickable.
I need some css and syntax help,please. Your help is warmly welcome.
I want to insert a list containing some skypelinks and behaving like a sidebar menu when I move the mouse over the image.
This is the html-code I tried to manipulate:
<a href="?USER=name">
<img src="../../name.jpg?format=raw" title="full name - skypename">
</a>
By moving the mouse over the image and the images title is skypename the two links should fade out to the right(float:right;?)
$("img[title$=\"skypename\"]").mouseover(function(){
$("<ul><li>Call</li><li>Chat</li></ul></li></ul>");
});
My aim is to let the html-code look like:
<ul>
<li>
<a href="?USER=name">
<img src="../../name.jpg?format=raw" title="full name - skypename" alt="Klick me!">
</a>
<ul>
<li>Call</li>
<li>Chat</li>
</ul>
</li>
</ul>
I created a fiddle http://jsfiddle.net/erhDJ/2/ where I tried sth. to work like a flyout menu.
In my case the first code I mentioned above would be replacing Klick me!.
By moving the mouse over it the two links should fade out to the right.
My questions:
How can I surround the first code with the second so that it looks like the third code snippet?
Do you see an easier option to create such a flyout menu?
Thank you.
I'm not too sure about what you actually want, but I can give you an example of animating menu's with some CSS and jQuery.
Sliding, animated menu when hovering link
Is this useful?