using the code from http://touchslider.com
1.) how can the "currentClass" (the image it starts with) be set to random?
so any one of the images will appear on load?
2.) how can you toggle the script by clicking on an image?
to be more specific, there are navigation links and the images that you can click/swipe
how can you set it up so that when you click on an image, it locks to that image, disabling the navigation links and swipe??
edit: 2nd option solved +
I was able to work around editing the touchslider.com script, and made the 2nd option requested possible by using a transparent div.
JS (in body)
<script>
$(document).ready(function(){
var $content = $("#disablediv1").hide();
$(".lock").on("click", function(e){
$content.toggle();
});
});
</script>
HTML (wrap image)
<a class="lock" href="#"><img src="IMAGELINK"></img></a>
HTML (transparent div positioned over links to be disabled)
<div id="disablediv1"></div>
CSS (for transparent div)
#disablediv1{
position:absolute;
left:200px;
top:20px;
width:600px;
height:544px;
z-index:999;
}
^hopefully someone will find that helpful.
*I'm still looking for a way to have the slider show it's first image at random...
I tidied up the original HTML and CSS in the touchslider example.
http://touchslider.com/
Working example.
http://jsfiddle.net/jvt7U/1/
This works like an image preloader, for efficiency. Image src is excluded from the HTML and there is an array present for images, named gallery.
There are two loops. The first loop sets the random order in the array structure. For example:
2,0,1
1,2,0
0,1,2
The second loop assigns the image location, based on the image path from the gallery array.
Random Generator.
You can search around for better random number generators, and just replace the code here.
// Randomize the Array
galleryPosition.sort(function() {return 0.5 - Math.random()});
Related
I have multiple background images that are behind a block of text each. I would like to fade each background image and have the text move up when one background image fades into another.
For example
BG1 (background image 1) has Tegxt1 on top of it. As BG1 fades into BG2, Text1 moves up and is replaced by Text2.
How can I do this with simple jquery and javascript and CSS?
Here's what I tried
this._currentTimeout = setTimeout(function() {
this.slides$.eq(newSlideIndex).css('z-index', 3).fadeTo(ANIMATION_FADE_DURATION, 1, function() {
this.slides$.eq(this.currentSlideIndex).css('z-index', 1).css('opacity', 0);
this.slides$.eq(newSlideIndex).css('z-index', 2);
this.currentSlideIndex = newSlideIndex;
this._setTransitionTimerForNewSlide(this._getNextSlideIndex(), 5000);
}.bind(this));
}.bind(this), durationUntilTransition);
You did not provide enough code to generate a complete working example (How is your html structured? Where is your jQuery located on the page? What does your existing CSS look like?), so unfortunately no one on StackOverflow and give you a perfect answer. The best we can do is create a small demo of what you could do to accomplish this affect. It's then up to you to learn from the example and apply the concept to your own code.
If I was going to try to accomplish this, here's the approach I would take:
Stack images on top of each other with position: absolute;
The first image group should have the highest z-index, so it's on top. CSS can do this!
The second image group should have the second-highest z-index, so that it shows behind the first image during the fade. CSS again!
all other image_groups should have z-index below the second image. Yay for CSS!
Animate the image and text seperately
The image just needs to fade out
The text needs to fade up and out
After the first (top) image group is completely faded, move it to the bottom of the list
Remove the inline style="..." that jQuery's .animate() applies to the image group. Once we do this, the image group will adhere to the css rules we set up in step one.
JS Fiddle Demo
The first step will be done manually by you when you're writing HTML and CSS, but then your jQuery can handle steps 2-4. Then just repeat as much as you'd like. Ask questions if you need to, but try hard to apply this to your own code. Good luck!!
I want to create a website, inspired by http://cirkateater.no/en/ .
The images shall stay at the same position on the Screen (position:fixed), but inside the next div, the second image shall be visible.
My first solution was to use background-images, which worked.
With background-images, it looked like this JSFIDDLE:
http://jsfiddle.net/Ryanous/r7mLm4wg/4/ (i do not own these images)
Consider the following code:
<div class="background" style='background-image:url("http://mintywhite.com/wp-content/uploads/2012/10/fond-ecran-wallpaper-image-arriere-plan-hd-29-HD.jpg");'></div><div class="background" style='background-image:url("http://vpnhotlist.com/wp-content/uploads/2014/03/image.jpg");'></div>
But I also want to move the images via JS later on!
You cant manipulate backgroundimages top-offset easily, so I decided to use an img-tag instead.
Now, using the img-tag, the images seem to be independent of their divs, and overlap each other so that always only one image is visible.
( id like to include my current code but stackoverflow wont let me do. four spaces dont do anything, i cant format my code. )
So my question is:
How can I make images be only visible inside a certain div, but keep their positions fixed?
Putting the style overflow:hidden; on the div would hide all that's outside of the div.
I have 60 images. I want to display one image at a time and when the user pans it will display the next or the previous one depending on the pan's direction.
Simple example to explain my thought :
http://jquery.vostrel.cz/reel#demo
For now I load and append all my images to the DOM (img html tag... maybe as css background-image is better in my case) and I swap between them with the visibility attribute : hidden / visible.
It's working fine.
Second option : Same as before but I play with the z-index to put the desired image to the foreground.
Third option : just one image and I swap the src attribute.
EDIT 1 : images are intended to be displayed fullscreen and are 720p.
EDIT 2 : Loading the 60 images at the beginning is not really an issue... if I want more images I will load them as I need them.
I would place all images, positioned absolute in a container. Each image with a z-index of 1, except the first has the class top. The top class has z-index: 2.
In jQuery, when you click the img with class top it removes the class, finds the next element and adds the top class to that, each click making the next image visible.
Swapping the src or background image is going to require further loading on each click. Load everything, display accordingly with z-index.
Maybe the first option is the better one. But regarding performance issues, instead of loading every images at once, load only the first ones. On pan event load the next image bundle and so on.
Why you shouln't use the method with visibility, display, visibility or z-index: it would slow down the loading of your page, because 60 images would be loaded at the same time.
I tried the following, and it worked for clicking, although just in one direction (you can also add the buttons "back" an "forward"):
<img id="img" onmouseup="toggle()" scr="1.png" style="border-style:solid;padding:3px;border-width:1px;" />
javascript:
var i = 1;
function toggle() {
i++;
if(i==61) i = 1;
document.getElementById('img').src = i+".png";
}
Now you just have to put the images called "1.png, 2.png, 3.png, ... , 60.png" to the folder.
Z-index is much more slower than visibility.
If you want to browse a stack of images (hundreds of 720p images) go for the hidden/visible.
I would be interested to know why tough !
(I don't want to add code here because it would be very large chunks that would need explaining.)
To put it simply, I have:
A page with a 2x2 grid of images on (let's call that images.html),
A page that is a fullscreen image gallery made using CSS3 and HTML5 (let's call that gallery.html),
A style sheet that styles aspects of every page in the site except the gallery (let's call that main-styles.css),
And a style sheet that styles only gallery.html (let's call that gallery-styles.css).
The images in the 2x2 grid (images.html) need to open up the same gallery.html using gallery-styles.css. The only difference should be the range of images the fullscreen gallery displays.
So for one image on images.html, it may display 3 images in gallery.html. But for another image in images.html, it may display 4 entirely different images in gallery.html.
The problem I am having is how to track the image link that is clicked in images.html so as to display the different range of images in gallery.html.
The gallery-styles.css has a div that is positioned to be fullscreen, then there is an image list, e.g. '.image1{background-image:url(../images/1.jpg)}' of the different images that can be browsed through (left and right clickable arrows in the gallery.html). The HTML will use each image individually but with the same content holder, e.g.
<div class="image-1 holder">
How can I go about using the same gallery.html and gallery-styles.css files for each image in images.html? I'm not entirely against JavaScript but have gone this far with just CSS3 and HTML5 would be nice if it was possible to continue that way. Is there possibly a way using the input element?
Any help is great, thanks.
There are two ways to deal with processing information from the page: client side script (JS) and server side script (PHP or like) unless you have a great number of hand-coded html pages you can load for a corresponding link clicks.
Given that, you either link to your hard-coded page directly from the link, which I assume you have already thought of,
Or, you pass a parameter to server side in a form http://myserver.asdf/gallery.php?linkid=12&someotherparam=somevalue
In that case you capture these parameters on server side and generate a page with needed images.
In php all parameters can be found in $_REQUEST array.
Does this answer your question?
For this, I think the easiest way for you would be to use window.location.search. When you click the first image sending you to gallery.html, rather than just opening a regular copy, open for example, gallery.html?image1. Then in JavaScript, you can add this as a class to <body> or some other node when the page has loaded, and do the rest from CSS
window.addEventListener(
'load',
function () {document.body.className += ' '+window.location.search.slice(1)}
);
You can now do the decision making using, for example
body > genericNodes {display: none; }
body.image1 > someNode { display: block; }
/* etc */
A different option for pure CSS is to use a hash and then :target, but this means you lose the ability to have anchors in your page. i.e. open gallery.html#image1 and have
#image1, #image2, #image3, #image4 { display: none; }
:target { display: block !important; }
/* etc */
With some nodes of the form
<span id="image1"><!-- contents --></span>
<span id="image2"><!-- contents --></span>
$(function () {
$(".btn").on("mouseover",function(){
$(this).attr("src", $(this).attr("src").replace("images", "images/hover"));
});
$(".btn").on("mouseleave",function(){
$(this).attr("src", $(this).attr("src").replace("images/hover", "images"));
});
});
The above code is the way I change the image when the user hover on the button, when user click on it , it will redirect to other page. And the Html element is like:
<img class="btn" src="images/index_03.gif" />
The problem is , I am sure the path is correct , but when the user click on the button , during the time of loading the next page or in some case, when i hover on the image , the hovered image is not shown but broken link, why is it and how to fix it? Thanks for helping
$(this).attr("src", $(this).attr("src").replace("images/hover", "images"));
This code will reload the image, every time (or from cache).
So, during the page loading as other data is also loading at the same time, onhover image loading will be slow or broken.
I suggest you should load both images at the same time and at the same position and show/hide them on hover to get faster results.
Using CSS sprites instead of javascript calls will eliminate mouseover flickering, and reduce the total number of http requests required for your site (making it load faster).
You can achieve the same 'mouseover' functionality by using the css ':hover' pseudo element to alter the 'clip' property of the image (supported in IE6 and above).
Check out these CSS Tricks articles:
CSS Sprites: What They Are, Why They’re Cool, and How To Use Them.
CSS Sprites with Inline Images