I'm having 2 issues with my project, which you can find here: True Love

Problem 1: Background in lightbox
I want to have 2 different background colors for the lightboxes. The images with products should have a white background (like it is now) and the ones with the models should have a black background. How can I distinguish those slideshows to assign them differend background colors?

Problem 2: "Plus"-Symbol in Slideshow
I am using a "Plus"-Symbol on the hover of the first image to indicate that you can click on the image. In the slideshow, the plus is also indicated (the second image is shown twice because of that). I see, that I have to place the image outside of the <li> but it should still display after hovering the first image.

Thanks for your suggestions! Right here is my html & javascript:

Code:
<div class="mtlsr-images-for-lightbox align-left">
			<div class="section" data-caption="Samira">
				<ul>
					<li class="circle">
						<a href="img/1.jpg">
							<img src="img/1.jpg" alt="Samira" />
						</a>
					</li>
					<li class="plus hidden">
						<a href="img/1a.jpg">
							<img src="img/plus.png"/>
						</a>
					</li>
					<li class="subcircle hidden one">
						<a href="img/1a.jpg">
							<img src="img/1a.jpg" alt="Samira" />
						</a>
					</li>
					<li class="subcircle hidden two">
						<a href="img/1b.jpg">
							<img src="img/1b.jpg" alt="" />
						</a>
					</li>
					<li class="subcircle hidden three">
						<a href="img/1c.jpg">
							<img src="img/1c.jpg" alt="" />
						</a>
					</li>
					<li class="subcircle hidden four">
						<a href="img/1d.jpg">
							<img src="img/1d.jpg" alt="" />
						</a>
					</li>
				</ul>
			</div>	
			<div class="section" data-caption="&Uuml;berschrift 2">
				<ul>
					<li class="circle">
						<a href="img/2.jpg">
							<img src="img/2.jpg" alt="" />
						</a>
					</li>
					<li class="plus hidden">
						<a href="img/2a.jpg">
							<img src="img/plus.png"/>
						</a>
					</li>
					<li class="subcircle hidden one">
						<a href="img/2a.jpg">
							<img src="img/2a.jpg" alt="" />
						</a>
					</li>
					<li class="subcircle hidden two">
						<a href="img/2b.jpg">
							<img src="img/2b.jpg" alt="" />
						</a>
					</li>
					<li class="subcircle hidden three">
						<a href="img/2c.jpg">
							<img src="img/2c.jpg" alt="" />
						</a>
					</li>
					<li class="subcircle hidden four">
						<a href="img/2d.jpg">
							<img src="img/2d.jpg" alt="" />
						</a>
					</li>
				</ul>
			</div>
			<div class="section" data-caption="&Uuml;berschrift 3">
				<ul>
					<li class="circle">
						<a href="img/3.jpg">
							<img src="img/3.jpg" alt="" />
						</a>
					</li>
					<li class="plus hidden">
						<a href="img/3a.jpg">
							<img src="img/plus.png"/>
						</a>
					</li>
					<li class="subcircle hidden one">
						<a href="img/3a.jpg">
							<img src="img/3a.jpg" alt="" />
						</a>
					</li>
					<li class="subcircle hidden two">
						<a href="img/3b.jpg">
							<img src="img/3b.jpg" alt="" />
						</a>
					</li>
				</ul>
			</div>		
		</div>
		
		
		
		<!-- PART 2, RIGHT SIDE -->
		<div class="mtlsr-images-for-lightbox align-right">
			<div class="section" data-caption="Samira">
				<ul>
					<li class="circle">
						<a href="img/4.jpg">
							<img src="img/4.jpg" alt="Samira" />
						</a>
						<!--<div class="overlay"></div>-->
					</li>
					<li class="plus hidden">
						<a href="img/4a.jpg">
							<img src="img/plus.png"/>
						</a>
					</li>
					<li class="subcircle hidden one">
						<a href="img/4a.jpg">
							<img src="img/4a.jpg" alt="Samira" />
						</a>
					</li>
					<li class="subcircle hidden two">
						<a href="img/4b.jpg">
							<img src="img/4b.jpg" alt="" />
						</a>
					</li>
				</ul>
			</div>	
			<div class="section" data-caption="&Uuml;berschrift 2">
				<ul>
					<li class="circle">
						<a href="img/5.jpg">
							<img src="img/5.jpg" alt="" />
						</a>
					</li>
					<li class="plus hidden">
						<a href="img/5a.jpg">
							<img src="img/plus.png"/>
						</a>
					</li>
					<li class="subcircle hidden one">
						<a href="img/5a.jpg">
							<img src="img/5a.jpg" alt="" />
						</a>
					</li>
					<li class="subcircle hidden two">
						<a href="img/5b.jpg">
							<img src="img/5b.jpg" alt="" />
						</a>
					</li>
					<li class="subcircle hidden three">
						<a href="img/5c.jpg">
							<img src="img/5c.jpg" alt="" />
						</a>
					</li>
				</ul>
			</div>
			<div class="section" data-caption="&Uuml;berschrift 3">
				<ul>
					<li class="circle">
						<a href="img/3.jpg">
							<img src="img/3.jpg" alt="" />
						</a>
					</li>
					<li class="plus hidden">
						<a href="img/3a.jpg">
							<img src="img/plus.png"/>
						</a>
					</li>
					<li class="subcircle hidden one">
						<a href="img/3a.jpg">
							<img src="img/3a.jpg" alt="" />
						</a>
					</li>
					<li class="subcircle hidden two">
						<a href="img/3b.jpg">
							<img src="img/3b.jpg" alt="" />
						</a>
					</li>
				</ul>
			</div>		
		</div>
		
		<div class="mtlsr-lightbox">
			<span class="caption"></span>
			<a href="#" class="close"><img src="img/close.png" alt="Schliessen"/></a>
			<a href="#" class="prev"><img src="img/prev.png" alt="Zurück"/></a>
			<a href="#" class="next"><img src="img/next.png" alt="Vor"/></a>			
		</div>


<script>
	$('.circle').hover(
	  function() {
	    var sibs = $(this).siblings();
	    sibs.each(function(i) {
	      $(this).stop().delay(i * 200).fadeIn('slow');
	    });
	  },
	  function() {
	    var sibs = $(this).siblings();
	    sibs.each(function(i) {
	      i = sibs.length - i;
	      $(this).stop().delay(i * 200).fadeOut('slow');
	    });
	  }
	);
</script>

<script>
	$(document).ready(function() {
		var current = '.mtlsr-images-for-lightbox ul li.current';
		
		//Função para verificar a posição atual da imagem e remover as setas(prev e next) conforme necessário
		function check_image_position(){				
			if ($(current).is(':last-child')) {
				$('.next').hide();
				$('.prev').show();
			}else if ($(current).is(':first-child')) {
				$('.next').show();
				$('.prev').hide();
			}else{
				$('.next, .prev').show();
			}
		}			
		
		$('.mtlsr-images-for-lightbox ul li').on('click', 'a', function(event) {
				event.preventDefault();
				var $this = $(this);
				var big_image_href = $this.attr('href');
				var caption = $this.parents(".section").data("caption");
				
				$this.parent().addClass('current');
				
				var lightbox = $('.mtlsr-lightbox');
				lightbox.fadeIn();
				lightbox.append('<img class="image-in-lightbox" src="'+big_image_href+'" alt=""></div>');
				lightbox.find(".caption").text(caption);
				
				check_image_position();
			});
		//Fechar
		$('.mtlsr-lightbox').on('click', '.close', function(event) {
			$('.mtlsr-lightbox').fadeOut();
			$('.mtlsr-lightbox .image-in-lightbox').remove();
			$(current).removeClass('current');
		});
		//Função Next e Prev
		$('.mtlsr-lightbox a').on('click', function(e){				
			if($(this).attr('class')=='next'){
				var big_image_href = $(current).next().find('a').attr('href');					
			
				$(current).next().addClass('current');
				$(current).prev().removeClass('current');
				
			}else if($(this).attr('class')=='prev'){
				var big_image_href = $(current).prev().find('a').attr('href');
			
				$(current).prev().addClass('current');
				$(current).next().removeClass('current');
			}
			check_image_position();
				
			$('.mtlsr-lightbox .image-in-lightbox').remove();
			$('.mtlsr-lightbox').append('<img class="image-in-lightbox" src="'+big_image_href+'" alt=""></div>');
		});
	});
		
</script>