Disappearing Image

[DS928]

I have a slider that has links. When you click on an image, it populates the div underneath. The slider works fine, but when you click on the image and the div populates, the next time the slide comes up in the slider the image is gone! Any help appreciated. The link...

http://www.menuhead.com/feedyourheadcopy.html

the source code can be viewed. Thank you.

[jscheuer1]

It looks like a script (or scripts) is doing that. The images are resized to fit and also get their top coordinates set. For some reason it's setting that one to top: 9999px;

But since they're all being resized to fit, It should be safe to put this in the stylesheet:

.wopeslider-slide img {
	top: 0 !important;
}

[DS928]

Thank you, John. I placed it in the stylesheet, and it's still disappearing. Perhaps I did this wrong? Here is the wopeslider.css sheet

http://www.menuhead.com/feedyourheadcopy.html

/* wope slider */
.wope-slider{
	width: 930px;
	height: 400px;
	overflow: hidden;
	position: relative;
}

.wopeslider-ui{
	position:absolute;
	z-index:3;
}

.wopeslider-container{
	position:relative;
	z-index:1;
	width:100%;
	height:100%;
	overflow:hidden;
}

.wopeslider-text-container{
	position:absolute;
	z-index:2;
	width:100%;
	height:100%;
}

.wopeslider-image-container{
	position:absolute;
	z-index:1;
	width:100%;
	height:100%;
}

.wopeslider-slide{
	position:absolute;
}


.wopeslider-slide-current{
	display:block;
	left:0px;
}



.wope-slider .slider-data{
	display:none;
}

.wopeslider-slide img {
	top: 0 !important;
}


.wopeslider-slide img ,.wopeslider-slide a{
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 2px;
}

.wopeslider-slide a{
	z-index:100;
	background:url('images/bg.png') left top repeat;
	display:none;
}
	
.wope-slider .data-image{
	display:none;
}

.wopeslider-border{
	position:absolute;
	z-index:2;
}

[DS928]

Maybe in here? Can the two scripts be conflicting?

<script type="text/javascript">
		$(document).ready(function(){
			$('.wope-slider').wopeslider({
    		skin : 'rounded-black',
    		autoplay : true,
   			show_gui : true,
    		pause_button : true,
    		navigation_buttons : true,
    		numbered_buttons : true,
			
			});
		});
		</script>
        <script type="text/javascript">
		jQuery(function($){
		$(document).on('click', '.wopeslider-slide a', function(e){
		var href = this.href;
		$.ajax({
			url: href,
			success: function(data){
				$('#BigPlace').html(data);
			}
			});
			e.preventDefault();
		});
		});
		</script>

[jscheuer1]

Well it solved the initial problem of the lion not showing up at all.

To answer your current question, in a way yes. Try removing the AJAX part:

        <script type="text/javascript">
		jQuery(function($){
		$(document).on('click', '.wopeslider-slide a', function(e){
		var href = this.href;
		$.ajax({
			url: href,
			success: function(data){
				$('#BigPlace').html(data);
			}
			});
			e.preventDefault();
		});
		});
		</script>

If I remove it by doing:

jQuery(document).off('click')

in the console, the problem still exists. So I'm thinking it's something inherent to the slider. What happened to that other slider you had? That one didn't seem to have this problem.

One other thing I notice is that in the prior working page with the other slider, it used jQuery 1.9.0. This page is using 1.7.2. That may or may not be a factor.

[DS928]

Thank sJohn. That was one of the problems and also I had two <Heads> and I reworked the slider image code to...

<div class="wopeslider-slide slide1" style="time:6000;">
<img class="ws1" src="Images/Slider/FeedSlider/African.jpg" style="easing:easeOutExpo;delay:0;
time:1000;action:fade"width="800" height="300"/>
<a href="Scripts/africa_search.php"></a>
</div>

All is good now. Thank you for your help.