I need to have multiple galleries on the same page (with captions), and have been trying to implement this javascript, but I cannot get the next | previous links to work for either gallery. New to javascript - any suggestions?
Here is the fiddle: http://jsfiddle.net/astHh/11/
HTML:
<div style="text-align: center">
<!-- Place the first image here -->
<img src="http://www.cool-smileys.com/images/out11.jpg" id="mypic" name="mypic" alt="information" border="0" height="150" width="200">
<br>
<!-- Place the text for the first image here --><div id="burns">Caption one</div>
<p>
« Previous |
Next »
</div>
<p>
<div style="text-align: center">
<!-- Place the first image here -->
<img src="http://www.cool-smileys.com/images/out13.jpg" id="mypic2" name="mypic2" alt="information" border="0" height="150" width="200">
<br>
<!-- Place the text for the first image here --> <div id="burns2">Caption two</div>
<p>
« Previous |
Next »
</div>
Javascript:
<script type="text/javascript">
function SimpleSlideShow(o){
this.img=document.getElementById(o.ImageID);
this.txt=document.getElementById(o.TextID);
this.ary=o.Array||[];
this.cnt=0;
}
SimpleSlideShow.prototype.UpDown=function(ud){
this.cnt+=ud;
this.cnt=this.cnt<0?this.ary.length-1:this.cnt==this.ary.length?0:this.cnt;
if (this.ary[this.cnt]){
if (this.img&&this.ary[this.cnt][0]){
this.img.src=this.ary[this.cnt][0];
this.img.alt=this.ary[this.cnt][1];
}
if (this.txt){
this.txt.innerHTML=this.ary[this.cnt][2]||'';
}
}
}
S1=new SimpleSlideShow({
ImageID:'mypic',
TextID:'burns',
Array:[
['http://www.cool-smileys.com/images/out11.jpg,' 'Caption one', 'The beautiful mountains'],
['http://www.cool-smileys.com/images/out10.jpg','Caption two','The crystal clear lake'],
]
});
S2=new SimpleSlideShow({
ImageID:'mypic2',
TextID:'burns2',
Array:[
['http://www.cool-smileys.com/images/out13.jpg','caption one', 'The beautiful mountains'],
['http://www.cool-smileys.com/images/out12.jpg','caption two','The lonesome, barren tree']
]
});
</script>
You have multiple syntax errors in your javascript:
Remove from the script pane:
<script type="text/javascript">
</script>
Within your definition of "S1", you're missing a comma (just before 'Caption one'):
S1=new SimpleSlideShow({
ImageID:'mypic',
TextID:'burns',
Array:[
['http://www.cool-smileys.com/images/out11.jpg,','Caption one', 'The beautiful mountains'],
['http://www.cool-smileys.com/images/out10.jpg','Caption two','The crystal clear lake'],
]
});
Then in the HTML pane, you should update the first set prev/next links to target S1 instead of S2.
Updated fiddle: http://jsfiddle.net/astHh/12/
Related
There is an Image coming from server:
<div class="storyDetail">
<img src="img/photo.jpg" height="180" width="300" style="float:left;">
</div>
Now I want to change this image like this through javascript when page loads:
<div class="storyDetail">
<div class="insta-gallery">
<a href="img/photo.jpg" class="tt-lightbox">
<img src="img/photo.jpg" height="180" width="300" style="float:left;"/>
</a>
</div>
</div>
I have tried through Javascript but got nothing because I am not fimilier with Javascript!
I just got the answer with the help of MR.#sinisake.
<!-- Getting Image 'Src' -->
var storyDetailImageSrc= $('.storyDetail').find('img').attr('src');
<!-- Wrapping image with required div(s) -->
$('.storyDetail img').wrap('<a href="'+storyDetailImageSrc+'" class="tt-lightbox">');
$('.tt-lightbox').wrap('<div class="insta-gallery">');
To change text:
Add an id to your div:
<div class="storyDetail" id="storyDetail01">
Define a function:
function changeText {
document.getElementById("storyDetail01").innerHTML =
' <div class="insta-gallery">
<a href="img/photo.jpg" class="tt-lightbox">
<img src="img/photo.jpg" height="180" width="300" style="float:left;"/>
</a>
</div>';
return false; }
Place that function wherever you execute Javascript when loading your page.
If not sure about what you do to that purpose, but the easiest -and dirtiest-, is to add a scirpt at the bottom of the html
<body> -> that's your html page body
--- code code...
<script type="text/javascript">
changeText();
</script>
</body>
I have three images that each change to a second image on mouseover. On mouseover they also reset the others to the standard image. This all works fine.
However..
I would like each of the second images to be clickable links to another page.
Hope someone can help, many thanks.
$(document).ready(function(){
$('#s1').mouseover(function(){
$('#s1').attr('src', 'images/object/click-1.png');
$('#s2').attr('src', 'images/object/standard-2.jpg');
$('#s3').attr('src', 'images/object/standard-3.jpg');
});
$('#s2').mouseover(function(){
$('#s1').attr('src', 'images/object/standard-1.jpg');
$('#s2').attr('src', 'images/object/click-2.png');
$('#s3').attr('src', 'images/object/standard-3.jpg');
});
$('#s3').mouseover(function(){
$('#s1').attr('src', 'images/object/standard-1.jpg');
$('#s2').attr('src', 'images/object/standard-2.jpg');
$('#s3').attr('src', 'images/object/click-3.png');
});
});
So the links would need to be on click-1.png, click-2.png, click-3.png.
<div id="section3" class="container-fluid" align="center">
<div class="row row-centered ">
<div id="top-box-1" class="col-sm-4">
<img src="images/object/standard-1.jpg" id="s1" width="300" height="300" />
</div>
<div id="top-box-2" class="col-sm-4">
<img src="images/object/standard-2.jpg" id="s2" width="300" height="300" />
</div>
<div id="top-box-3" class="col-sm-4">
<img src="images/object/standard-3.jpg" id="s3" width="300" height="300" />
</div>
</div>
</div>
Just make each image tag (s1, s2, and s3) a link. The actual src attribute of the img tag can change to display whatever image you want, it's really irrelevant. After all, A user can only click on something they've moused over.
I have a div loadContent in my main html, loading successfully with my external html, instead of loading the whole html i decided to load just 1 part of the div, but if i just load that one part, it won't link with my external css anymore.
my external HTML
<html>
<head>
<!-- CSS
================================================== -->
<link rel="stylesheet" href="main.css"/>
<!-- JS
================================================== -->
<script type="text/javascript" src="portfolioAjax.js"></script>
</head>
<body>
<!-- Primary Page Layout
================================================== -->
<div id="content">
<div class="sixteen full columns alpha omega">
<div class="img_section four full columns alpha omega">
<img class="four full columns test_img alpha omega" src="http://i.imgur.com/5bGrqhU.jpg" alt="logo" img-title="Dog So Cute" img-desc="A bunch of cute dog lol" author-name="Andrew" author-special="IAT" author-about="just a normal guy" author-skills="photoshop and stuffs" author-email="andrew#hotmail.com" author-web="yahoo.com.sg" author-img="images/andrew.jpg">
<h2 class="caption">des<br />GAD Portfolio1</h2>
</div>
<div class="img_section four full columns alpha omega">
<img class="four full columns test_img alpha omega" src="images/pic2.jpg" alt="logo" img-title="2 cute human" img-desc="err, 2 human." author-name="Daniel" author-special="IAT" author-about="mr simple" author-skills="know it all" author-email="daniel#hotmail.com" author-web="wikipedia.com" author-img="images/daniel.jpg">
<h2 class="caption">bee<br />GAD Portfolio2</h2>
</div>
<div class="img_section four full columns alpha omega">
<img class="four full columns test_img alpha omega" src="images/pic3.jpg" alt="logo" img-title="i am scared" img-desc="please don't bite me">
<h2 class="caption">tee<br />GAD Portfolio3</h2>
</div>
<div class="img_section four full columns alpha omega">
<img class="four full columns test_img alpha omega" src="images/pic4.jpg" alt="logo" img-title="look at my eyes" img-desc="i'm so cute">
<h2 class="caption">fee<br />GAD Portfolio4</h2>
</div>
<div class="img_section four full columns alpha omega">
<img class="four full columns test_img alpha omega" src="images/pic5.jpg" alt="logo" img-title="well..." img-desc="i don't know what is this">
<h2 class="caption">foon<br />GAD Portfolio5</h2>
</div>
<div class="img_section four full columns alpha omega">
<img class="four full columns test_img alpha omega" src="images/pic6.jpg" alt="logo" img-title="hi" img-desc="some candid shyt">
<h2 class="caption">yea<br />GAD Portfolio6</h2>
</div>
<div class="img_section four full columns alpha omega">
<img class="four full columns test_img alpha omega" src="images/pic7.jpg" alt="logo" img-title="Sup friend" img-desc="ok can">
<h2 class="caption">ded<br />GAD Portfolio7</h2>
</div>
<div class="img_section four full columns alpha omega">
<img class="four full columns test_img alpha omega" src="images/pic8.jpg" alt="logo" img-title="oh my god" img-desc="i forgot my clothes." author-name="Jassalyn" author-special="IAT" author-about="DUX Pro" author-skills="Everything" author-email="jess#hotmail.com" author-web="dux.com.sg" author-img="images/jessalyn.jpg">
<h2 class="caption">bef<br />GAD Portfolio8</h2>
</div>
</div>
</div>
</body>
if i just load the above file as a whole it works, but if i just load #content, the .js and .css will disappear. Any solution for it?
my Jquery
$(function() {
$("#tab_gad").click(function() {
$('.loadContent').load('portfolio_gad.html #content'); // js and css file gone
$('.loadContent').load('portfolio_gad.html'); // works fine since i import everything include heading
});
});
Please advise if u have a easier way that i should approach towards.
Summary to what i want to achieve.
main html load a div of external html(with js & css intact)
my approach: i duplicated the main css and js to let my external html link towards it since my main html and external html are almost the same, just different content. Not sure if i am doing this the right way please advise
You can load your content and use the callback function to load your JS and css. Something like this:
$(function() {
function loadJS( scrpt, fn ) {
var el = document.createElement('script'),
body = document.body;
el.type = 'text/javascript';
el.src = scrpt;
if ( typeof fn === 'function' ) {
el.onload = fn();
}
body.appendChild(el);
}
function loadCSS( scrpt, fn ) {
var el = document.createElement('link'),
body = document.head;
el.type = 'text/css';
el.media = 'all';
el.rel = 'stylesheet';
el.href = scrpt;
if ( typeof fn === 'function' ) {
el.onload = fn();
}
body.appendChild(el);
}
$("#tab_gad").click(function() {
$('.loadContent').load('portfolio_gad.html #content', function() {
loadJS('/path/to/whatever.js');
loadCSS('/path/to/whatever.css');
});
});
});
That is because the code you're executing (appended #content) would only load the HTML of the element with the ID set to content.
Since other elements don't have that ID they will be ignored while being downloaded. You can, however try to load the whole HTML page without the content element. Scripts and style techniques must be downloaded in order for them to work, but that code would never bother downloading any script or css file since you're not asking for it. You're just asking it to download the #content part.
You can somehow change your HTML to look like this,
<!-- HTML -->
<html>
<head>
<link rel="stylesheet" type="text/css" href="link/toStylesheet.css" />
</head>
<body>
<div class="loadContent">
<!-- leave it empty initially -->
</div>
</body>
<script>
// Place your scripts here -->
// Load the content now -->
$(document).ready(function () {
$('.loadContent').load('portfolio_gad.html #content');
});
</script>
</html>
Now when you will download the HTML, the scripts and CSS will already be there. So you won't have to face the issue again.
I have a template which is constructed in the following way...
<div ng-repeat="itemEntry in itemEntry">
<!-- content -->
<section class="product-view-wrapper" ng-repeat="productView in itemEntry.Productview">
<div class="slide" ng-repeat="productImg in itemEntry.productImgs">
<img ng-src="{{productImgs.img}}"/>
</div>
<!-- Content -->
</section>
</div>
Is it possible to nest two repeats inside an ng-repeat? if so based on the example above is this the correct html method?
i also have a json file which looks like the following:
image: "http://www.colette.fr/media/push/swa_mmm_001255.jpg",
productTitle: "Ipath lowrunner",
productDesc: "Low skateshoes - Grey",
user: "knows",
price: "$17",
productImgs: [
{img: "http://www.colette.fr/media/push/swa_mmm_001255.jpg"},
{img: "http://www.colette.fr/media/push/paddin265.jpg"}
]
},
However i have noticed the productImg content does not appear when view through inspect element. Again is the correct structure when double nesting an ng-repeat function - if this even can be done?
click on demo for a more in depth example
You aren't repeating over the proper array within the nested repeat. I scaled your demo down to just relevant html for the question
<section class="product-view-wrapper" ng-repeat="productObject in itemEntry">
<!-- each loop of the <section> will output from productObject contained in itemEntry array -->
<h3>{{productObject.productDesc}}</h3>
<img ng-src="{{productObject.image}}" height="120px">
<h4>Repeating images</h4>
<!-- want to loop over array contained in each productObject -->
<div class="slide" ng-repeat="productImg in productObject.productImgs" style="float:left">
<img ng-src="{{productImg.img}}" height="80px" />
</div>
<hr style="clear:both">
</section>
DEMO
I have a banner made out of JavaScript wherein when you hover a particular text the image in the banner changes.
I was wondering how to make it compatible in ie8..
I used this tutorial to come up with the js:
http://www.javascriptkit.com/script/script2/rolldifferent.shtml
I'm also trying to mouse out too then the image will change.
Here are the js codes:
<script type="text/javascript">function changeimage(towhat,url){if (document.images){document.images.targetimage.src=towhat.src gotolink=url}}functionwarp({window.location=gotolink}</script>
<script>var myimages=new Array()var gotolink="#"function preloadimages(){for (i=0;i<preloadimages.arguments.length;i++){myimages[i]=newImage()myimages[i].src=preloadimages.arguments[i]}}preloadimages("map_wm_hover.gif", "map_wm_hover2.gif","map_wm.gif")</script>
Here is the css:
<div id="base"><div id="mapcontainer"><img src="map_wm.gif" name="targetimage" border=0></div>
<div id="textcontainer"><div class="textboxinner1">8CCC REQUESTS/TALKBACK</div>
<div class="textboxinner2">Alice Springs 8952 7771</div>
<div class="textboxinner2">Tenant Creek 8952 7182</div>
<div class="textboxinner3"><span class="t3nonelink">...other contact details here</span></div>
I believe this is an issue with IE where animated gifs are not loaded properly in javascript. A workaround is to put the images in a hidden div in the HTML code instead of loading them in the script. A positive side-effect is that this greatly simplifies the javascript. See http://jsfiddle.net/5pZLT/7
HTML:
<DIV id=base>
<DIV id=mapcontainer><IMG border=0 name=targetimage src ="http://www.keencloudmedia.com/skybluekangaroo/map_wm.gif"> </DIV>
<DIV id=textcontainer>
<DIV class=textboxinner1><A onmouseover=changeimage(2,this.href)
href="index.html">8CCC REQUESTS/TALKBACK</A> </DIV>
<DIV class=textboxinner2><A onmouseover=changeimage(1,this.href)
href="index.html">Alice Springs 8952 7771</A> </DIV>
<DIV class=textboxinner2><A onmouseover=changeimage(0,this.href)
href="index.html">Tenant Creek 8952 7182</A> </DIV>
<DIV class=textboxinner3><SPAN class=t3nonelink>...other contact details <A
onmouseover=changeimage(2,this.href) href="index.html">here</A></SPAN>
</DIV></DIV></DIV><div id="hiddenImages" style="display: none">
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm_hover.gif" name="hoverImage" />
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm_hover2.gif" name="hoverImage2" />
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm.gif" name="originalImage" />
</div>
Javascript:
var gotolink = "#";
function changeimage(imageNumber, url) {
if (document.images) {
document.images.targetimage.src =
document.getElementById('hiddenImages').children[imageNumber].src;
gotolink = url;
}
}
By the way there were lots of ;s missing in your original code which would tend to stop it working.