We Keep Coding

How to stop lightbox from advancing to next 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.

How do I add a second hyperlink to an anchor that is already occupied by JavaScript code?

Here is my reference page: http://ca.pockethm.com/setupaccount/feature-videos_library.php
I am using Dynamic Drive's "Dynamic Ajax" script to change the content in a 'containerarea' div. Here is a sample of my actual anchor code:
<a href="javascript:ajaxpage('videos-maintenance/appliances-repair_fridge_gasket.php', 'contentarea');">
<img src="http://aaaa.pockethm.com/images/icon-youtubeTV.png" alt="Repair a Refrigerator Door Gasket" class="icon-image" border="0" />
<div class="icon-text">Repair a Refrigerator Door Gasket</div>
</a>
What I need is to have the page jump to an <a name="videoTop"> anchor positioned above the video window upon clicking the YouTube icon to watch a particular video in preparation for when I add a lot more videos. I've tried onclick, onfocus, onmouseover, and a variety of other code mashes....to no avail. There's a strong possibility I'm doing it wrong, though.
Thanks in advance for the assist.

You need to stack it in the inline code:
<a href="javascript:document.location.hash='#videoTop';ajaxpage('videos-maintenance/appliances-repair_fridge_gasket.php', 'contentarea');">

javascript examples display content boxes

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...

how to prevent fancybox from deleting the clicked thumbnail

Fist time using fancybox and it's not going so well.. starting to wish I didn't bother with it.
I have some thumbnails in a row, fine, then when I click one it opens the THUMBNAIL instead of the link whats worse it DELETES the thumbnail from the DOM. I've dug around in the fancybox src for the issue but there's a lot of it and I'll probably end up killing functionality so I thought I'd post here.
heres the code:
The raw HTML comes from CMS looking like:
<img src="http://blah..blah..from..flickr..001_s.jpg" alt="my image one" class="flickr-square" title="test image" longdesc="" data-url="http://blah..blah..flickr..detail..page" data-orig="http://blah..blah..flickr..big..001_b.jpg">
<img src="http://blah..blah..from..flickr..002_s.jpg" alt="my image one" class="flickr-square" title="test image" longdesc="" data-url="http://blah..blah..flickr..detail..page" data-orig="http://blah..blah..flickr..big..002_b.jpg">
I then run some stuff in backbone view render, the important bit is this:
var imgs = this.$el.find("img"); //:a jquery group of the img elements above
this.content = this.$el.find("span.postcontent");
//empty current
this.content.empty();
//make replacement
for(i= 0;i<imgs.length;i++)
{
var curImg = $(imgs[i]);
var curLink = $("<a/>");
curLink.attr("href",curImg.attr('data-orig'))
curLink.append(curImg);
curLink.on("click",function(e){
e.preventDefault();
$.fancybox.open(imgs)
});
this.content.append(curLink)
}
I now have rendered html like this:
<a href="http://blah..blah..flickr..big..001_b.jpg">
<img src="http://blah..blah..from..flickr..001_s.jpg" alt="my image one" class="flickr-square" title="test image" longdesc="" data-url="http://blah..blah..flickr..detail..page" data-orig="http://blah..blah..flickr..big..001_b.jpg">
</a>
<a href="http://blah..blah..flickr..big..002_b.jpg">
<img src="http://blah..blah..from..flickr..002_s.jpg" alt="my image one" class="flickr-square" title="test image" longdesc="" data-url="http://blah..blah..flickr..detail..page" data-orig="http://blah..blah..flickr..big..002_b.jpg">
</a>
So far so good... now, when I click the link/thumb it does the fancybox thinggy but shows the THUMBNAIL not the linked image, tiny in the middle in it's lightboxy thing and whats really annoying is that the clicked thumbnail in the page itself has now been completely removed from the dom ie.:
<a href="http://blah..blah..flickr..big..001_b.jpg">
///THIS IS MISSING COMPLETELY..... ggggggrrrrr
</a>
<a href="http://blah..blah..flickr..big..002_b.jpg">
<img src="http://blah..blah..from..flickr..002_s.jpg" alt="my image one" class="flickr-square" title="test image" longdesc="" data-url="http://blah..blah..flickr..detail..page" data-orig="http://blah..blah..flickr..big..002_b.jpg">
</a>

I've never seen Fancybox used like that. Normally, you don't need to trigger $.fancybox.open like that. You can just bind fancybox() to the <a> tags.
HTML:
<a href="big-image.jpg" class="fancybox">
<img src="thumbnail.jpg">
</a>
JavaScript:
$('.fancybox').fancybox();
Try just using that function after you've got the DOM to look like that.
[edit]
I couldn't get your DOM manipulation to quite work, but I tested with this fiddle, and it seems to be working: http://jsfiddle.net/haRnQ/4/
NOTE: I didn't import the styles or images for the demo, so it will be unstyled, but it still works.

I'm answering and voting up the previous two because they both helped but were not the definitive answer. The documentation was not clear that if you use only the "group" as a jquery array you must also specify options therefore the correnct answer is to do this (passing two arguments):
$.fancybox.open(imgs,
{
href:this.href,
title:curImg.attr("title")
}
);

Try changing this
$.fancybox.open(imgs)
by this
$.fancybox({
href: this.href
});
because imgs is the collection of your thumbnails (all <img> elements), which are moved to fancybox on click but not moved back after close.
In any case I would recommend you to add a class to <a> otherwise any other anchor you may have in your page would try to open fancybox.

I believe Fancybox prefers wrapping your images in an anchor. This is important to note as Fancybox removes the anchor when activating a slide show to prevent clicking on the anchor when the modal is active.
Calling FB from the thumb behaves like you have experienced by deleting the thumb and not recovering it after the modal is closed.
This is my typical FB setup (not a thumb gallery):
<img src="image1.jpg" alt="" />
<div style="display: none">
...
</div>

Can't get fade out function to work more than once

So this is the code that I have written. i have very little knowledge of jquery and just tried to write what I saw. I am sure their is an easier I run it once and it will work but after that it just stays the some for each click and does not call the function back up for the next click. I am having the same problem on another script that I have, I can't seem to call a function more than one time. One and done it what it seems to do. Any help would be much appreciated.
$.noConflict();
jQuery(document).ready(function ($) {
$("#scrollmenu");
$("#e_emd").click(function () {
$("#e_em").show();
$("#e_v").delay(1200).fadeOut("slow");
$("#e_s").delay(1200).fadeOut("slow");
$("#e_l").delay(1200).fadeOut("slow");
});
$("#e_vd").click(function () {
$("#e_em").delay(1200).fadeOut("slow");
$("#e_v").show();
$("#e_s").delay(1200).fadeOut("slow");
$("#e_l").delay(1200).fadeOut("slow");
});
$("#e_sd").click(function () {
$("#e_em").delay(1200).fadeOut("slow");
$("#e_v").delay(1200).fadeOut("slow");
$("#e_s").show();
$("#e_l").delay(1200).fadeOut("slow");
});
$("#e_ld").click(function () {
$("#e_em").delay(1200).fadeOut("slow");
$("#e_v").delay(1200).fadeOut("slow");
$("#e_s").delay(1200).fadeOut("slow");
$("#e_l").show();
});
});
<!-- THIS IS USED MULTIPLE TIMES IN THE PAGE BEING USED ON FOR SCROLLING CONTENT -->
<div id="scrollmenu">|
<a id="e_emd" href="#Event_Management" class="panel">Event Management</a> |
<a id="e_vd" href="#Video" class="panel">Video</a> |
<a id="e_sd" href="#Sound" class="panel"></a>Sound |
<a id="e_ld" href="#Lighting" class="panel">Lighting & Staging</a> |
</div>
<img id="e_em" src="images/eventmanage.png" width="1037" height="480" />
<img id="e_v" src="images/video.png" width="1128" height="480" />
<img id="e_s" src="images/sound.png" width="1011" height="480" />
<img id="e_l" src="images/light.png" width="1011" height="480" />
I have upoloaded the full page I am working on.
The site I am trying it on is here http://www.mac-av.com/test2/
What I am seeing is that I can't use an id more than once to call a function where i have
<div id="scrollmenu">|
<a id="e_emd" href="#Event_Management" class="panel">Event Management</a> |
<a id="e_vd" href="#Video" class="panel">Video</a> |
<a id="e_sd" href="#Sound" class="panel"></a>Sound |
<a id="e_ld" href="#Lighting" class="panel">Lighting & Staging</a> |
</div>
Multiple times on the same page
I am needing each image to change differently for every button that is clicked for ever category because of the scrolling that I have. I am doing this because when the page it on a computer with a low resolution the image will appear on the left side under the content window of the next category. So making this script was suppose to hide the images from it and only show the ones that are there for the category it is on, but also be able to see the other as it scrolls before they disappear.
It will work for the first set of buttons, but not afterwards. I am realizing that I can only call them once with the id, but instead of making a different script for each one, is there an easier way?

Could you put up a link to the page? If you could do this, I could debug it quickly. fadeOut will work more than once, so there must be something up with your on-page script and selectors.
Tips that might help in the meantime:
Be more verbose in your id names, it will help when looking back at your code or when other people look at it
Space things our properly when they are nested
You have a random $("#scrollmenu"); declaration at the top that isn't doing anything... you can get rid of that
You can make your code more DRY by making this into one function - pass it an array of all the selectors and the one you want to leave out, then on click loop through that array and if it matches the one you want to leave out, show it, if not, hide it. If you don't get what I mean here I can write an example.

A few things:
ids can only be used once per page
use CSS selectors and good markup to reduce the amount of code
use CSS to style your elements
jQuery can read element attributes, so take advantage of it.
<script type="text/javascript">
$(document).ready(function(){
// when any link inside scrollmenu is clicked
$(".scrollmenu a").click(function (e) {
// don't follow the link
e.preventDefault();
// find out which image to show
var target_id = $(this).attr('href');
// fadeOut all visible images inside .images that isn't the one we'll show
$('.images img').is(':visible').not(target_id).fadeOut("slow");
// show the target
$(target_id).show();
});
});
</script>
<div class="scrollmenu">|
Event Management |
Video |
Sound |
Lighting & Staging |
</div>
<div class="images">
<img id="e_em" src="images/eventmanage.png" width="1037" height="480" />
<img id="e_v" src="images/video.png" width="1128" height="480" />
<img id="e_s" src="images/sound.png" width="1011" height="480" />
<img id="e_l" src="images/light.png" width="1011" height="480" />
</div>
You could combine this with #JonH's method for more complicated sequences of animations.

I set up an example for you to further elaborate on my comment. http://jsfiddle.net/jMQhZ/11/
Clicking the first box will fire the #e_emd click event. If you click that again, nothing will happen because the function has nothing to do. If you click show all you'll see that all the divs are set back to normal. Now clicking the #e_emd div will run your function again.

Why are you using the $.noConflict(); ? Try removing that. Also try removing the $ from your ready function and using it instead of "jQuery", so it looks as follows:
$(document).ready(function () {
// blah blah
});
And yes, document.ready fires when it's loaded, but you are linking your ids to events, so they should be fine. Do you have any 3rd party controls or other ajax controls on this page?