I have those pictures
<img class=img src='a' />
<img class=img src='b' />
<img class=img src='c' />
<img class=img src='d' />
<img class=img src='e' />
And this button
<button id=presstostart>PRESS ME TO START</button>
I want once the button is clicked start showing the pictures one by one, a,b,c,d,e with an interval of 2 seconds amongst them.In JQuery.No plugins....
There are many slider plugins you can use. But personally I would recommend flexslider and nivoslider. They're easy to use and customize. You can also find attributes to set animation speed, pause time, slide direction, etc.
I found an example in this url
http://www.jssor.com/development/index.html
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px;">
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 600px; height: 300px;">
<div><img u="image" src="image1.jpg" /></div>
<div><img u="image" src="image2.jpg" /></div>
</div>
</div>
<!-- it works the same with all jquery version from 1.x to 2.x -->
<script src="jquery.min.js"></script>
<script src="jssor.slider.mini.js"></script>
<script>
jQuery(document).ready(function ($) {
var options = { $AutoPlay: true };
var jssor_slider1 = new $JssorSlider$('slider1_container', options);
});
</script>
You will have to download the js library from the link above, and instead of on ready you could assign the event to a click of a button.
yet another example...
http://jsfiddle.net/7WL6P/200/
Related
I'm using somehwat unusual navigation, as seen here. When a user mouses over the bars, they slide out into view. All of that is working fine. The problem is, I cannot find the CSS to make the buttons align left of the edge of the screen (as seen in the image), regardless of the display dimensions.
I originally tried:
<style>
#container {width: 600px; height: 25px; position: relative;}
#bar0, #bar1, #bar2, #bar3, #bar4, #bar5 {position: absolute; left: -340px;}";
</style>
Which worked perfectly. But only on my screen. I thought that position:absolute inside position:relative would work regardless of screen dimensions, but was obviously wrong.
I then tried several variations on dynamically adjusting the screen width in container div with a function that runs onload:
function populateArrays() {
for (i = 0; i <= 5; i++) {
position[i] = -340;
bar[i] = document.getElementById("bar" + i.toString());
id[i] = i;
}
var sheet = document.createElement('style');
var sWidth = screen.width;
sheet.innerHTML = "#container {width: " + sWidth + "px; height: 25px; position: relative;} #bar0, #bar1, #bar2, #bar3, #bar4, #bar5 {position: absolute; left: -340px;}";
document.body.appendChild(sheet);
}
But this also did not work.
What is the correct way to align the images to the far left, partially (mostly) off screen, regardless of dimensions?
Thank you
EDIT: HTML was requested. I don't know if this will help, the issue seems to be adjusting the CSS properly (perhaps with JavaScript).
<div id ="container">
<br><br><br><br>
<img src="homeSilverGlassText.png" alt="Home" width="200" height="35" id="bar0" onmouseover="startMove(0)" />
<br><br><br><br>
<img src="aboutSilverGlassText.png" alt="Anout Me" width="200" height="35" id="bar1" onmouseover="startMove(1)" />
<br><br><br><br>
<img src="contactSilverGlassText.png" alt="Contact Me" width="200" height="35" id="bar2" onmouseover="startMove(2)" />
<br><br><br><br>
<img src="gallerySilverGlassText.png" alt="Gallery" width="200" height="35" id="bar3" onmouseover="startMove(3)" />
<br><br><br><br>
<img src="uiSilverGlassText.png" alt="Design" width="200" height="35" id="bar4" onmouseover="startMove(4)" />
<br><br><br><br>
<img src="editSilverGlassText.png" alt="Editor" width="200" height="35" id="bar5" onmouseover="startMove(5)" />
</div>
Links for button clicks have not yet been added.
Thank you
I think I might have what you want. Your code really doesn't do a great job of describing your problem though. You have images that are only 200px wide and you start by moving them 340px to the left so that you won't be able to see them at all. What are you trying to achieve with that? I'm not sure this is one hundred percent what you want, but this HTML/CSS will move half of your images off screen and then slowly (2 seconds) move them to a "normal" position on hover. I only moved them 100px offscreen so you can actually see them. Let me know if you are actually going for a different effect.
#container {
width: 600px;
position: relative;
}
.bar {
position: absolute;
transition: left 2s;
left: -100px;
}
.bar:hover {
left: 0px;
}
<div id="container">
<br><br><br><br>
<img src="https://placehold.it/200x35" alt="Home" width="200" height="35" id="bar0" class="bar" />
<br><br><br><br>
<img src="https://placehold.it/200x35" alt="Anout Me" width="200" height="35" id="bar1" class="bar" />
<br><br><br><br>
<img src="https://placehold.it/200x35" alt="Contact Me" width="200" height="35" id="bar2" class="bar" />
<br><br><br><br>
<img src="https://placehold.it/200x35" alt="Gallery" width="200" height="35" id="bar3" class="bar" />
<br><br><br><br>
<img src="https://placehold.it/200x35" alt="Design" width="200" height="35" id="bar4" class="bar" />
<br><br><br><br>
<img src="https://placehold.it/200x35" alt="Editor" width="200" height="35" id="bar5" class="bar" />
</div>
I am sorry if this is covered somewhere else but I have not been able to find it. I am trying to create an area of my page with three <div>s that rotate on top of each other. I have written this css and code:
#block {
width:1202px;
height: 402px;
overflow: hidden;
margin: auto;
}
.content {
width:1200px;
height:400px;
margin: auto;
}
<div id="block">
<div class="content">
<a name=image1></a>
<img src="/images/imagea.jpg" alt="image1"/>
<img src="/images/button.png" alt="button" style="margin-left: 700px;margin-top: 300px; width:300px;height:75px;"/>
</div>
<div class="content">
<a name=image2></a>
<img src="/images/imagea.jpg" alt="image1"/>
<img src="/images/button.png" alt="button" style="margin-left: 700px;margin-top: 300px; width:300px;height:75px;"/>
</div>
<div class="content">
<a name=image3></a>
<img src="/images/imagea.jpg" alt="image1"/>
<img src="/images/button.png" alt="button" style="margin-left: 700px;margin-top: 300px; width:300px;height:75px;"/>
</div>
</div>
<table style="margin: auto; width:20px;">
<tr>
<td>•</td>
<td>•</td>
<td>•</td>
</tr>
I have not yet played with the formatting as right now it is just theory, but can you tell me how to make the 3 content divs rotate so that each displays for 10 seconds then moves to the next eventually rotating back to the beginning.I know this will likely require php or jquery, but I am uneducated in both.
Thank you for any help that you can offer.
I'm currently trying to build a mobile image gallery using PhotoSwipe.
I've been able to get it working but there's one small problem. When I
click on a photo thumbnail, the actual photo always takes up the entire
viewport. This is OK when you're viewing the gallery on a mobile device.
But if your viewport is a computer screen and the image isn't a
high-res one, the photo can be very blurry. I'd rather limit the photo
to a width of maybe 300 to 400 pixels when viewed on a computer. Is there
a way to do this in PhotoSwipe? I read the documentation but couldn't
quite figure it out. I've enclosed my code below.
Thanks.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PhotoSwipe - jQuery Mobile Version</title>
<link rel="stylesheet" href="lib/jquery.mobile-1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<link rel="stylesheet" href="lib/photoswipe/photoswipe.css" />
<link rel="stylesheet" href="css/mediaqueries.css" />
<style type="text/css">
div.gallery-row:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
div.gallery-item {
float: left;
width: 33.333333%;
}
div.gallery-item a {
display: block;
margin: 5px;
border: 1px solid #3c3c3c;
}
div.gallery-item img {
display: block;
width: 100%;
height: auto;
}
#Gallery1 .ui-content, #Gallery2 .ui-content {
overflow: hidden;
}
</style>
<script type="text/javascript" src="lib/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="lib/jquery.mobile-1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<script type="text/javascript" src="lib/simple-inheritance.min.js"></script>
<script type="text/javascript" src="lib/jquery.animate-enhanced.min.js"></script>
<script type="text/javascript" src="lib/photoswipe/code-photoswipe-jQuery-1.0.11.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('div.gallery-page').live('pageshow', function(e) {
// Re-initialize with photos for the current page
$('div.gallery a', e.target).photoSwipe();
return true;
});
});
</script>
</head>
<body>
<div data-role="page" id="Home">
<div data-role="header">
<h1>PhotoSwipe</h1>
</div>
<div data-role="content" >
<p>These examples show PhotoSwipe integrated with jQuery Mobile:</p>
<ul data-role="listview" data-inset="true">
<li>First Gallery</li>
<li>Second Gallery</li>
</ul>
</div>
<div data-role="footer">
<h4>© 2011 PhotoSwipe</h4>
</div>
</div>
<div data-role="page" id="Gallery1" class="gallery-page">
<div data-role="header">
<h1>First Gallery</h1>
</div>
<div data-role="content">
<div class="gallery">
<div class="gallery-row">
<div class="gallery-item"><img src="images/01-thumb.jpg" alt="Image 1" /></div>
<div class="gallery-item"><img src="images/02-thumb.jpg" alt="Image 2" /></div>
<div class="gallery-item"><img src="images/03-thumb.jpg" alt="Image 3" /></div>
</div>
<div class="gallery-row">
<div class="gallery-item"><img src="images/04-thumb.jpg" alt="Image 4" /></div>
<div class="gallery-item"><img src="images/05-thumb.jpg" alt="Image 5" /></div>
<div class="gallery-item"><img src="images/06-thumb.jpg" alt="Image 6" /></div>
</div>
<div class="gallery-row">
<div class="gallery-item"><img src="images/07-thumb.jpg" alt="Image 7" /></div>
<div class="gallery-item"><img src="images/08-thumb.jpg" alt="Image 8" /></div>
<div class="gallery-item"><img src="images/09-thumb.jpg" alt="Image 9" /></div>
</div>
</div>
</div>
<div data-role="footer">
<h4>© 2011 PhotoSwipe</h4>
</div>
</div>
</body>
</html>
PhotoSwipe has a modal option:
var options = {
modal: false
}
var gallery = new PhotoSwipe( someElement, PhotoSwipeUI_Default, someItems, options);
gallery.init();
which makes the PhotoSwipe container take only the size of its parent when set to false.
You can put Photoswipe markup (root element with class pswp) to any container with position: relative and edit photoswipe.css or add to your stylesheet something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Photoswipe in container</title>
<style>
#myContainer {
position: relative;
/* other container styles */
}
.pswp {
position: absolute!important;
}
</style>
</head>
<body>
<div id="myContainer">
<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<!-- standard markup omitted -->
</div>
</div>
</body>
</html>
I do not know of an automatic way to do this, what i did was to put the .pswp div inside of a container div with fixed width and height and then position that container div via JS + CSS in the center of the screen.
Use a basic setup as described on the photoswipe documentation with the pswp div already added and then:
HTML
<div id="pswp-container">
<div class="pswp">
...
</div>
</div>
CSS
#pswp-container {
position: fixed;
left: 100px;
right: 100px;
top: 100px;
bottom: 100px;
}
.pswp {
position: relative !important;
}
JS
// Centers the Photoswipe container in the center of the screen (call on init + resize)
function centerPhotoswipe() {
var ww = $(window).innerWidth();
var wh = $(window).innerHeight();
var $el = $("#pswp-container");
var w = $el.outerWidth();
var h = $el.outerHeight();
$el.css({
left: Math.round( (ww-w) / 2),
top: Math.round( (wh-h) / 2)
});
}
You can find a working example here at CodePen.
This should give you the desired effect and a good starting point for your own page, BUT keep in mind that it will be necessary to add your own background layer to trigger the 'close on click somewhere else' and other details that you have to fix during the opening / closing events of the popup ...
I tried all sorts of solutions to get this to work properly, including the inline gallery options (demo).
However I couldn't quite get it to work as I wanted as I needed the a specific gallery to display without showing the thumbnails first.
What I did in the end was get a basic PhotoSwipe page working which automatically loaded the images on page load to a full screen, for example using an MVC URL:
/Gallery/Index/1
then simply embed this link in a div using object:
<div id="mygallery1">
<object data="/Gallery/Index1">
Error: Embedded data could not be displayed.
</object>
</div>
This allowed me to place as many galleries as I wanted in whatever position I wanted without any interference between them.
Note though that this didn't seem to work for mobile browsers, which was fine as for screens that small I wanted a fallback option anyway to render as an overlay over the whole page due to limited screen real estate.
I am working with NivoSlider and have been unable to make the Image a link. I know, i can use captions to create a link. But, that isn't enought. For better accessibility, i want the image to be a link too.
There is one similar question on StackOverflow, but it is for a very old version of Nivo.
I am using this syntax for the slider.
<div class="slider-wrapper theme-default container">
<div class="ribbon"></div>
<div id="slider" class="nivoSlider">
<div class='slide'><a href='#'><img src='abc.png'></a>
</div>
<div class='slide'><a href='http://google.com'><img src='google.png' title=''></a>
</div>
</div>
</div>
Everything works perfectly. The slideshow, transition, captions, etc. But, I am unable to make the anchor link work on the entire image. :(
If anyone knows how to make it work, then please let me know.
EDIT: Here is the only piece of CSS written by me:
.slider-wrapper {
margin: auto;
margin-top: 15px;
background: fade(white,80%);
padding-top: 15px;
margin-bottom: 40px;
}
.slide-title {
.font;
color: #ddd;
}
I am very late to party. it may be useful for someone
HTML
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img title="#htmlcaption1" src="images/01.png" alt="">
<img title="#htmlcaption2" src="images/02.png" alt="">
</div>
</div>
CSS
.nivoSlider a.nivo-imageLink {
background:white;
filter: alpha(opacity=0);
opacity: 0;
z-index: 8;
width: 100%;
height: 100%;
position: absolute;
}
If you remove the wrapper divs with class "slide" it will work just fine.
For example this is from nivo slider's demo
<img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" />
<img src="images/up.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" />
<img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" />
<img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" />
or checkout this thread,
NIVO SLIDER - Make a slide a link?
I am trying to get a button to appear over an image when there is a mouseover event over the image. I have multiple images on the screen that I would like to have the same functionality. I'm having trouble getting this to work as the button is always present. Any advice on how to get it to work? Below is the rendered html and javascript.
javascript
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script type = "text/javascript">
$(document).ready(function() {
$('.image').mouseover(function(){
$('.munchbutton').show();
});
});
</script>
css
div.munchbutton{
position: absolute;
bottom: 5px;
right: 0px;
left: 60px;
}
div.wrapper{
float:left; /* important */
position:relative; /* important(so we can absolutely position the description div */
padding: 5px;
}
html
<!-- wrapper div -->
<div class='wrapper'>
<!-- image -->
<div class="image" style="position: relative; left: 0; top: 0;">
<a href="/partners/Business/CNNMoney" >
<img src="/static/CNNMoney.png" style="position: relative; top: 0; left: 0;"/>
</a>
<!-- partner munchbutton div -->
<div class='munchbutton'>
<form method='post'><div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='7wq8pRYNCDkXUGRv7eU6qI1BU7RKyoT8' /></div>
<input type="hidden" name="channel" id="channel" value="CNNMoney" />
<input type='submit' class = 'add' value='Add to plate'/>
</form>
</div>
<!-- end munchbutton div -->
</div>
<!-- end image div -->
</div>
<!-- end wrapper div -->
<!-- wrapper div -->
<div class='wrapper'>
<!-- image -->
<div class="image" style="position: relative; left: 0; top: 0;">
<a href="/partners/Business/EconomistMagazine" >
<img src="/static/EconomistMagazine.png" style="position: relative; top: 0; left: 0;"/>
</a>
<!-- partner munchbutton div -->
<div class='munchbutton'>
<form method='post'><div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='7wq8pRYNCDkXUGRv7eU6qI1BU7RKyoT8' /></div>
<input type="hidden" name="channel" id="channel" value="EconomistMagazine" />
<input type='submit' class = 'add' value='Add to plate'/>
</form>
</div>
<!-- end munchbutton div -->
</div>
<!-- end image div -->
</div>
<!-- end wrapper div -->
In order for .show() to work, surely you must hide the buttons first!
Working fiddle (the only change is that .munchbutton is now display: none; by default)
Let me know if this is not what you were after.
The original state of the munchbutton should be display: none; and then you can show it from there.
Also when you set the show I assume you are only wanting to show the button within that div so you should probably use $(this).find('.munchbutton').show();
Here a fiddle with a mouseout chained - http://jsfiddle.net/GTw8d/