I am working on a simple image gallery page that contains a main image that is swapped whenever a thumbnail image is clicked. I know that the way I am doing it would be far easier in JQuery but I am determined to get a good grip on JS before I progress to JQuery!
Here is the problem:
I want to keep the main image at 1000px wide with overflow-x only (done already) now when a thumbnail image is clicked all that changes is the main image. I think I am close with the JS code and that it just needs a bit of tweeking by someone who understands what I have done wrong here! All I am trying to do is getElementById (the URL) and swap it!
I do not know how to upload images to JS fiddle so my example is image less but all code is there and working fine with images locally.
http://jsfiddle.net/Margate/zJjys/
Code is as follows:
//Thank you in advance for any help
<html>
<head>
<title>Confused!</title>
<style type="text/css">
#main-image-container{width: 1000px; height: 350px; position: absolute; top: 172px; left: 0px; border: 1px solid black; overflow-x: auto; overflow-y: hidden;}
#graffiti-panorama-image-bar{width: 600px; height: 95px; position: absolute; top: 540px; left: 200px; border: 1px solid black; overflow: auto; background-color: white;}
.image{position: absolute; cursor: pointer;}
#center-page{border:1px solid red; width: 1005px; height: 700px; position: absolute; margin: 0px auto;}
<body>
<div id="center-page">
<div id="main-image-container">
<img id="image" src="image-01.jpg" />
</div>
<div id="graffiti-panorama-image-bar">
<img src="small-01.jpg" onclick="Main1()" class="image" style=" left: 0px;" />
<img src="small-02.jpg" onclick="Main2()" class="image" style=" left: 307px;" />
<img src="small-03.jpg" onclick="Main3()" class="image" style=" left: 626px;" />
<img src="small-04.jpg" onclick="Main4()" class="image" style=" left: 941px;" />
<img src="small-05.jpg" onclick="Main5()" class="image" style=" left: 1260px;" />
</div>
</div>
<script type="text/javascript">
function Main1(){var obj=document.getElementById("image").style; obj.src="image-01.jpg";}
function Main2(){var obj=document.getElementById("image").style; obj.src="image-02.jpg";}
function Main3(){var obj=document.getElementById("image").style; obj.src="image-03.jpg";}
function Main4(){var obj=document.getElementById("image").style; obj.src="image-04.jpg";}
function Main5(){var obj=document.getElementById("image").style; obj.src="image-05.jpg";}
</script>
</body>
</html>
Try changing:
function Main1(){var obj=document.getElementById("image").style; obj.src="image-01.jpg";}
function Main2(){var obj=document.getElementById("image").style; obj.src="image-02.jpg";}
function Main3(){var obj=document.getElementById("image").style; obj.src="image-03.jpg";}
function Main4(){var obj=document.getElementById("image").style; obj.src="image-04.jpg";}
function Main5(){var obj=document.getElementById("image").style; obj.src="image-05.jpg";}
To:
function Main1(){var obj=document.getElementById("image"); obj.src="image-01.jpg";}
function Main2(){var obj=document.getElementById("image"); obj.src="image-02.jpg";}
function Main3(){var obj=document.getElementById("image"); obj.src="image-03.jpg";}
function Main4(){var obj=document.getElementById("image"); obj.src="image-04.jpg";}
function Main5(){var obj=document.getElementById("image"); obj.src="image-05.jpg";}
The .src property is a property of the image itself, not its style collection.
You can also consolidate these functions into a single function, and pass the image URL as a parameter:
function Main(imageUrl)
{
var obj=document.getElementById("image");
obj.src=imageUrl;
}
Then call it with:
<img src="small-01.jpg" onclick="Main('image-01.jpg')" class="image" style=" left: 0px;" />
To follow up lan's comment:
<div id="main-image-container">
<img id="image" src="image-01.jpg" />
</div>
<div id="graffiti-panorama-image-bar">
<img src="small-01.jpg" onclick="Main('image-01.jpg')" class="image" style=" left: 0px;" />
<img src="small-02.jpg" onclick="Main('image-02.jpg')" class="image" style=" left: 307px;" />
<img src="small-03.jpg" onclick="Main('image-03.jpg')" class="image" style=" left: 626px;" />
<img src="small-04.jpg" onclick="Main('image-04.jpg')" class="image" style=" left: 941px;" />
<img src="small-05.jpg" onclick="Main('image-05.jpg')" class="image" style=" left: 1260px;" />
</div>
</div>
<script type="text/javascript">
function Main(image) {
document.getElementById("image").src=image;
}
</script>
</body>
</html>
Related
I am using bootstrap to add responsive images to my webpage. The problem is that I have several overlapping images which then don’t get rescaled correctly.
Diagram Example
Not sure if I’ve set something up wrong, am missing something or trying to over-reach beyond what bootstrap can do.
This is the test code I’m using, I’ve kept it generic.
HTML:
<div class="col-lg-12" >
<!-- Images inside the container image that are not being rescaled -->
<div class="children_Images">
<img class="img-responsive" id="image_1" src="insideImage_1.png" alt="" style="left: 0.6em; top: -0.5em"/>
<img class="img-responsive" id="image_2" src="insideImage_2.png" alt="" style="left: 0.6em; top: -0.5em"/>
<img class="img-responsive" id="image_3" src="insideImage_3.png" alt="" style="left: 0.6em; top: -0.5em"/>
</div>
</div>
CSS:
.container{
border: 2px solid red;
position: relative; /* Allows children to be placed relative to the panel */
font-size: 10px;
z-index: 0;
height: 100%;
width: 100%;
}
.container img{
max-width:100%;
width: auto;
position: absolute;
border:5px solid green;
}
.children_Images
{
transition: all 1s ease-in-out;
}
.children_Images:hover
{
transform: scale(1.05) translate(4em);
}
I’m just wondering if this is possible with CSS and Bootstrap or should I be doing something with JavaScript that rescales all the children images once the parent image’s size has been altered?
What you should do is this
<div class="container">
<div class="col-xs-4">
<img src="" alt="" />
</div>
<div class="col-xs-4">
<img src="" alt="" />
</div>
<div class="col-xs-4">
<img src="" alt="" />
</div>
</div>
And css
.container img {
max-width: 100%;
}
I've made a photo gallery by HTML and CSS. I want, when I'll click on in, my image will display in full size slowly in a box. But I don't know how can I make it. Can you help me to solve this? If possible, please give me full code. My code is:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> My gallery</title>
<style type="text/css">
.gallery {
border: 1px solid #000;
width: 160px;
}
.img_head {
border-bottom: 1px solid #000;
text-align: center;
}
img {
height: 150px;
width: 150px;
margin: 5px;
}
img:hover {
height: 158px;
width: 158px;
margin: 1px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="gallery">
<div class="img_head">
<h3>My Image</h3>
</div>
<img src="http://i.imgur.com/jnMGOR9.jpg?1" alt="image" />
</div>
</body>
</html>
Here is an example that might work for you:
jsFiddle Demo
HTML:
<div id="overlay" class="abs"></div>
<div id="lb" class="abs">
<div id="lbHead">
<div id="lbTitle">Your image</div><div id="lbX">X</div>
</div>
<div id="lbBody">
</div>
</div>
<div class="gallery">
<div class="img_head">
<h3>My Image</h3>
</div>
<img src="http://i.imgur.com/jnMGOR9.jpg?1" width="50" height="50" alt="image" />
</div>
js/jQuery:
$('img').click(function(){
var tmp = $(this).attr('src');
$('#lbBody').html('<img src="'+tmp+'" />');
$('#overlay, #lb').fadeIn(1800);
});
$('#lbX').click(function(){
$('#overlay, #lb').fadeOut(800);
});
CSS:
.abs {position:absolute}
#overlay{top:0;left:0;right:0;bottom:0;background:black;opacity:0.5;}
#lb{top:5%;left:3%;width:94%;height:50%;overflow:hidden;}
#lbHead{height:40px;width:100%;background:darkcyan;}
#lbTitle{float:left;width:70%;height:30px;color:white;}
#lbX{float:right;width:30px;height:30px;padding:10px;text-align:center;}
#lbX:hover{background:white;color:darkcyan;cursor:pointer;}
img:hover{cursor:pointer;}
#overlay, #lb{display:none;}
You can use these type of gallery
http://www.jqueryscript.net/demo/Responsive-Photo-Gallery-with-jQuery-and-Bootstrap-3/
https://blueimp.github.io/Bootstrap-Image-Gallery/
http://ironsummitmedia.github.io/startbootstrap-thumbnail-gallery/#
I need to design gallery in similar to example below with responsive feature.
so far i managed to find few galleries but each one had one or the other limitation. Gallery i am working on is based on jssor example http://www.jssor.com/demos/image-gallery-with-vertical-thumbnail.html
I am able to make some modification to the code and make it similar to my requirement, Unfortunately same code which is working on my local system is not working on JSFiddle.
At present i tried to add the caption to the jssor gallery but it is not working, while my actual requirement is for two separate caption one will show the title of the image & other will be link to a website or web page...
I would appreciate help in this regarding or a gallery which is similar to my requirement I have spend two days trying to get my hands on good code which can be easy to customize to my design.
Code sample:
<div style="width:1000px; background-color:green; margin-top:30px;">
<!-- Jssor Slider Begin -->
<!-- You can move inline styles to css file or css block. -->
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 1000px; height: 480px; overflow: hidden;">
<!-- Loading Screen -->
<div u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block; top: 0px; left: 0px;width: 100%;height:100%;"></div>
<div style="position: absolute; display: block; background: url(../img/loading.gif) no-repeat center center; top: 0px; left: 0px;width: 100%;height:100%;"></div>
</div>
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left:0; top: 0px; width: 550px; height: 480px; overflow: hidden;">
<div>
<img u="image" src="http://www.jssor.com/img/travel/01.jpg" />
<img u="thumb" src="http://www.jssor.com/img/travel/thumb-01.jpg" /> <span> Title</span>
</div>
<div>
<img u="image" src="http://www.jssor.com/img/travel/02.jpg" />
<img u="thumb" src="http://www.jssor.com/img/travel/thumb-02.jpg" />
</div>
<div>
<img u="image" src="http://www.jssor.com/img/travel/03.jpg" />
<img u="thumb" src="http://www.jssor.com/img/travel/thumb-03.jpg" />
</div>
<div>
<img u="image" src="http://www.jssor.com/img/travel/04.jpg" />
<img u="thumb" src="http://www.jssor.com/img/travel/thumb-04.jpg" />
</div>
<div>
<img u="image" src="http://www.jssor.com/img/travel/05.jpg" />
<img u="thumb" src="http://www.jssor.com/img/travel/thumb-05.jpg" />
</div>
<div>
<img u="image" src="http://www.jssor.com/img/travel/06.jpg" />
<img u="thumb" src="http://www.jssor.com/img/travel/thumb-06.jpg" />
</div>
<div>
<img u="image" src="http://www.jssor.com/img/travel/07.jpg" />
<img u="thumb" src="http://www.jssor.com/img/travel/thumb-07.jpg" />
</div>
<div>
<img u="image" src="http://www.jssor.com/img/travel/08.jpg" />
<img u="thumb" src="http://www.jssor.com/img/travel/thumb-08.jpg" />
</div>
<div>
<img u="image" src="http://www.jssor.com/img/travel/09.jpg" />
<img u="thumb" src="http://www.jssor.com/img/travel/thumb-09.jpg" />
</div>
<div>
<img u="image" src="http://www.jssor.com/img/travel/10.jpg" />
<img u="thumb" src="http://www.jssor.com/img/travel/thumb-10.jpg" />
</div>
<div>
<img u="image" src="http://www.jssor.com/img/travel/11.jpg" />
<img u="thumb" src="http://www.jssor.com/img/travel/thumb-11.jpg" />
</div>
<div>
<img u="image" src="http://www.jssor.com/img/travel/12.jpg" />
<img u="thumb" src="http://www.jssor.com/img/travel/thumb-12.jpg" />
</div>
<div>
<img u="image" src="http://www.jssor.com/img/travel/13.jpg" />
<img u="thumb" src="http://www.jssor.com/img/travel/thumb-13.jpg" />
</div>
<div>
<img u="image" src="http://www.jssor.com/img/travel/14.jpg" />
<img u="thumb" src="http://www.jssor.com/img/travel/thumb-14.jpg" />
</div>
</div>
<!-- Arrow Left --> <span u="arrowleft" class="jssora05l" style="width: 40px; height: 40px; top: 140px; left: 10px;">
</span>
<!-- Arrow Right --> <span u="arrowright" class="jssora05r" style="width: 40px; height: 40px; top: 140px; left: 490px">
</span>
<!-- Arrow Navigator Skin End -->
<!-- Thumbnail Navigator Skin 02 Begin -->
<div u="thumbnavigator" class="jssort02" style="position: absolute; width: 430px; height: 480px; right:0px; bottom: 0px; margin-left:2px;">
<div u="slides" style="cursor: move;" class="thumbnail-custom">
<div u="prototype" class="p" style="position: absolute; width: 99px; height: 66px; top: 0; left: 0;">
<div class=w>
<thumbnailtemplate style=" width: 100%; height: 100%; border: none;position:absolute; top: 0; left: 0;"></thumbnailtemplate>
</div>
<div class=c></div>
</div>
</div>
<!-- Thumbnail Item Skin End -->
</div>
<!-- Thumbnail Navigator Skin End -->
</div>
<!-- Jssor Slider End -->
</div>
Please remove the unwanted '/' at line 42 of scripts.
And make following changes,
Add css for captions
/* caption css */
.captionOrange, .captionBlack
{
color: #fff;
font-size: 20px;
line-height: 30px;
text-align: center;
border-radius: 4px;
}
.captionOrange
{
background: #EB5100;
background-color: rgba(235, 81, 0, 0.6);
}
.captionBlack
{
font-size:16px;
background: #000;
background-color: rgba(0, 0, 0, 0.4);
}
a.captionOrange, A.captionOrange:active, A.captionOrange:visited
{
color: #ffffff;
text-decoration: none;
}
a.captionOrange:hover
{
color: #eb5100;
text-decoration: underline;
background-color: #eeeeee;
background-color: rgba(238, 238, 238, 0.7);
}
Add caption options
$CaptionSliderOptions: {
$Class: $JssorCaptionSlider$,
$CaptionTransitions: _CaptionTransitions,
$PlayInMode: 1,
$PlayOutMode: 3
}
Add captions to slide
<div u=caption t="L" du="2000" class="captionOrange" style="position:absolute; left:20px; top: 300px; width:500px; height:30px;"> Caption 1 </div>
<a u="caption" t="R" class="captionOrange" href="http://www.yourdomain.com" style="position: absolute; top: 300px; left: 630px; width: 250px; height: 30px;">www.yourdomain.com</a>
See http://jsfiddle.net/77uuamcn/4/
I try to put 4 images (same size) on 5th image defined as BG.
This is how it looks like now:
It works fine if height is fixed but in my case the height might change and I get this behavior:
This issue is not surprises me because I use % but not px.
When width changes, the style left: 13% changes
Very important!!! I can use only "%"
How can I achieve 1st image I posted even if height changes?
Here is relevant code:
<!-- BG image -->
<div style="position: relative; right: 0; top: 0; height:100%">
<img src="img/groups/pic-shade.png" style="
position: relative;
top: 0%;
right: 0%;
height: 17.6%;
">
<!-- left-top image -->
<img
style="position: absolute;
height: 42.25%;
top: 0%;
left: 0%;" src="img/group_6.png">
<!-- right-top image -->
<img
style="position: absolute;
height: 42.25%;
top: 0%;
left: 13%;" src="img/group_6.png">
<!-- left-bottom image -->
<img
style="position: absolute;
height: 42.25%;
bottom: 0%;
left: 0%;" src="img/group_6.png">
<!-- right-bottom image -->
<img
style="position: absolute;
height: 42.25%;
bottom: 0%;
left: 13%;" src="img/group_6.png">
</div>
[EDIT]
I tried to put right: 0% instead left: 13% but it doesn't help me because BG div has bigger width then BG image:
Here is root DIV selected:
DEMO
Don't use position absolute -- it breaks the flow and relationship between elements which means they can not show any response to each others width height changes.
Instead use the table technique -- check the demo.
HTML
<div class="bg-image-wrapper">
<div class="table">
<div class="row">
<div class="cell"><img src="http://placehold.it/100x100" alt="" /></div>
<div class="cell"><img src="http://placehold.it/100x100" alt="" /></div>
</div>
<div class="row">
<div class="cell"><img src="http://placehold.it/100x100" alt="" /></div>
<div class="cell"><img src="http://placehold.it/100x100" alt="" /></div>
</div>
</div>
</div>
CSS
img{
display:block;
}
.table{
display: table;
}
.row{
display: table-rwo;
}
.cell{
display:table-cell;
}
.bg-image-wrapper{
display: inline-block;
background: url(http://placehold.it/200x200);
border-radius: 10px;
overflow: hidden;
}
<!-- BG image -->
<div style="background-image:url("img/groups/pic-shade.png"); position: relative; right: 0; top: 0; height:100%">
<table>
<tr>
<td>
<img style="height: 100%;width: 100%;src="img/group_6.png">
</td>
<td>
<img style="height: 100%;width: 100%;src="img/group_6.png">
</td>
</tr>
<tr>
<td>
<img style="height: 100%;width: 100%;src="img/group_6.png">
</td>
<td>
<img style="height: 100%;width: 100%;src="img/group_6.png">
</td>
</tr>
</div>
I have tried some usual document object commands like getElement by id/by tag/by name. They all give null, only bale to identify iframe id"my_dash" but can not access innerHTML. Either gives undefined or nothing in alert. I was trying to access the iframe "iframe_Content_portlet1" to change its src by making a javascript function to work on click link but was not working. Please suggest how to access it....
Given below is the code one finds in firebug.
*regarding context from my main code *
<tr>
<td colspan="10">
<!--this is the iframe accessible by main jsp-->**
<iframe id="my_dash" width="990px" height="935px" padding-left:="200px" src="http://172.31.144.171:8080/pentaho/content/dashboards?solution=airport&path=%2FMain&action_name=ATM-Dashboard.xdash">
<!--content inside the main iframe-->**
<html class=" ext-strict" xmlns:pho="http:/www.pentaho.com">
<head>
<body id="ext-gen6" class="pentaho-transparent ext-gecko ext-linux pentaho-page-background">
<div id="wrapper" class="wrapper">
<div id="dashboard-content">
<div id="titlebar" class="title" style="position: absolute; display: block; left: 0px; top: 0px; width: 990px; height: 23px;">
<h1 id="dashboard-title" class="pageTitle">New Dashboard</h1>
</div>
<div id="widget-area" class="widget-area" scrollexception="true" style="display: block; top: 29px; width: 990px; height: 906px; left: 0px; z-index: 30;">
<div id="widget-area-scroll-shim" style="width:100%;height:100%;"></div>
<div id="select-frame-left"></div>
<div id="select-frame-top"></div>
<div id="select-frame-bottom"></div>
<div id="select-frame-right"></div>
<div id="FilterPanel" class="povContainer" style="position: absolute; top: 0px; width: 100%; height: 100%; left: 0px; z-index: 30; display: none;" pho:panel="FilterPanel">
<div id="hbox1" style="position: absolute; top: 0px; width: 990px; height: 300px; left: 0px;">
<div id="Panel_1" class="widgetContainer" style="position: absolute; top: 5px; width: 567.044px; height: 290px; left: 5px; z-index: 30;" pho:panel="Panel_1">
<div class="widget">
<div id="wgtHead-Panel_1" class="wgtHead" ondblclick="pentahoDashboardController.panelTitleDoubleClick('Panel_1')" onclick="pentahoDashboardController.panelTitleClick('Panel_1', true);">
<div id="dataContainer-Panel_1" class="dataContainer" style="height: 265px;">
<div class="rightCorner">
<div class="wgtData">
<div id="content-area-Panel_1" class="panel-contentarea" onclick="pentahoDashboardController.panelTitleClick('Panel_1', false)" style="top: 23px; width: 567.044px; height: 265px; left: 0px;">
<!--this is the iframe I want to access in the same jsp(it is being accessed by another jsp, not included in the main jsp)-->**
<iframe frameborder="0" src="http://172.31.144.171:8080/pentaho/pentaho-solutions/airport/ATM/scorecard/common1.jsp?dashboard_id=1&portlet_id=1" border="0" style="width:100%;height:100%;border:0px">
<html>
<head>
<body>
<style type="text/css">
<div>
<!--this is the iframe I want to access in the same jsp(it is being accessed by another jsp, not included in the main jsp)-->
<iframe id="iframe_Content_Portlet1" width="100%" height="100%" style="overflow:hidden;"src="http://172.31.144.171:8080/pentaho/content/reporting/reportviewer/report.html?solution=airport&path=%2FATM%2Fscorecard&name=atm_scorecard.prpt&locale=en_US&username=joe&password=p##ssw0rd">
<html class="dj_gecko dj_contentbox" xmlns:pho="http:/www.pentaho.com">
<head>
<body class="tundra body pentaho-page-background">
</html>
</iframe>
</body>
</html>
</iframe>
</div>
</div>
</div>
</div>
<div id="wgtFooter-Panel_1" class="wgtFooter">
<div class="rightCorner"></div>
</div>
</div>
</div>
How are you trying to reach what's inside your frame?
Because something along the lines of frames["my_dash"].document.getElementById("XXXX") should work.
See https://developer.mozilla.org/en-US/docs/DOM/window.frames for a little doc on frames.