I create kind of gallery in Wordpress. However, posts are listed with plugin (they are attached to map - WP Google Map) and I can't use any gallery plugin. I just upload images and want to add them to div "showimagediv". This works fine but I can't make PREV/NEXT.
This is what it looks like:
$(document).ready(function() {
$('.thumb').on('click', function() {
var img = $('<img />', {
src: this.src,
'class': 'fullImage'
});
$('.showimagediv').html(img).show();
});
$('.showimagediv').on('click', function() {
$(this).hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post_content">
<img src="image1.jpg" class="thumb" />
<img src="image2.jpg" class="thumb" />
<img src="image3.jpg" class="thumb" />
</div>
<div class="post_content">
<img src="image4.jpg" class="thumb" />
<img src="image5.jpg" class="thumb" />
<img src="image6.jpg" class="thumb" />
</div>
<div class="post_content">
<img src="image7.jpg" class="thumb" />
<img src="image8.jpg" class="thumb" />
<img src="image9.jpg" class="thumb" />
</div>
It works well but doesn't give me option to to PREV/NEXT.
This is untested - but might help you get the idea.
HTML
<div class="nextSelector">
<span>NEXT</span>
</div>
JS
$('.nextSelector').on('click',function(){
var nextImage = $('img.fullImage + img');
$('img.fullImage').toggleClass("thumb fullImage");
nextImage.toggleClass("thumb fullImage");
})
Related
I saw this solution and i don't understand where is the preload here:
function preloadImage(url)
{
var img=new Image();
img.src=url;
}
On my html file i have this part:
<div id="slideShow">
<img src="Images/radar000025.Gif" alt="slide" />
<img src="Images/radar000203.Gif" alt="slide" />
<img src="Images/radar000251.Gif" alt="slide" />
<img src="Images/radar000267.Gif" alt="slide" />
<img src="Images/radar000283.Gif" alt="slide" />
<img src="Images/radar000284.Gif" alt="slide" />
<img src="Images/radar000301.Gif" alt="slide" />
<img src="Images/radar000539.Gif" alt="slide" />
<img src="Images/radar000556.Gif" alt="slide" />
<img src="Images/radar000571.Gif" alt="slide" />
<img src="Images/radar000588.Gif" alt="slide" />
<img src="Images/radar000589.Gif" alt="slide" />
<img src="Images/radar000794.Gif" alt="slide" />
<img src="Images/radar000810.Gif" alt="slide" />
<img src="Images/radar000811.Gif" alt="slide" />
<img src="Images/radar000812.Gif" alt="slide" />
<img src="Images/radar000813.Gif" alt="slide" />
<img src="Images/radar000814.Gif" alt="slide" />
<img src="Images/radar000830.Gif" alt="slide" />
<img src="Images/radar000831.Gif" alt="slide" />
<img src="Images/radar000832.Gif" alt="slide" />
<img src="Images/radar000833.Gif" alt="slide" />
<!-- #slideShow --></div>
Then in the bottom i'm calling javascript file:
<script type="text/javascript" src="SlideShow.js"></script>
In the SlideShow.js i have the functions of timer and buttons and events.
And last i have a style file Screen.css for all the styling.
What i want to do is to make a preloader for all the images maybe even with a progressBar that show each image loading progress.
I saw some examples and i saw this answer above of the small function but i'm not sure how to use it with my code.
This is my site with the working slideshow but without a preloader:
Slide Show
And this is the SlideShow javascript file and css file: newsxpressmedia.com/SlideShow.js , newsxpressmedia.com/Screen.css
Maybe using ajax for the preloading is better not sure.
Hope this might help you . Try this
#charset "utf-8";
/* Preloader */
#preloader {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background-color:#fff; /* change if the mask should have another color then white */
z-index:99; /* makes sure it stays on top */
}
#status {
width:200px;
height:200px;
position:absolute;
left:50%; /* centers the loading animation horizontally one the screen */
top:50%; /* centers the loading animation vertically one the screen */
background-image:url(http://1.bp.blogspot.com/-IdPZAIYB_38/UAsThCuCjcI/AAAAAAAABK0/wzErRGy13NU/s1600/loading.gif); /* path to your loading animation */
background-repeat:no-repeat;
background-position:center;
margin:-100px 0 0 -100px; /* is width and height divided by two */
}
<body>
<!-- Preloader -->
<div id="preloader">
<div id="status"> </div>
</div>
<!-- Your Website Content -->
<div>
This is your website content
<img src="http://newsxpressmedia.com/files/radar-simulation-files/radar002407.Gif" />
</div>
<!-- jQuery Plugin -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<!-- Preloader -->
<script type="text/javascript">
//<![CDATA[
$(window).load(function() { // makes sure the whole site is loaded
$("#status").fadeOut(); // will first fade out the loading animation
$("#preloader").delay(350).fadeOut("slow"); // will fade out the white DIV that covers the website.
})
//]]>
</script>
</body>
I need to create a slider in which the images moves continuous.
I have used flexslider but it moves from first page to next, instead i need it to be continuous.
<script type="text/javascript">
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide", // set animation to slide
animationLoop: true,
itemWidth: 120,
itemMargin: 20,
minItems: 1,
maxItems: 5,
smoothheight: true,
directionNav: true,
});
});
</script>
<style type="text/css">
.flexslider{
background:none;
border:none;
box-shadow:none;
margin:10px;
}
</style>
<div class="flexslider">
<ul class="slides">
<li><img alt="" src="images/1.jpg" /></li>
<li><img alt="" src="images/2.jpg" /></li>
<li><img alt="" src="images/3.jpg" /></li>
<li><img alt="" src="images/4.jpg" /></li>
<li><img alt="" src="images/5.jpg" /></li>
<li><img alt="" src="images/6jpg" /></li>
<li><img alt="" src="images/7.jpg" /></li>
<li><img alt="" src="images/8.jpg" /></li>
<li><img alt="" src="images/9.jpg" /></li>
</ul>
</div>
If you want a slider that will continuously move your images in a loop, I recommend downloading the jQuery Anything Slider from here: http://css-tricks.com/anythingslider-jquery-plugin/
After you download it, use the following code:
jQuery:
<script src="_js/jquery-1.7.2.min.js"></script>
<script src="_js/jquery.anythingslider.min.js"></script>
<script>
$(document).ready(function() {
$('#slider').anythingSlider({
buildArrows : true,
autoPlay : true, // THIS MUST BE SET TO TRUE FOR YOUR SLIDER TO LOOP
buildStartStop : false,
resizeContents: false
});
}); // end ready
</script>
HTML:
<div id="slider">
<div class="slidePanel"><a href ='#'>
// YOU CAN ADJUST THE WIDTH AND HEIGHT OF YOUR IMAGES
<p>
<img src="INSERT IMAGE SOURCE 1" alt="SomePic1" width="120" height="150" class="imgLeft"> INSERT INFORMATION ABOUT IMAGE HERE
</p>
</a></div>
<div class="slidePanel"><a href ='#'>
<p>
<img src="INSERT IMAGE SOURCE 2" alt="SomePic2" width="120" height="150" class="imgLeft"> INSERT INFORMATION ABOUT IMAGE HERE
</p>
</a></div>
</div>
You can insert the number of images that you need but I usually stick with 4 or 5.
Don't forget to download the CSS File from the link above. You will need 'anythingslider.css'!!!
Hope this helps!
At a website I am displaying images in 5x 5 grid, using . On the last picture, custom parts, I wish to display a rotating images. This panelGallery js script works fine on all screen sizes apart from 15" screen, when testing, where the whole of the 15" screen is gets occupied by magnified version of the small rotating images, covering all the images behind.
Any help to solve this pestering problem would be much welcome.
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="jquery.panelgallery-1_1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#container').panelGallery();
});
</script>
<script>
if( self == top ) {
document.documentElement.style.display = 'block' ;
} else {
top.location = self.location ;
}
</script>
</head>
<div class="PZ3zoom PZ3-r Bdr Cap Lnk" style="width:130px; height:104px;"><a href="http://www.hpcgears.com/n/products/16.custom_products/custom_parts.php" onclick="return true">
<div id="container">
<img alt="" src="1.images/images_special/plastic1.jpg" name="tb" width="130" height="104"/>
<img alt="" src="1.images/images_special/gear.jpg" name="tb" width="130" height="104"/>
<img alt="" src="1.images/images_special/gear2.jpg" name="tb" width="130" height="104"/>
<img alt="" src="1.images/images_special/custom1.gif" name="tb" width="130" height="104" />
<img alt="" src="1.images/images_special/double_gears.jpg" name="tb" width="130" height="104"/>
<img alt="" src="1.images/images_special/gearbox.jpg" name="tb" width="130" height="104"/>
<img alt="" src="1.images/images_special/gearbox3.jpg" name="tb" width="130" height="104"/>
<img alt="" src="1.images/images_special/custom2.gif" name="tb" width="130" height="104" />
<img alt="" src="1.images/images_special/gearbox2.jpg" name="tb" width="130" height="104"/>
<img alt="" src="1.images/images_special/gear3.jpg" name="tb" width="130" height="104"/></div>
<span class="PZ3inr"> <em><span style="color:#ccf; background:inherit;">Custom parts</span></em></span></span></a>
Custom Parts
A live example would help provide a better example.
however, here's my fix - not knowing all the moving parts(css, the js library you are using, etc..). So I suggest making a CSS class and creating a fixed max width to prevent it from displaying huge at 15 inches wide.
Try a media over-ride on the container
<div class="container">...</div>
a CSS solution
#media screen and (max-width: 1800px) {
.container { width:1800; }
}
or you just just set a max-width on that div
.container { max-width:1800px; }
Now instead of 1800px use whatever screen width the images displayed correctly at.
I have an ajax web application, where every 10 seconds I request content from the server. The server sends back HTML with links to images. Right now, I set the innerHTML of a div tag to the HTML returned from the server, which dynamically updates the web page with out reloading the whole page.
HOWEVER, the problem is, the images load separately after setting the innerHTML causing the application to look funky and slow.
How can I have all my images ready and then swap the innerHTML when I have all the resources?
Add an attribute(or data attribute) to the DOM of the images, then with jQuery listen for the "loaded" event change the attribute loaded to be true. Then verify if still images in the queue, if not execute a callback for the complete process.
Markup:
<img src="img/1.png" class="imgToLoad" loaded="false" />
<img src="img/2.png" class="imgToLoad" loaded="false" />
<img src="img/3.png" class="imgToLoad" loaded="false" />
<img src="img/4.png" class="imgToLoad" loaded="false" />
Pseudocode:
function allImagesLoaded(){
$('#yourmaindiv').show();
console.log('images loaded!');
}
$('img.imgToLoad').load(function(){
$(this).attr('loaded', 'true');
if( $('img.imgToLoad[loaded=false]').length === 0 ){
allImagesLoaded();
}
});
For your images :
JavaScript
$(function () {
preload();
function preload() {
var imageObj = new Image(),
images = [];
images[0] = 'img/1.png';
images[1] = 'img/2.png';
images[2] = 'img/3.png';
images[3] = 'img/4.png';
images[4] = 'img/5.png';
for (var i = 0; i < images.length; i++) {
imageObj.src = images[i];
}
}
});
HTML
<body>
....
<!--[if IE]>
<div id="preload">
<img src="img/1.png" width="1" height="1" alt="" />
<img src="img/2.png" width="1" height="1" alt="" />
<img src="img/3.png" width="1" height="1" alt="" />
<img src="img/4.png" width="1" height="1" alt="" />
<img src="img/5.png" width="1" height="1" alt="" />
</div>
<![endif]-->
</body>
CSS for IE
#preload {
position: absolute;
overflow: hidden;
left: -9999px;
top: -9999px;
height: 1px;
width: 1px;
}
I am creating a small application where there are multiple images displayed and when user clicks on any one of the images it gets bigger and replaces the image that is in middle.
But I am not getting the clicked image.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="text/javascript">
function swapImage(this.id) {
document.write("In SwapImage");
switch (this.id) {
case img2:
IMG1.src = "component1/images/image1.jpg"
intImage = 2
return(false);
case img3:
IMG1.src = "component1/images/image1.jpg"
intImage = 2
return(false);
case img4:
IMG1.src = "component1/images/image1.jpg"
intImage = 2
return(false);
}
}
</SCRIPT>
</HEAD>
<BODY>
<IMG id="IMG1" name="IMG1" src="image1.jpg" height="100px" width="100px">
<IMG id="IMG2" name="IMG2" height="40px" width="40px" src="image1.jpg" onclick="swapImage(this.id);">
<IMG id="IMG3" name="IMG3" height="40px" width="40px" src="image2.jpg" onclick="swapImage();">
<a href="#">
<IMG id="IMG4" name="IMG4" height="40px" width="40px" src="image1.jpg" onclick="swapImage();">
</a>
</BODY>
</HTML>
How about this?
<HTML>
<HEAD>
<SCRIPT LANGUAGE="javascript">
function swapImage(src) {
document.getElementById("IMG1").src = src;
}
</SCRIPT>
</HEAD>
<BODY>
<IMG id="IMG1" src="image1.jpg" height="100px" width="100px">
<IMG id="IMG2" height="40px" width="40px" src="image1.jpg" onclick="swapImage(this.src);">
<IMG id="IMG3" height="40px" width="40px" src="image2.jpg" onclick="swapImage(this.src);">
<IMG id="IMG4" height="40px" width="40px" src="image1.jpg" onclick="swapImage(this.src);">
</BODY>
</HTML>
There are some errors in your code, for example:
The document.write should not be used like this
You are doing switch/case on non existing variables (img2, img3, img4)
JavaScript is case sensitive. IMG4 does not equal img4
return is a statement. If you want to return false, you write return false;
Each statement should end with a semicolon.
HTML tag names should be written in lowercase
this.id is used incorrectly in the swapImage function (shouldn't be there at all)..
..but it is correct when used in IMG2..
..but is incorrect in IMG3 and IMG4
The img tag should not have a "name" attribute
Hope this helps.
img3 and img4 are missing the this.id reference, so the method doesn't know about the image being clicked... is that what you were asking about?
To add to Fabian's answer, in your function your parameter should be id, not this.id, and your switch statement should do the same, like so:
function swapImage(id) {
switch (id) {
// case statements
}
}
I suppose the question is: "Why does this script fail?".
There are several issues with your script:
document.write() is not supposed to be used for logging. It can easily corrupt your page.
You don't set the IMG1 variable. You probably wont something like var IMG1 = document.getElementById("IMG1"); at the start of your script.
The cases in the switch statement have to be string literals. Instead of case img3: you have to write case "img3":
Is this what you were trying to do (untested)?
<html>
<head>
<script type="text/javascript">
var swapImage = function() {
var IMG1=document.getElementById("img1");
return function(){
switch (this.id) {
case "img2":
IMG1.src = "component1/images/image2.jpg";
intImage = 2;
break;
case "img3":
IMG1.src = "component1/images/image3.jpg";
intImage = 2;
break;
case "img4":
IMG1.src = "component1/images/image4.jpg";
intImage = 2;
break;
default:
break;
}
return false;
}
};
</script>
</head>
<body>
<IMG id="img1" height="100px" width="100px" src="image1.jpg">
<IMG id="img2" height="40px" width="40px" src="image2.jpg" onclick="swapImage();">
<IMG id="img3" height="40px" width="40px" src="image3.jpg" onclick="swapImage();">
<IMG id="img4" height="40px" width="40px" src="image4.jpg" onclick="swapImage();">
</body>
</html>
Please note that is not a good way to do this.
what about this.
<style>
ul li{
float: left;
margin:10px;
list-style: none;
}
</style>
<div><img src="http://placehold.it/300x200" alt="" id="zoomImg" height="200" width="300" /></div>
<ul>
<li><img src="http://placehold.it/100x100&text=First" alt="img1" onclick="swapImage(this.src)"></li>
<li><img src="http://placehold.it/100x100&text=Second" alt="img2" onclick="swapImage(this.src)"></li>
<li><img src="http://placehold.it/100x100&text=Third" alt="img3" onclick="swapImage(this.src)"></li>
</ul>
<script type="text/javascript">
function swapImage(src){
var zoomImg = document.getElementById('zoomImg');
zoomImg.src = src;
}
</script>