Javascript Slideshow Last Image Appearing Quickly at Start of Show - javascript

I have created a 4-image fading slideshow. When the page loads, the last image flashes quickly before the first image appears. I tried using a blank image at the end as suggested in a post on this site, but that had no effect. I also tried putting the first slide in the last position as well which removes the flashing image at start, but then the last image appears for twice as long. Is there a way to keep this from happening without having to duplicate the first slide?
$(document).ready(function() {
$("#photos img:gt(0)").hide();
setInterval(function() {
var current = $('#photos img:visible');
var next = current.next().length ? current.next() : $('#photos img:eq(0)');
//hide the current image
current.fadeOut(2000);
//show the next one
next.fadeIn(2000);
}, 5000);
});

I figured it out. I needed to hide all the images except the first one. When I hid only one, another one would appear instead, but it was so quick I thought it was the same one. Now it's working fine.

You'll need to hide the image with css, this way it hidden before the js has loaded, something like this:
//css
#photos img:last-child {
display: none;
}
Just an idea...
Edit from your comments.
#photos img {
display: none;
}
#photos img:first-child {
display: block;
}

Related

Modal not shown but nothing is clickable on page

I have a bootstrap 4 modal which is shown the first time a page is loaded. A cookie is set after that first time which hides the modal on load. The first time the site is loaded, everything works fine even after you close the modal. However, subsequent page loads, when the modal is not shown, for some reason nothing is clickable on the page. It has something to do with the z-index, because I'm able to set the z-index of individual elements (ie the nav bar) really high and then they become clickable...I just want to avoid having to go through and put a z-index on every single element.
Here is the code deciding whether or not the modal is shown.
$(document).ready(function () {
if (!<?php echo $modalCookie; ?> && !<?php echo $showOnce; ?>) {
$('#aboutModal').modal('show');
}
}
Here is a link to the site with the issue: https://dev.vmc.w3.uvm.edu/xana/indicators/vt
Let me know if there's any other info that may be helpful...
Thanks!
What you're doing to hide the popup is to reduce it's opacity to 0, but the element still takes space in the screen even if you cannot see it. It's transparent now, but it's actually showing.
You could fix this issue by using display: none to hide it instead.
/* Don't show modal by default */
#aboutModal {
display: none;
padding-right: 17px;
}
/* Only display modal when it has class .show */
#aboutModal.show {
display: block;
}
Adding this css seemed to do the trick.
.fade:not(.show) {
z-index: -1;
}

Image loads by default instead of remaining hidden with JQuery: Image on Scroll Down Function

I'm a jquery newbie trying to make my logo remain hidden and only appear when I scroll down.
The problem with the following jquery code is that it makes my logo appear when I load the site
The code only works as intended when I scroll once, however I want to make the jquery load the page with the image hidden. How can I fix the following code to accomplish this?
<script>
(function($) {
var $logo = $('.logo');
$(window).on('scroll', function() {
$logo.css({display: $(window).scrollTop() > 300 ? "block":"none"});
});
})(jQuery)</script>
You should load the css with that element hidden or withuot displaying it.
You can either do it directly from css (I recommend that) as:
.logo{
display: none;
// or
visibility: hidden;
}
Or, do it with jQuery as:
Above the var $logo = $('.logo'); add $('.logo').css('display','none');.
Then to make it visible again, $('.logo').css('display','block');.
Hope that helps!

using CSS content & :after to show a <span> inside an image

I am working on an image gallery inside a web template, similar to this link. now currently when i click on an image it will be shown inside a jquery slider. but i need the image inside the slider to show the span defined inside the markup <span><strong>Project name:</strong><em>villa2</em></span>, where each image will have the following markup :-
<li>
<figure><img src="http://livedemo00.template-help.com/wt_47767/img/page3_img1.jpg" alt=""><span><strong>Project name:</strong><em>villa2</em></span></figure>
</li>
so i define the following inside my css file:-
#gallerySlider .placeholder:after {
content: "test";
color: yellow;
font-size: 36px;
font-family: arial;
position: relative;
display: block;
height: 20px;
width: 200px;
z-Index: 1;
bottom: 42px;
text-align: right;
margin: -8px;
}
which will show the following :-
where i was able to add the text "test " inside the slider. but can anyone adivce how i can do these 2 modifications:-
1) instead of showing a static text inside the slider using the following css:-
#gallerySlider .placeholder:after {
content: "test";
how i can force the CSS content , to show the <span><strong>Project name:</strong><em>villa2</em></span> which is related to the rendered image ?
2) how i can move the content to be below the image instead of being on the left ?
Thanks
EDIT
now after many tests and modifications i did the following modification to the loadImage callback function inside the Touchtouch script :-
function loadImage(src, callback){
var img = $('<img>').on('load', function(){
callback.call(img);
});
img.attr('src', src);
// get all the captions (should probably be done with variable referring to something about above selector)
var allcaptions = $("figure span");
// setTimeout is a hack here, since the ".placeholders" don't exist yet
//setTimeout(function () {
$(".placeholder").each(function (i) {
// in each .placeholder, copy its caption's mark-up into it (remove the img first)
var caption = allcaptions.eq(i).clone();
// caption.find("img").remove();
$(this).append("<div class='caption'>" + caption.html() + "</div>");
});
// }, 500
//);
}
this seems to show the span as follow:-
but i am facing two problems:-
First Problem as shown on the above picture the text will be shown twice , specifically when i click on the next and previous arrows, here is the built-in code for the next & prevoise arrows :-
function showNext(){
// If this is not the last image
if(index+1 < items.length){
index++;
offsetSlider(index);
preload(index+1);
}
else{
// Trigger the spring animation
slider.addClass('rightSpring');
setTimeout(function(){
slider.removeClass('rightSpring');
},500);
}
}
function showPrevious(){
// If this is not the first image
if(index>0){
index--;
offsetSlider(index);
preload(index-1);
}
else{
// Trigger the spring animation
slider.addClass('leftSpring');
setTimeout(function(){
slider.removeClass('leftSpring');
},500);
}
}
Second problem. is that as i click on next & previous arrows the image will keep loosing its position and after many next & previous i will end up having the image on the following position at the bottom of the page:-
so can anyone adivce how i can fix these 2 issues ?
Pseudoelements :after and :before make possible to add an element into the html flow with just css... but that's it. An element which can be text, shapes, images (using css instructions as content:url('image.png'), etc. But you can't add html in the content:of the pseudoelement (as logn as I know).
You could use simple jquery as:
$(".placeholder").after("<span class="your-class-to-style"><strong>Project name:</strong><em>villa2</em></span>");
But if you have control of the html I would just include the span there.
(note: :after and:before follow the html flow so to reposition them you need to use position:absolute not forgetting to add relative to the parent)
Well, if you check the sources, you will see they are using the TouchTouch jQuery plugin (a little bit outdated by the way). Since the plugin doesn't have options or callbacks, you will have to do this manually. The key is in the following line:
loadImage(items.eq(index).attr('href'), function(){
placeholders.eq(index).html(this);
});
So, even if you add the texts with jQuery, the plugin will remove it from the placeholder and add only the image.

Change background with setInterval

I want to have the background image of a page change every 5 seconds. There are 5 images and I want them to loop.
I researched thoroughly here and tried different approaches. Can someone please tell me what is wrong with this code:
In my css I have:
html, body, #wrapper {
height:100%;
margin: 0;
padding: 0;
border: none;
background-image:url('images/indexbg01.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center center;
}
and my javascript I have:
var imageArray = ['images/indexbg02.jpg', 'images/indexbg03.jpg',
'images/indexbg04.jpg', 'images/indexbg05.jpg',
'images/indexbg01.jpg'];
var imageIndex = 0;
function changeBgImage(){
var imageUrl = "url('" + imageArray[imageIndex] + "')";
$('body').css('background-image', imageUrl);
imageIndex++;
if (imageIndex >= imageArray.length) {
imageIndex = 0;
}
}
setInterval(changeBgImage, 5000);
I first had the imageUrl variable built in the line that follows, but I added this so I could check it was built ok.
In the chrome debugger, when I put a breakpoint on the line following the imageUrl build line, it stops nicely every 5 seconds, the imageUrl is built as it should, yet the background does not change.
I edited the fiddle: http://jsfiddle.net/5Cv49/1/.
Enter and see. The only markup there is the:
<div id="wrapper"></div>
The only css modified is:
adding #wrapper to the selector.
See how background is overlapped by #wrapper's background.
Works in the fiddle.It means you need to run script after page load like the fiddle does:
$(window).load(function(){
//your script
});
Working fiddle
One approach that I personally have done in the past is to have a full page slideshow using jQuery. there are a number of versions of slideshow you can use from the internet. There are 100s of them some better than others. In the slideshow have it times to change every 5 seconds like you wanted. in your html wrap the slideshow in a div (#slideshow_background for example). wrap the rest of your html page into another wrapper (#content). in your CSS set the following..
#slideshow_background {
margin:0;
padding: 0;
position : initial;
width: 100%;
height:100%;
}
the put the css for your #content and set the z-index to 1 so that it lies above the slideshow.hope this helps

carouFredSel slider - prev,next and pagination not working

I am using the carouFredSel jquery plugin for a website I'm making. I'm having some issues with the "prev", "next" and "pagination" containers. The images show up and start sliding but I cant navigate (prev/next) and I cant see the pagination itself..
You can see the page here: http://goo.gl/pJLNN
The slider is on the top. Caroufredsel is initialized in bbody.js upon DOM ready. Does anyone have any ideas?
In order to correct the images positions you need to add or change the absolute position of every image container.
Since the type of animation you chosen is Crossfade then all the images must be in top of each other to make it work, otherwise by default the are next to each other.
So in the css put this:
#rotate > div {
float: left;
display: block;
width: 100%;
height: 650px;
position: absolute;
left: 0;
}
To correct next and prev you need to make a small fix to the js, this is the correct way of calleing the buttons
prev: {
button : "#msprev"
},
next: {
button : "#msnext"
},
The same happens to pagination, correct it:
pagination: {
container: '#pager'
}
For anyone else facing this issue, another reason for the prev, next & pagination links not working is that the element IDs may have been duplicated somewhere else on your page. I had
prev: {
button : "#prev3"
},
next: {
button : "#next3"
},
There two elements with id="prev3 on the page. Same for id="next3". Once I changed the IDs to make them unique, the navigation started working correctly.

Categories

Resources