im trying to build a gallery that loads a div with images when a button i clicked.
the problem is that when i have 2 buttons only the last images are clickable, a little hard to explain but you can try it out on my page: http://www.bravitus.com/#gallery
is it wrong having two javascrips like that
script1:
<script type="text/javascript">
$(document).ready(function(){
$(".slidingpriv").hide();
$(".show_priv").show();
$('.show_priv').click(function(){
$(".slidingpriv").slideToggle();
});
});
script2:
<script type="text/javascript">
$(document).ready(function(){
$(".slidinggf").hide();
$(".show_gf").show();
$('.show_gf').click(function(){
$(".slidinggf").slideToggle();
});
});
html:
<div class="row">
<div class="container">
<!---section--->
<div class="center">
Private projects
</div>
<div class="slidingpriv">
<a href="pages/inasecond/inasecond.html"><div id="imgstyle" class="image">
<img href="" src="img/inasecond.jpg" width="300" height="300" alt=""/></a>
</div>
<a href="pages/2012/2012.html"><div id="imgstyle" class="image">
<img src="img/2012.jpg" width="300" height="300" alt=""/> </div></a>
<a href="pages/greenlights/greenlights.html"><div id="imgstyle" class="image">
<img src="img/Cover-text.jpg" width="300" height="300" alt=""/> </div> </a>
</div>
<!---section--->
<div class="center">
Grundforløb
</div>
<div class="slidinggf">
<a href="pages/inasecond/inasecond.html"><div id="imgstyle" class="image">
<img href="" src="img/inasecond.jpg" width="300" height="300" alt=""/></a>
</div>
<a href="pages/2012/2012.html"><div id="imgstyle" class="image">
<img src="img/2012.jpg" width="300" height="300" alt=""/> </div></a>
<a href="pages/greenlights/greenlights.html"><div id="imgstyle" class="image">
<img src="img/Cover-text.jpg" width="300" height="300" alt=""/> </div> </a>
</div>
css:
.center{
position:relative;
width:100%;
height:100%;
margin:0 auto;
text-align:center;
/*background-color:#0C3;*/
}
.show_priv {
display:none;
position:relative;
height:100%;
/*background-color: #99CCFF;*/
}
.slidinggf {
height:100%;
/**background-color: #99CCFF;**/
width:100%;
position:relative;
}
.show_gf {
display:none;
position:relative;
height:100%;
/*background-color: #99CCFF;*/
}
.slidingpriv {
height:100%;
/**background-color: #99CCFF;**/
width:100%;
position:relative;
}
Thanks ;)
You should look at using your browser developer tools which has some very easy to use tools for debugging, such as the inspect element.
https://developer.chrome.com/devtools
https://developer.mozilla.org/en-US/docs/Tools
With this you can find what may be blocking your ability to click on some elements, even if you're sure they should work.
Also try to combine scripts into the same document ($(document).ready(function(){});)
Related
So I have my codes here and what I want to do is center it but can't figure out how.
<img src="http://apearlibrary.weebly.com/uploads/8/5/2/5/85251306/ytube.png">
<img src="http://apearlibrary.weebly.com/uploads/8/5/2/5/85251306/fbook.png">
<img src="http://apearlibrary.weebly.com/uploads/8/5/2/5/85251306/linkin.png">
Here is what my code is JS fiddle looks like as is...
https://jsfiddle.net/4fc07vL7/
Maybe you want to something like this :
<div style="text-align:center">
<img src="http://apearlibrary.weebly.com/uploads/8/5/2/5/85251306/ytube.png">
<img src="http://apearlibrary.weebly.com/uploads/8/5/2/5/85251306/fbook.png">
<img src="http://apearlibrary.weebly.com/uploads/8/5/2/5/85251306/linkin.png">
</div>
Try this
.container{
position:relative;
float:left;
-ms-transform:translateX(-50%);
-webkit-transform:translateX(-50%);
-moz-transform:translateX(-50%);
transform:translateX(-50%);
left:50%;
}
<div class="container">
<img src="http://apearlibrary.weebly.com/uploads/8/5/2/5/85251306/ytube.png">
<img src="http://apearlibrary.weebly.com/uploads/8/5/2/5/85251306/fbook.png">
<img src="http://apearlibrary.weebly.com/uploads/8/5/2/5/85251306/linkin.png">
</div>
The align attribute is not supported in HTML5. So, Use CSS instead.
CSS syntax: <div style="text-align:center">
So, you can do this.
<div id="links" style="text-align:center">
<img src="http://apearlibrary.weebly.com/uploads/8/5/2/5/85251306/twitter.png">
<img src="http://apearlibrary.weebly.com/uploads/8/5/2/5/85251306/ytube.png">
<img src="http://apearlibrary.weebly.com/uploads/8/5/2/5/85251306/fbook.png">
<img src="http://apearlibrary.weebly.com/uploads/8/5/2/5/85251306/linkin.png">
</div>
I have a hidden div (by using max-height and transition) that show up when I click a button. This div contains several images that load up when you first load the site. I would like them to load when I click the button to show the div, to make the site lighter.
<!DOCTYPE html>
<html>
<head>
<style>
.class1 {
max-height:0px;
transition:max-height 1s;
overflow:hidden;
}
</style>
<script>
function show() {
document.getElementById('id1').style.maxHeight = "200px";
}
</script>
</head>
<body>
<button onclick="show()">Show Images</button>
<hr>
<div id="id1" class="class1">
<img src="img1.jpg" alt="">
<img src="img2.jpg" alt="">
<img src="img3.jpg" alt="">
<img src="img4.jpg" alt="">
</div>
<hr>
</body>
</html>
I would suggest using an attribute on the img tags to store the intended src attribute, then apply it on the button click. This would avoid having to maintain a list of src urls in your JavaScript.
function show() {
document.getElementById('id1').style.maxHeight = "200px";
var images = document.querySelectorAll("#id1 img");
for(var i = 0; i < images.length; i++)
{
images[i].src = images[i].getAttribute('data-src');
}
}
.class1 {
max-height:0px;
transition:max-height 1s;
overflow:hidden;
}
<button onclick="show()">Show Images</button>
<hr>
<div id="id1" class="class1">
<img data-src="https://picsum.photos/400/200" alt="">
<img data-src="https://picsum.photos/400/200" alt="">
<img data-src="https://picsum.photos/400/200" alt="">
<img data-src="https://picsum.photos/400/200" alt="">
</div>
<hr>
Here's the working fiddle https://jsfiddle.net/6ve7ub79/
You can do it easily using jQuery
jQuery
$(document).ready(function(){
$('button').bind('click', function(){
$('.i1').attr('src', 'img1.jpg');
$('.i2').attr('src', 'img2.jpg');
$('.i3').attr('src', 'img3.jpg');
$('.i4').attr('src', 'img4.jpg');
});
});
HTML
<button onclick="show()">Show Images</button>
<hr>
<div id="id1" class="class1">
<img class="i1" src="" alt="">
<img class="i2" src="" alt="">
<img class="i3" src="" alt="">
<img class="i4" src="" alt="">
</div>
<hr>
CSS
.class1 {
transition:max-height 1s;
}
try this code
<!DOCTYPE html>
<html>
<head>
<style>
.class1 {
max-height:0px;
transition:max-height 1s;
overflow:hidden;
}
</style>
<script>
function show() {
document.getElementById('id1').innerHTML= '<img src="img1.jpg" alt=""><img src="img2.jpg" alt=""><img src="img3.jpg" alt=""><img src="img4.jpg" alt="">';
document.getElementById('id1').style.maxHeight = "200px";
}
</script>
</head>
<body>
<button onclick="show()">Show Images</button>
<hr>
<div id="id1" class="class1">
</div>
<hr>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.class1 {
max-height:0px;
transition:max-height 1s;
overflow:hidden;
}
</style>
<script>
function show() {
document.getElementById('id1').style.maxHeight = "200px";
}
</script>
</head>
<body>
<button onclick="show()">Show Images</button>
<hr>
<div id="id1" class="class1">
<img src="img1.jpg" alt="">
<img src="img2.jpg" alt="">
<img src="img3.jpg" alt="">
<img src="img4.jpg" alt="">
</div>
<hr>
</body>
</html>
I'm working on a website, http://atlantaartmap.com, which uses leaflet/mapbox to plot street art around Atlanta. The image details are read from a geojson file. While leaflet is reading the geojson, I append thumbnails to a nav bar at the bottom that also link to the corresponding map marker. Appending the images instead of hard coding them allows me to update a single file to change all aspects of the page.
I am attempting to use lazy load on these images, but it doesn't seem to work with items that are appended using java script. Any tips?
Here is the lazy version of the page I am testing: http://atlantaartmap.com/lazy.html
Here is the normal version of the site: http://atlantaartmap.com
Thanks in advance.
edit: For clarification, I would like the lazy loading script to avoid loading images until they are within the window.
I would just throw out the plugin and do that yourself, it's actually very simple to do. You create one image element with your loading image as source, append that as a child to your a (link) element:
var image = new Image();
image.src = 'images/loading.gif';
link.appendChild(image);
Next up you create another image element with your actual image as a source, but you don't need to append it to anything. Just listen for the onload event to fire, then swap the sources:
var original = new Image();
original.src = feature.properties.image;
original.onload = function () {
image.src = original.src;
}
That should work like a charm. Now you can leave out jQuery and the plugin so that's two dependency assets less to load, so your page is loading faster also. Win/win situation if you ask me ;)
Here's a example of the concept on JSFiddle: http://jsfiddle.net/waud32ta/
I really would suggest that you try lazySizes. Different to other lazyloaders it is a self-initializing script, which automatically detects new elements and their visibility. So you don't need to call or configure anything here. Simply append an image with the class lazyload and add your source to the data-src attribute. That's it:
<img src="spinner.gif" data-src="image.jpg" class="lazyload" />
Here is a simple demo.
window.lazySizesConfig = window.lazySizesConfig || {};
window.lazySizesConfig.expand = 40;
window.lazySizesConfig.addClasses = true;
document.querySelector('.add').onclick = function(){
document.querySelector('.scroll-doc').innerHTML = document.querySelector('.template').innerHTML;
};
.scroll-area {
overflow-x: auto;
overflow-y: hidden;
position: relative;
width: 80%;
margin: auto;
padding: 2px 2px 10px;
}
.scroll-doc {
display: table;
position: relative;
text-align: left;
}
.scroll-item {
display: table-cell;
vertical-align: middle;
padding: 10px;
}
.intrinsic {
position: relative;
padding-bottom: 75%;
height: 0px;
}
.lazyload,
.lazyloading {
opacity: 0;
}
.lazyloaded {
opacity: 1;
transition: opacity 300ms;
}
.add {
font-size: large;
font-weight: bold;
}
<script src="http://afarkas.github.io/lazysizes/lazysizes.min.js"></script>
<button type="button" class="add">add to scroll area</button>
<div class="scroll-area">
<div class="scroll-doc"></div>
</div>
<script type="text/html" class="template">
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/animals/1"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/animals/2"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/animals/3"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/animals/4"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/animals/5"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/animals/6"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/animals/7"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/animals/8"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/animals/9"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/food/1"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/food/2"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/food/3"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/food/4"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/food/5"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/food/6"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/food/7"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/food/8"
alt="" />
</div>
</div>
<div class="scroll-item">
<div class="intrinsic">
<img
class="lazyload"
data-src="http://lorempixel.com/400/300/food/9"
alt="" />
</div>
</div>
</script>
Try calling
$("img.navthumb").lazyload();
after the thumbnail code has been dynamically injected using JavaScript method appendChild().
Also, i would be able to help you better if you post a JSFiddle.
Hope it helps!!!
Okay, so far you have highlighted that jQuery should be avoided. But I think it's possible to use micro-plugins which contains only the logic you really need. One of them is justlazy. It's a lazy loading library which has no external dependencies and provides compact image loading code.
First, you have to define your placeholders:
<span data-src="path/to/image" data-alt="some alt text"
data-title="some title"
class="justlazy-placeholder">
</span>
It's also possible to define the placeholder as img-tag to be more SEO friendly. One other feature is the loading of responsive images with srcset attribute.
The second step is to initialize the lazy loading via javascript:
Justlazy.registerLazyLoadByClass("justlazy-placeholder"{
// defines that the image will be loaded
// 200 pixels before it gets visible
threshold: 200
});
I am working on magnific-popup gallery and trying to achieve gallery design as show in image below
So far i managed to make it look like as it is show in image. But it always show image from the first image irrespective of which mage we click in the image gallery.
here is the codepen example http://codepen.io/anon/pen/LvFxH
I am not sure how to fix it so that it can start the sequence from image user click on and also hide left or right arrow it is first or last image in the galler
CODE
<div id="gallery1" class="mfp-hide">
<div class="slide">
<div class="imgg"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Anthochaera_chrysoptera.jpg/800px-Anthochaera_chrysoptera.jpg" /> </div>
<div class="detailss">
<span class="d-title">This is the caption of the image along with some other information</span>
<span class="d-hr">Download</span>
<span class="d-date">01-01-2014</span>
</div>
</div>
<div class="slide">
<div class="imgg"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Water_Dolphin.jpg/800px-Water_Dolphin.jpg" /> </div>
<div class="detailss">
<span class="d-title">This is image two</span>
<span class="d-hr">Download</span>
<span class="d-date">02-02-2014</span>
</div>
</div>
<div class="slide">
<div class="imgg"><img src="http://i1232.photobucket.com/albums/ff372/Marcin_Gil/magnific%20example/flower1.jpg" /> </div>
<div class="detailss">
<span class="d-title">This is image three</span>
<span class="d-hr">Download</span>
<span class="d-date">03-03-2014</span>
</div>
</div>
</div>
<a href="#gallery1" class="open-gallery-link">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Anthochaera_chrysoptera.jpg/800px-Anthochaera_chrysoptera.jpg" width="172" height="115" />
</a>
<a href="#gallery1" class="open-gallery-link">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Water_Dolphin.jpg/800px-Water_Dolphin.jpg" width="172" height="115" />
</a>
<a href="#gallery1" class="open-gallery-link">
<img src="http://i1232.photobucket.com/albums/ff372/Marcin_Gil/magnific%20example/flower1.jpg" width="172" height="115" />
</a>
You have some incorrect code... this is my code:
Live Demo on JSFiddle
Demo 2 - Next/Prev Button
HTML
<div id='gallery'>
<div class='imgwrapper'>
<img src='http://8pic.ir/images/6s75jpffwom32fhct7q4.jpg' title='' alt=''/>
<span class='date'>15-02-2013</span>
<span class='info'>This is the caption of the image along with some other information</span>
<a href='http://gah-blog.blogspot.com/'>download</a>
</div>
<div class='imgwrapper'>
<img src='http://8pic.ir/images/ypzla17xaqmhjiocih64.jpg' title='' alt=''/>
<span class='date'>10-07-2013</span>
<span class='info'>This is the caption of the image along with some other information</span>
<a href='http://gah-blog.blogspot.com/'>download</a>
</div>
<div class='imgwrapper'>
<img src='http://8pic.ir/images/tuwvju35ajgts0rxzufw.jpg' title='' alt=''/>
<span class='date'>21-10-2013</span>
<span class='info'>This is the caption of the image along with some other information</span>
<a href='http://gah-blog.blogspot.com/'>download</a>
</div>
<div class='imgwrapper'>
<img src='http://8pic.ir/images/usra1shyel8nxudsj8vs.jpg' title='' alt=''/>
<span class='date'>02-02-2014</span>
<span class='info'>This is the caption of the image along with some other information</span>
<a href='http://gah-blog.blogspot.com/'>download</a>
</div>
<div class='imgwrapper'>
<img src='http://8pic.ir/images/vp7wnu7ohpx2i3im6nem.jpg' title='' alt=''/>
<span class='date'>20-05-2014</span>
<span class='info'>This is the caption of the image along with some other information</span>
<a href='http://gah-blog.blogspot.com/'>download</a>
</div>
</div>
<div id="popupbg">
<div id="popup">
<img src='' title='' alt=''/>
<span class='date'></span>
<span class='info'></span>
<a href=''>download</a>
<span class="btn" id="close">Close</span>
</div>
</div>
CSS
#gallery{
position:relative;
width:100%;
background:#e7e7e7;
}
.imgwrapper{
position:relative;
width:150px;
height:150px;
display:inline-block;
}
.imgwrapper img{
width:150px;
height:150px;
}
.imgwrapper span,.imgwrapper a{
display:none;
}
#popupbg{
display:none;
position:fixed;
top:0;
left:0;
height:100%;
width:100%;
background:rgba(0,0,0,0.92);
z-index:1000;
}
#popup{
position:relative;
top:5%;
margin:0 auto;
font-size:17px;
width:70%;
height:65%;
background:#fff;
padding:20px;
border:solid 10px #CCCCCC;
}
#popup img{
position:relative;
display:block;
width:95%;
height:200px;
}
#popup span.date,#popup span.info,#popup span#close{
display:block;
}
jQuery
$(document).ready(function(e) {
$(".imgwrapper").click(function(){
var img=$(' > img', this).attr("src");
var date=$(' > span.date', this).html();
var info=$(' > span.info', this).html();
var a=$(' > a', this).attr("href");
$('#popup img').attr("src",img);
$('#popup span.date').html(date);
$('#popup span.info').html(info);
$('#popup a').attr("href",a);
user_guide()
});
});
function user_guide(){
$("#popupbg").fadeToggle("slow");
}
$(document).ready(function(e) {
$("#close").click(function(){
$("#popupbg").fadeToggle("slow");
});
});
I have a project with thumbnails that when moused over show the full-sized version in a display area div. This is done using jQuery to pull the HTML for the full-sized images from a hidden div and display it in the visible display div.
I currently have Fancybox (ver 2.1.5) configured to work on document load. Each of the hidden full-sized images includes a link that has the fancybox class and a rel group with the same name.
When the display area is clicked on, Fancybox opens the image as desired. However, when the next button is clicked it always goes to the first image (including when it is the first image), and the previous button always goes to the last image (including when it is the last image). Of course my desise would be for it to maintain the order of the images (as the links are ordered in the HTML).
Does anyone have any suggestions how this might work as I am hoping (either with jQuery or Fancybox)?
My thanks in advance to all you brilliant folks out there who generously volunteer your time and expertise!
HTML:
<div class="report_container">
<div class="report_thumbnails_container">
<div class="report_thumbnails">
<img src="images/contents/page1_thumbnail.jpg"/>
<img src="images/contents/page2_thumbnail.jpg"/>
<img src="images/contents/page3_thumbnail.jpg"/>
<img src="images/contents/page4_thumbnail.jpg"/>
<img src="images/contents/page5_thumbnail.jpg"/>
<!--a href"#" page="page6"><img src="images/contents/page6_thumbnail.jpg"/></a-->
<img src="images/contents/page7_thumbnail.jpg"/>
<img src="images/contents/page8_thumbnail.jpg"/>
<img src="images/contents/page9_thumbnail.jpg"/>
<img src="images/contents/page10_thumbnail.jpg"/>
<img src="images/contents/page11_thumbnail.jpg"/>
<img src="images/contents/page12_thumbnail.jpg"/>
<!--a href="#" page="page13"><img src="images/contents/page13_thumbnail.jpg"/></a-->
<img src="images/contents/page14_thumbnail.jpg"/>
<img src="images/contents/page15_thumbnail.jpg"/>
<img src="images/contents/page16_thumbnail.jpg"/>
<img src="images/contents/page17_thumbnail.jpg"/>
</div>
</div>
<div class="report_page_container">
<div class="page_contents"></div>
</div>
<div class="clear_both"></div>
</div>
<div class="page_container_contents">
<div class="page_contents" id="page1">
<a class="fancybox" rel="group" href="images/contents/page1_preview.jpg"><img src="images/contents/page1_display.jpg" width="900" height="1150" /></a>
</div>
<div class="page_contents" id="page2">
<a class="fancybox" rel="group" href="images/contents/page2_preview.jpg"><img src="images/contents/page2_display.jpg" width="900" height="1098" /></a>
</div>
<div class="page_contents" id="page3">
<a class="fancybox" rel="group" href="images/contents/page3_preview.jpg"><img src="images/contents/page3_display.jpg" width="900" height="1207" /></a>
</div>
<div class="page_contents" id="page4">
<a class="fancybox" rel="group" href="images/contents/page4_preview.jpg"><img src="images/contents/page4_display.jpg" width="900" height="1091"/></a>
</div>
<div class="page_contents" id="page5">
<a class="fancybox" rel="group" href="images/contents/page5_preview.jpg"><img src="images/contents/page5_display.jpg" width="900" height="1102"/></a>
</div>
<!--div class="page_contents" id="page6">
<a class="fancybox" rel="group" href="images/contents/page6_preview.jpg"><img src="images/contents/page6_display.jpg" width="900" height=""/></a>
</div-->
<div class="page_contents" id="page7">
<a class="fancybox" rel="group" href="images/contents/page7_preview.jpg"><img src="images/contents/page7_display.jpg" width="900" height="1154"/></a>
</div>
<div class="page_contents" id="page8">
<a class="fancybox" rel="group" href="images/contents/page8_preview.jpg"><img src="images/contents/page8_display.jpg" width="900" height="1145"/></a>
</div>
<div class="page_contents" id="page9">
<a class="fancybox" rel="group" href="images/contents/page9_preview.jpg"><img src="images/contents/page9_display.jpg" width="900" height="1159"/></a>
</div>
<div class="page_contents" id="page10">
<a class="fancybox" rel="group" href="images/contents/page10_preview.jpg"><img src="images/contents/page10_display.jpg" width="900" height="1141"/></a>
</div>
<div class="page_contents" id="page11">
<a class="fancybox" rel="group" href="images/contents/page11_preview.jpg"><img src="images/contents/page11_display.jpg" width="900" height="1138"/></a>
</div>
<div class="page_contents" id="page12">
<a class="fancybox" rel="group" href="images/contents/page12_preview.jpg"><img src="images/contents/page12_display.jpg" width="900" height="1162"/></a>
</div>
<!--div class="page_contents" id="page13">
<a class="fancybox" rel="group" href="images/contents/page13_preview.jpg"><img src="images/contents/page13_display.jpg" width="900" height=""/></a>
</div-->
<div class="page_contents" id="page14">
<a class="fancybox" rel="group" href="images/contents/page14_preview.jpg"><img src="images/contents/page14_display.jpg" width="900" height="1110"/></a>
</div>
<div class="page_contents" id="page15">
<a class="fancybox" rel="group" href="images/contents/page15_preview.jpg"><img src="images/contents/page15_display.jpg" width="900" height="1101"/></a>
</div>
<div class="page_contents" id="page16">
<a class="fancybox" rel="group" href="images/contents/page16_preview.jpg"><img src="images/contents/page16_display.jpg" width="900" height="1152"/></a>
</div>
<div class="page_contents" id="page17">
<a class="fancybox" rel="group" href="images/contents/page17_preview.jpg"><img src="images/contents/page17_display.jpg" width="900" height="1154"/></a>
</div>
<!--div class="page_contents" id="page18">
<a class="fancybox" rel="group" href="images/contents/page18_preview.jpg"><img src="images/contents/page18_display.jpg" width="900" height=""/></a>
</div-->
</div>
Code:
$(document).ready(function() {
$(".fancybox").fancybox();
var page = '.page_contents#page1';
var htmlCode = $(page).html();
$('.report_page_container .page_contents').html(htmlCode);
var notClicked = true;
$('.report_thumbnails a').mouseover(function(){
if (notClicked) {
var page = '.page_contents#' + $(this).attr('page');
var htmlCode = $(page).html();
$('.report_page_container').fadeOut(0, function(){
$('.report_page_container .page_contents').html(htmlCode);
$('.report_page_container').fadeIn(0);
});
}
});
$('.report_thumbnails a').click(function(e){
// Disables standard link behavior
e.preventDefault();
if (!$(this).hasClass('selected')) {
$('.report_thumbnails a').removeClass('selected');
$('.report_thumbnails a').children().css('opacity', '1');
$(this).addClass('selected');
$(this).children().css('opacity', '.5');
notClicked = false;
} else {
$(this).removeClass('selected');
$('.report_thumbnails a').removeClass('selected');
$('.report_thumbnails a').children().css('opacity', '1');
notClicked = true;
}
var page = '.page_contents#' + $(this).attr('page');
var htmlCode = $(page).html();
$('.report_page_container').fadeOut(0, function(){
$('.report_page_container .page_contents').html(htmlCode);
$('.report_page_container').fadeIn(0);
});
});
});