I have a page layout that looks like this....basically a page title, a set of thumbnails down the left arranged in two columns, and a third column which contains the big version of the thumbnail.
My issue is that I have quite a gap between the top of the big image and the top of the page (because the page title is a simple paragraph marker). I can fix this by bringing the title into the top of the first column, but then I end up with this.
What I want is this. I could add a small piece of text in to the right of the title, but my background colour is not uniform and so it will stand out. Plus, it's not a very elegant solution. I could do it with tables and span the title across two cells, but I don't want to use tables.
Any and all great ideas appreciated. Thanks.
EDIT - added code snippets - this is what I currently have, and equates to the first picture I posted.
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
slides[slideIndex-1].classList.add("stickyimage");
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
.bgimg {
background-image:url('Images/Draw/inkcircle_10pc_opacity.jpg')
}
.image7column {
float: left;
width: 14.28%;
padding-right: 5px;
}
.bigcolumn {
display: block;
float: left;
width: 71%;
height: 1400px;
}
.mySlides {
display: none;
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script src="Image_handler.js"></script>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="smallcss.css">
<title>Images</title>
</head>
<body class="bgimg" onload="showSlides(1)";>
<p> Images </p>
<div class="image7column">
<img src="Images/Draw/im1.jpg" style="width:100%;height:180px" alt="Image1">
<img src="Images/Draw/im2.jpg" style="width:100%;height:180px" alt="Image2">
</div>
<div class="image7column">
<img src="Images/Draw/im3.jpg" style="width:100%;height:180px" alt="Image3">
<img src="Images/Draw/im4.jpg" style="width:100%;height:180px" alt="Image4">
</div>
<!-- Big column stuff in here -->
<div class="bigcolumn">
<div class="mySlides">
<img src="Images/Draw/im1.jpg" style="width:300px;height:300px" alt="big image 1">
</div>
<div class="mySlides">
<img src="Images/Draw/im2.jpg" style="width:300px;height:300px" alt="big image 2">
</div>
<div class="mySlides">
<img src="Images/Draw/im3.jpg" style="width:300px;height:300px" alt="big image 3">
</div>
<div class="mySlides">
<img src="Images/Draw/im4.jpg" style="width:300px;height:300px" alt="big image 4">
</div>
</div> <!-- End of bigcolumn -->
</body>
</html>
If you want some help can you provide your html and CSS. I can take a look, but I will not do all your code.
But If i understand your issue you should do a thing like this :
For your issue you should create 1 main column that contains the 2 other columns and have a thing like this.
<div id ="main-column">
<h1>Title</h1>
<div id="column-container">
<div id="column1">
Column 1
</div>
<div id="column2">
Column 2
</div>
</div>
</div>
With the H1 taking all the width of the main-column, and for the column-container you can use flex, or for the 2 colums use the css property width : 50%, if your main-column width is defined
Related
I have been trying to rotate a circle with the items inside of it using a button, when I change the rotate value of the circle directly in css it works fine but there appears to be a problem in the html code.
html code:
<html>
<head>
<title>web desgin test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main">
<nav>
<div class="logo">
<img
src="C:/Users/USER/Downloads/RealPhone_WebPage_Images/images/logo.png"
alt="">
</div>
<div class="links">
<ul>
<li>Home</li>
<li>Phone</li>
<li>Accessories</li>
<li>Cart</li>
</ul>
</div>
</nav>
<div class="information">
<img
src="C:/Users/USER/Downloads/RealPhone_WebPage_Images/images/mobile.png"
class="mobile">
<div id="circle">
<div class="feature one">
<img
src="C:/Users/USER/Downloads/RealPhone_WebPage_Images/images/camera.png"
alt="">
<div>
<h1>Camera</h1>
<p>108MP Main camera</p>
</div>
</div>
<div class="feature two">
<img src="C:/Users/USER/Downloads/RealPhone_WebPage_Images/images/processor.png" alt="">
<div>
<h1>processor</h1>
<p>Exynos 990</p>
</div>
</div>
<div class="feature three">
<img src="C:/Users/USER/Downloads/RealPhone_WebPage_Images/images/display.png" alt="">
<div>
<h1>Display</h1>
<p>6.9 inch, 1440px</p>
</div>
</div>
<div class="feature four">
<img src="C:/Users/USER/Downloads/RealPhone_WebPage_Images/images/battery.png" alt="">
<div>
<h1>Battery</h1>
<p>4500 mA</p>
</div>
</div>
</div>
</div>
<div class="controls">
<img src="C:/Users/USER/Downloads/RealPhone_WebPage_Images/images/arrow.png" id="upBtn">
<h3>Features</h3>
<img src="C:/Users/USER/Downloads/RealPhone_WebPage_Images/images/arrow.png" id="downBtn">
</div>
</div>
<script>
var circle = document.getElementById('circle');
var upBtn = document.getElementById('upBtn');
var downBtn = document.getElementById('downBtn');
var rotateValue = circle.style.transform();
var rotateSum;
upBtn.onclick = function() {
rotateSum = rotateValue + "rotate(-90deg)";
circle.style.transform = rotateSum;
rotateValue = rotateSum;
}
</script>
css code:
enter code here
#circle {
width: 1000px;
height: 1000px;
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
transform: rotate(0deg);
.controls {
position: absolute;
right: 10%;
top: 50%;`enter code here`
transform: translateY(-50%);
text-align: center;
}
.controls h3 {
margin: 15px 0;
color: #fff;
}
#upBtn {
width: 15px;
cursor: pointer;
}
#downBtn {
width: 15px;
cursor: pointer;
transform: rotate(180deg);
}
................................................................................
Your variable declarations are wrong if for example the id is #circle
document.getElementById(circle); --> document.getElementById('circle');
It is better when you post all html according to this function
There is no circle in your html code...
So when you do this :
var circle = document.getElementById(circle);
var circle is null, because there is not a html element where its id is circle, and you are trying to take one called like that
Also, when you do this:
document.getElementById(circle);
is going to look for a string in every id, so it should be :
document.getElementById('circle');
edit:
for been clear, when you use selector, you are looking for a matching string, when you do this:
var circle = document.getElementById(circle);
var upBtn = document.getElementById(upBtn);
var downBtn = document.getElementById(downBtn);
It should be this:
var circle = document.getElementById('circle');
var upBtn = document.getElementById('upBtn');
var downBtn = document.getElementById('downBtn');
In the firt one you are sayin look for a string with the value os circle
var circle = 'notCircle'
var circle = document.getElementById(circle);
console.log(circle)
In the second you are looking direclty for x string on html ids
I have a simple webpage with "site map" on bottom that won't be implemented for weeks or months and am developing the rest as I go.
So, "Site Map" needs to be a link (I presume) with "href=" (?) where I can add a link later? Upon hover, I need text saying "coming soon" to show up, along with an image on both sides, i.e.
(before hover)
Site Map
(after hover)
Site Map Coming Soon
There should be a little space between the pic and text that pops up.
#my_map:hover:after {
margin-left: 20px;
color: green;
content: "(Coming Soon)";
}
<h1>Before and After Tag Example</h1>
<p id="my_map">Site Map</p>
<p>Go back to Main Menu</p>
<span> <img src="lightening_bolt" alt="bolt" height="20" width="20";> coming soon <img src="lightening_bolt" alt="bolt" height="20" width="20";> </span>
<p style "margin-top: 50px;">Hover over Site Map... </p>
Above isn't allowing for an image, just content= some text, and all the searching I've done to find some code ideas seem to be with other objectives...
You can add an image to the content of an :after pseudo element by using the url() attribute. If you want text as well as an image, you need to string these together without a space. If you want space between the image and the text, just be sure to include the spaces withing your text string. The snippet below shows an image placed before and after the string.
Note: the images take a second or two to load.
var myMap = document.getElementById("my_map2");
var comingSooon = document.getElementById("my_map2");
//
myMap.addEventListener("mouseover", function() {
cs.innerHTML = "<img src='https://picsum.photos/200' height='15' width='40' /> (Coming Soon) <img src='https://picsum.photos/200' height='15' width='40' />";
}, false);
//
myMap.addEventListener("mouseout", function() {
cs.innerHTML = "";
}, false);
#my_map:hover:after {
margin-left: 20px;
font-size: 20px;
color: green;
content: url("https://picsum.photos/20")" (Coming Soon) "url("https://picsum.photos/20");
}
<p id="my_map">Site Map</p>
<p>Site Map 2 <span id="cs"></span></p>
You could also just have the image already there and hide it until the anchor is hovered over:
#map-link {
display: inline-block;
}
#hidden-message {
display: none;
transition: display 1s linear;
}
#map-link:hover+#hidden-message {
display: block;
}
#cmg-soon-img {
margin: 0;
padding: 0;
height: 100px;
width: 100px;
}
<div id="my_map">
<p id="map-link">Site Map</p>
<div id="hidden-message">
<img id="cmg-soon-img" src="https://picsum.photos/20">
<p>
"Coming soon..."
</p>
</div>
</div>
Which would allow you to control the width and height of the image shown.
<!-- Here's what I got (hope answer my own question doesn't close thread...-->
<!DOCTYPE html>
<html>
<head>
<style>
#my_map {
margin-right: 30px;
font-size: 35px;
text-decoration: none;
}
</style>
</head>
<body>
<p>Site Map <span id="cs"></span></p>
<script>
var myMap = document.getElementById("my_map");
var comingSooon = document.getElementById("my_map");
myMap.addEventListener("mouseover", function() {cs.innerHTML = "<img src='https://picsum.photos/20' height='35' width='35' /> (Coming Soon) <img src='https://picsum.photos/20' height='35' width='35' />";}, false);
myMap.addEventListener("mouseout", function() {cs.innerHTML = "";}, false);
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
#soon:hover:after {
margin-left: 20px;
color: green;
content: "Soon";
}
</style>
</head>
<body>
<p id="soon" style="font-size: 25px; margin-left:5%;"> Site Map </p>
<p style="margin-bottom: 150px;"></p>
<!-- take out the image and it's broken... it shows what I'm trying to do... -->
<img src="lightening-bolt.jpg" alt="Lightening bolt"
height="42" width="42">
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "inline") {
x.style.display = "none";
} else {
x.style.display = "inline";
}
}
</script>
<p style="display: inline" onmouseover="myFunction()"
onmouseleave="myFunction()">Click Me
</p>
<div id="myDIV">
<span><img src="lightening-bolt.jpg" alt="Lightening bolt"
height="42" width="42"> Text <img src="399-3991460_face-with-stuck-out-tongue-
eye.jpg" alt="Lightening bolt"
height="42" width="42"> </span>
</div>
</body>
</html>
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 4 years ago.
I have the following element:
<div class="parent">
<div class="col">MyColumn</div>
</div>
I want to style the parent class only if it contains a class with class col
Threw together a fairly legacy compatible JavaScript version:
var parents = document.querySelectorAll('.parent')
for (var i = 0; i < parents.length; i++) {
for (var j = 0; j < parents[i].children.length; j++) {
if (hasClass(parents[i].children[j], 'col')) {
updateCss(parents[i])
}
}
}
function hasClass(element, className) {
return (' ' + element.className + ' ').indexOf(' ' + className+ ' ') > -1;
}
function updateCss (parent) {
// whatever you want to add here...
parent.style.color = 'red';
}
.parent {
margin: 15px;
outline: 1px dotted black;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="parent">
<div class="col">MyColumn</div>
</div>
<div class="parent">
<div class="something-else">not column</div>
<div class="col">MyColumn</div>
</div>
<div class="parent">
<div class="something-else">not column</div>
</div>
<script src="index.js"></script>
</body>
</html>
In JQuery you can use the :has selector, like this:
$('.parent:has(.col)').css(/* your css */);
Below are two options to do it using jQuery:
Option 1
$('.parent').has('.col').addClass('style');
.style {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="col">MyColumn</div>
</div>
Option 2
if ($(".col").parents(".parent").length == 1) {
// add style here
$(".parent").css({'background': "red"});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="col">MyColumn</div>
</div>
this is what I've come up with so far. what I'm trying to do is to spread the div's with class COL in the remaining space after the size specific col's.
it's still not perfect and needs a little tweaking, but a step in the right direction.
var mediaBase = parseFloat(8.33333);
$.each($("div.row"), function (index) {
var gens = 0;
var total = 0;
$.each($(this).find("div[class^='col']"), function (ii) {
if (total > 100) {
$(this).hide();
}
else {
if ($(this).attr("class").indexOf("-") > 0) {
let tmp = $(this).attr("class");
tmp = parseInt(tmp.slice(tmp.lastIndexOf("-") + 1));
total += parseFloat(mediaBase * tmp);
}
else {
gens++;
}
}
});
if (gens > 0 && total < 100) {
let val = (100 - total) / gens;
if (total === 0) {
val = 100 / gens;
}
$(this).find("div.col").css("width", val.toString() + "%");
}
});
I'm trying to make a small web-app using Polymer, based on the Nav + List + Detail-layout example they have provided. For part of my web-app I want to make a photo gallery. Luckily, there's an element for that. Unfortunately, there's no element for that. So I set myself upon the task of making my own custom-element that provides this functionality, based on PhotoSwipe.
So I decided to start simple by just implementing the code they provided as an example (see this CodePen). I simply copied this code into a custom element to see how it works, but unfortunately it doesn't work 100%. Here is the CodePen of the custom element.
For small displays the photo's display correctly, but when the screen is tall the 3rd and 4th photo don't align to the center anymore, but slide to the bottom right corner. The easiest way to see this is by pressing the full screen button when viewing an image. Below is an image where you can clearly see the offset to the bottom-right.
I rechecked and this isn't an issue in their own CodePen, but I can't seem to find if there are overlapping styles or something else is breaking it up. Any ides?
<dom-module id="photo-album">
<link rel="import" type="css" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.0/photoswipe.css"> <!-- photoswipe/photoswipe.css -->
<link rel="import" type="css" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.0/default-skin/default-skin.css"> <!-- photoswipe/default-skin/default-skin.css -->
<template>
<style>
:host {
display: block;
}
.my-gallery {
width: 100%;
float: left;
}
.my-gallery img {
width: 100%;
height: auto;
}
.my-gallery figure {
display: block;
float: left;
margin: 0 5px 5px 0;
width: 150px;
}
.my-gallery figcaption {
display: none;
}
</style>
<iron-ajax url="" params="" handle-as="json" last-response="{{photos}}"></iron-ajax>
<!--<template is="dom-repeat" items="{{photos}}">
<iron-image style="width:400px; height:400px; background-color: lightgray;" sizing="cover" preload fade src="{{item}}"></iron-image>
</template>-->
<div class="my-gallery" id="gallery" itemscope itemtype="http://schema.org/ImageGallery">
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="https://farm3.staticflickr.com/2567/5697107145_a4c2eaa0cd_o.jpg" itemprop="contentUrl" data-size="1024x1024">
<img src="https://farm3.staticflickr.com/2567/5697107145_3c27ff3cd1_m.jpg" itemprop="thumbnail" alt="Image description" />
</a>
</figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="https://farm2.staticflickr.com/1043/5186867718_06b2e9e551_b.jpg" itemprop="contentUrl" data-size="964x1024">
<img src="https://farm2.staticflickr.com/1043/5186867718_06b2e9e551_m.jpg" itemprop="thumbnail" alt="Image description" />
</a>
</figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="https://farm7.staticflickr.com/6175/6176698785_7dee72237e_b.jpg" itemprop="contentUrl" data-size="1024x683">
<img src="https://farm7.staticflickr.com/6175/6176698785_7dee72237e_m.jpg" itemprop="thumbnail" alt="Image description" />
</a>
</figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="https://farm6.staticflickr.com/5023/5578283926_822e5e5791_b.jpg" itemprop="contentUrl" data-size="1024x768">
<img src="https://farm6.staticflickr.com/5023/5578283926_822e5e5791_m.jpg" itemprop="thumbnail" alt="Image description" />
</a>
</figure>
</div>
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<div class="pswp__bg"></div>
<div class="pswp__scroll-wrap">
<div class="pswp__container">
<div class="pswp__item"></div>
<div class="pswp__item"></div>
<div class="pswp__item"></div>
</div>
<div class="pswp__ui pswp__ui--hidden">
<div class="pswp__top-bar">
<div class="pswp__counter"></div>
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
<div class="pswp__preloader">
<div class="pswp__preloader__icn">
<div class="pswp__preloader__cut">
<div class="pswp__preloader__donut"></div>
</div>
</div>
</div>
</div>
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
<div class="pswp__share-tooltip"></div>
</div>
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
<div class="pswp__caption">
<div class="pswp__caption__center"></div>
</div>
</div>
</div>
</div>
</template>
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.0/photoswipe.min.js"></script> <!-- photoswipe/photoswipe.min.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.0/photoswipe-ui-default.min.js"></script> <!-- photoswipe/photoswipe-ui-default.min.js -->
<script>
Polymer({
is: 'photo-album',
properties: {
items: {
type: Array,
notify: true,
}
},
ready: function() {
this.initPhotoSwipeFromDOM();
},
initPhotoSwipeFromDOM: function(){
var gallerySelector = this.$.gallery;
var parseThumbnailElements = function(el) {
var thumbElements = el.childNodes,
numNodes = thumbElements.length,
items = [],
figureEl,
linkEl,
size,
item;
for(var i = 0; i < numNodes; i++) {
figureEl = thumbElements[i]; // <figure> element
// include only element nodes
if(figureEl.nodeType !== 1) {
continue;
}
linkEl = figureEl.children[0]; // <a> element
size = linkEl.getAttribute('data-size').split('x');
// create slide object
item = {
src: linkEl.getAttribute('href'),
w: parseInt(size[0], 10),
h: parseInt(size[1], 10)
};
if(figureEl.children.length > 1) {
// <figcaption> content
item.title = figureEl.children[1].innerHTML;
}
if(linkEl.children.length > 0) {
// <img> thumbnail element, retrieving thumbnail url
item.msrc = linkEl.children[0].getAttribute('src');
}
item.el = figureEl; // save link to element for getThumbBoundsFn
items.push(item);
}
return items;
};
// find nearest parent element
var closest = function closest(el, fn) {
return el && ( fn(el) ? el : closest(el.parentNode, fn) );
};
// triggers when user clicks on thumbnail
var onThumbnailsClick = function(e) {
e = e || window.event;
e.preventDefault ? e.preventDefault() : e.returnValue = false;
var eTarget = e.target || e.srcElement;
// find root element of slide
var clickedListItem = closest(eTarget, function(el) {
return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
});
if(!clickedListItem) {
return;
}
// find index of clicked item by looping through all child nodes
// alternatively, you may define index via data- attribute
var clickedGallery = clickedListItem.parentNode,
childNodes = clickedListItem.parentNode.childNodes,
numChildNodes = childNodes.length,
nodeIndex = 0,
index;
for (var i = 0; i < numChildNodes; i++) {
if(childNodes[i].nodeType !== 1) {
continue;
}
if(childNodes[i] === clickedListItem) {
index = nodeIndex;
break;
}
nodeIndex++;
}
if(index >= 0) {
// open PhotoSwipe if valid index found
openPhotoSwipe( index, clickedGallery );
}
return false;
};
// parse picture index and gallery index from URL (#&pid=1&gid=2)
var photoswipeParseHash = function() {
var hash = window.location.hash.substring(1),
params = {};
if(hash.length < 5) {
return params;
}
var vars = hash.split('&');
for (var i = 0; i < vars.length; i++) {
if(!vars[i]) {
continue;
}
var pair = vars[i].split('=');
if(pair.length < 2) {
continue;
}
params[pair[0]] = pair[1];
}
if(params.gid) {
params.gid = parseInt(params.gid, 10);
}
return params;
};
var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
var pswpElement = document.querySelectorAll('.pswp')[0],
gallery,
options,
items;
items = parseThumbnailElements(galleryElement);
// define options (if needed)
options = {
// define gallery index (for URL)
galleryUID: galleryElement.getAttribute('data-pswp-uid'),
getThumbBoundsFn: function(index) {
// See Options -> getThumbBoundsFn section of documentation for more info
var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
rect = thumbnail.getBoundingClientRect();
return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
}
};
// PhotoSwipe opened from URL
if(fromURL) {
if(options.galleryPIDs) {
// parse real index when custom PIDs are used
// http://photoswipe.com/documentation/faq.html#custom-pid-in-url
for(var j = 0; j < items.length; j++) {
if(items[j].pid == index) {
options.index = j;
break;
}
}
} else {
// in URL indexes start from 1
options.index = parseInt(index, 10) - 1;
}
} else {
options.index = parseInt(index, 10);
}
// exit if index not found
if( isNaN(options.index) ) {
return;
}
options.showAnimationDuration = 0;
options.hideAnimationDuration = 0;
// Pass data to PhotoSwipe and initialize it
gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();
};
// loop through all gallery elements and bind events
var galleryElements = this.$.gallery;
galleryElements.setAttribute('data-pswp-uid', 1);
galleryElements.onclick = onThumbnailsClick;
// Parse URL and open gallery if it contains #&pid=3&gid=1
var hashData = photoswipeParseHash();
if(hashData.pid && hashData.gid) {
openPhotoSwipe( hashData.pid , galleryElements[ hashData.gid - 1 ], true, true );
}
}
});
</script>
</dom-module>
It seems you're missing styles from photoswipe.css.
I have 3 sets of images in 3 separate divs that are hard coded into the webpage. Only one set is viewed at a time by user choice button. This was ok when there were only 5 images in each set but now that I added more, the page is loading so slowly. The pictures are 1200 by 900 px because I am using nivo-slider which allows sizing.
Is there a way to load only the picture set that is clicked?
<div class="slider-wrapper theme-default" id="wrapper1" >
<div class="nivoSlider" id="c1" >
<img src="images/Germany2008/GermanyTrip01.jpg" alt="" />
<img src="images/Germany2008/GermanyTrip02.jpg" alt="" />
<!--etc. -->
</div>
</div>
<div class="slider-wrapper theme-default" id="wrapper2" >
<div class="nivoSlider" id="c2">
<img src="images/Germany2008/GermanyTrip01.jpg" alt="" />
<img src="images/Germany2008/GermanyTrip02.jpg" alt="" />
<!--etc. -->
</div>
</div>
Thank you.
I'm not perfectly clear on what you want but I'll try.
Add the following javascript at the bottom of the body:
var wrapperOneImages = ["path/to/image","path/to/image","path/to/image"];
var wrapperTwoImages = ["path/to/image","path/to/image","path/to/image"];
var amountOfWrappers = 2;
for (i=0; i < amountOfWrappers; i++) {
var nivoSlider = document.createElement("div");
nivoSlider.setAttribute("class", "nivoSlider");
nivoSlider.setAttribute("id", "c" + toString(i+1));
var wrapper = document.getElementById("wrapper" + toString(i+1));
if (i == 0) {
var whatWrapper = wrapperOneImages;
} else if (i == 1) {
var whatWrapper = wrapperTwoImages;
}
for (j=0; j < whatWrapper.length; j++) {
var img = document.createElement("img");
var img.setAttribute("src", whatWrapper[j]);
nivoSlider.appendChild(img);
}
wrapper.appendChild(nivoSlider);
}
And replace all of the html you provided with the following:
<div class="slider-wrapper theme-default" id="wrapper1" ></div>
<div class="slider-wrapper theme-default" id="wrapper2" ></div>
I haven't tested it but it should work.