Edit only javascript to add slideshow from images array - javascript

all
I have a lot of html pages on the server that opens each big image into a new window calling just one external javascript file.
I would like to edit this javascript so when I click on an image they all can be viewed using Prev and Next links buttons.
here's the html code for images:
<td><img src="moreimages/imagesmall01.jpg" width="70" border="0" alt="image small 1" title="image small 1"></td>
<td><img src="moreimages/imagesmall02.jpg" width="70" border="0" alt="image small 2" title="image small 2"></td>
<td><img src="moreimages/imagesmall01.jpg" width="70" border="0" alt="image small 3" title="image small 3"></td>
<td><img src="moreimages/imagesmall04.jpg" width="70" border="0" alt="image small 4" title="image small 4"></td>
and here's the code from javascript file:
var imagesArray = []; //array to hold all images from moreimages.html
function getImageLinks() {
var a = document.getElementsByTagName("a") //get all elements that have <a> tag
for (h in a) { // walk thru this elements
var href = a[h].attributes['href']; //from an <a> element get his href attribute
if (href) { // check if <a> tag has a href attribute
imagesArray.push(href.value); //add the value of href (image link) to the array
}
}
}
var win=null;
function NewWindow(mypage,myname,w,h,scroll,pos){
if(pos=="random"){
LeftPosition=(screen.width)?Math.floor(Math.random()*(screen.width-w)):100;
TopPosition=(screen.height)?Math.floor(Math.random()*((screen.height-h)-75)):100;
}
if(pos=="center"){
LeftPosition=(screen.width)?(screen.width-w)/2:100;
TopPosition=(screen.height)?(screen.height-h)/2:100;
}
else
if((pos!="center" && pos!="random") || pos==null){
LeftPosition=0;TopPosition=20
}
settings='width='+w+',height='+h+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=no';
win=window.open(mypage,myname,settings);
}

i think you want to make lightbox with slider
find this plugin : here

Related

HTML - Img alt attribute hides image

I'm grabbing favicon's from sites programmatically by generically making a request for the icon to "example.com/favicon.ico".
If the site doesn't have a favicon, I want to use the "alt" attribute of the image to hide the image so that it doesn't appear and doesn't have a "missing image" icon.
For example
<img src="https://www.businessinsider.com/favicon.ico" alt="$(this).hide();" height="16" width="16">
Can this be done?
You can use the built-in error() method. Hide your image based upon that.
$("img").on("error", function() {
$(this).hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://www.businessinsider.com/favicon.ico" height="16" width="16">
If you want an alternative image when the image is not available, give the new image source.
$("img").on("error", function() {
$(this).attr("src", "https://homepages.cae.wisc.edu/~ece533/images/mountain.png");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://www.businessinsider.com/favicon.ico" height="16" width="16">
You can put your placeholder immediately and check if the image loads on script. If it loads, replace the img src
var thisImage = new Image();
thisImage.src = 'https://www.businessinsider.com/favicon.ico';
thisImage.onload = function() {
console.log("Image 1 ready to append");
document.querySelector('.bg-image').src = thisImage.src;
};
<!--The source here is your placeholder-->
<img class="bg-image" src="https://placekitten.com/50/50" height="50" width="50" />

Javascript - have text appear with an image when clicked on

I have just started with Javascript/HTML and am wondering how I could create a page that has say, 2 images on and when you click on an image text relevant to that image appears?
My images are listed as below:
<img class="thumb" data-ord="1" onclick='changeMainImg(this);' src="full/01.jpg">
My changeMainImg function:
function changeMainImg1(that) {
document.getElementById("fullview").src=that.src;
current=that;}
Can I implement the text in the function so that each of the two different images has its own text?
Thank you
There are several ways to achieve this. If text is short, you can add it as a dataset attribute in the same img tag like this:
<img class="thumb" data-ord="1" data-text="my text" onclick='changeMainImg(this);' src="full/01.jpg">
function changeMainImg1(that) {
document.getElementById("fullview").innerHTML = that.dataset.text;
}
Other way is to define a variable with all texts and call it by index:
<img class="thumb" data-ord="0" onclick='changeMainImg(this);' src="full/01.jpg">
var texts = [
'text 1',
'text 2'
];
function changeMainImg1(that) {
document.getElementById("fullview").innerHTML = texts[that.dataset.ord];
}
I assume displaying the src attribute works for you. Below a possible solution. Prerequisite is to assign the same class name to each image involved.
/* Store image elements in an array */
const images = [... document.getElementsByClassName('thumb')];
/* Assign event listener to each image element */
images.map( (image) => image.addEventListener( "click", function()
{ alert(image.src) }
));
<img class="thumb" data-ord="1" src="full/01.jpg">
<img class="thumb" data-ord="2" src="full/02.jpg">
<img class="thumb" data-ord="2" src="full/03.jpg">
<img class="thumb" data-ord="2" src="full/04.jpg">
<img class="thumb" data-ord="2" src="full/05.jpg">

photo gallery using javascript to enlarge image on click in separate window

I have implemented a photo gallery of thumbnail images that enlarge in a separate window when clicked. My problem is that once the enlarged image appears and that window is closed, the user is left at the very top of the page instead of at the location they were when they clicked the image.
Here is a snippet of the html code (the images are in a table):
<table width="100%" border="0" cellspacing="0" cellpadding="6">
<tr align="center">
<td><img src="img/gallery/kitchens/thumbs/kit1thumb.jpg" width="200" height="133" border="0"></td>
<td><img src="img/gallery/kitchens/thumbs/kit2thumb.jpg" width="200" height="133" border="0"></td>
Here is the javascript I am using:
function TS_openWindow(url, name, args) {
if (typeof(popupWin) != "object"){
popupWin = window.open(url,name,args);
} else {
if (!popupWin.closed){
popupWin.location.href = url;
} else {
popupWin = window.open(url, name,args);
}
}
popupWin.focus();
}
Any help figuring out how to get the user to return to their original location within the webpage after closing the pop out window would be greatly appreciated!!

rollover one image in a DIV to get another to show up in a separate DIV

Im building a website where there is a photo of a girl and to the side are a group of glasses that you can try on over her face. Right now I have it so that when you rollover one of the glasses in the group they are highlighted, but I also want a pair to show up over the photo in separate DIV when you click it.
This is what i have for just the rollover:
function rollOver()
{
document.getElementById("helm").src ="images/helmOver.jpg";
}
function rollOut()
{
document.getElementById("helm").src ="images/helmStatic.jpg";
}
</script>
<div id="framestyle">
<img class="frame" src="images/helmStatic.jpg" id="helm" border="0" width="71" height="40" onmouseover="rollOver()" onmouseout="rollOut()"/>
</div>
This is the div and image I want to show up over the photo when a pair are clicked:
<div id="glasses">
<img src="images/faceGlasses.png">
</div>
***How do i get the image in the second div to only show up when the image/rollover is clicked in the first div?
I would add
function clickedGlasses(glassesImage) {
document.getElementById("glasses_overlay").src = glassesImage;
document.getElementById("glasses_overlay").style.display = "block";
}
To your script tag at the top, and then
<img id="glasses_overlay" src="blank.png" style="display:none;">
Into your "glasses" div alongside the "faceGlasses" image (you'll need to position this over the top of the other div, either absolutely, or relatively)
And finally, change your "helm" img to
<img class="frame" src="images/helmStatic.jpg" id="helm" border="0" width="71" height="40" onmouseover="rollOver()" onmouseout="rollOut()" onclick="clickedGlasses('images/helmOverlay.png')" />

Elegant way to extract specific text from between HTML nodes?

From the following string I need the dynamically changing "6.903" number to make calculation with.
Is there some regular expression or some jQuery trick to do that easily or elegantly?
<a href="javascript:void(0)" class="" id="buddyTrigger">
38.760 <img border="0" align="absmiddle" alt="Arany" src="/img/symbols/res2.gif">
5 <img border="0" align="absmiddle" alt="Pokolkristály" src="/img/symbols/res3.gif">
220 <img border="0" align="absmiddle" alt="Szilánk" src="/img/symbols/res_splinters.png">
91 / 125 <img border="0" align="absmiddle" alt="Akciópont" src="/img/symbols/ap.gif">
6.903 / 82.100 <img border="0" align="absmiddle" alt="Életerő" src="/img/symbols/herz.png">
<img border="0" align="absmiddle" alt="Szint" src="/img/symbols/level.gif"> 41
<img border="0" align="absmiddle" alt="Harci érték" src="/img/symbols/fightvalue.gif"> 878</a>
Here is my code as lenghty solution, can I simplify somehow?
<script type="text/javascript">
var dataIn=$('#infobar div.gold').html();
var dataPrep2Split=dataIn.replace(/<img(.*)>/g,';');
var dataSplit=dataPrep2Split.split(';');
var myData2Int=parseInt(dataSplit[18].replace('.',''));
if(myData2Int<=10000) {
$('#player').find('button.btn').remove();
var putBack=dataIn.replace(dataSplit[18],'<span class="newmessage">'+dataSplit[18]+'</span>');
$('#infobar div.gold').html(putBack);
}
</script>
Use DOM methods; replacing things using .html() often breaks page features. Also, that regex is liable to break with the smallest change.
You're trying to grab the Life value right? And that ends with the <img> with alt="Életero".
So that text node is (based on the Q code):
var lifeValTxtNd = $("#buddyTrigger img[alt='Életero']")[0].previousSibling;
And this gets 6903 from the contents like 6.903 / 82.100:
var lifeVal = $.trim (lifeValTxtNd.nodeValue)
.replace (/^\s*(\d*)\.?(\d+)\s*\/.+$/, "$1$2")
;
lifeVal = parseInt (lifeVal, 10);
Then to wrap that section in a span use:
$("#buddyTrigger img[alt='Életero']").before (
'<span class="newmessage">' + lifeValTxtNd.nodeValue + '</span>'
);
lifeValTxtNd.parentNode.removeChild (lifeValTxtNd);
Doing it this way:
Won't break any event listeners on the page.
Is less susceptible to changes in the page layout/content.
Is easier to understand and maintain.
Will run faster, if performance is a factor.

Categories