/    Sign up×
Community /Pin to ProfileBookmark

Help with changing evt.src

Copy linkTweet thisAlerts:
Jun 24.2007

Hi folks, I’m trying to get a simple javascript + css photo gallery going and I just can’t figure out the most important part: how to change the evt.src to target the correct sub-directory.

The original code:

[CODE]function showSlide(evt) {
objectPhotoSlide.innerHTML='<img src=”‘+ evt.src +'” id=”largePhoto” alt=”Large Photo” border=”0″ />’;[/CODE]

What I amended but obviously isn’t working:

[CODE]function showSlide(evt) {
objectPhotoSlide.innerHTML='<img src=”photos/’+ evt.src +'” id=”largePhoto” alt=”Large Photo” border=”0″ />’;[/CODE]

The picture just won’t show up. What am I doing wrong here?

I got the original code from Jason Cranford Teague’s ‘CSS, DHTML & AJAX’ quickstart guide book. If any of you know this, please enlighten me!

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@Logic_AliJun 24.2007 — Hi folks, I'm trying to get a simple javascript + css photo gallery going and I just can't figure out the most important part: how to change the evt.src to target the correct sub-directory.

The original code:
[CODE]function showSlide(evt) {
objectPhotoSlide.innerHTML='<img src="'+ evt.src +'" id="largePhoto" alt="Large Photo" border="0" />';[/CODE]

What I amended but obviously isn't working:
[CODE]function showSlide(evt) {
objectPhotoSlide.innerHTML='<img src="photos/'+ evt.src +'" id="largePhoto" alt="Large Photo" border="0" />';[/CODE]
[/quote]You haven't shown how the function is being called, specifically the parameter being passed to it. Do you get any errors in the console?
The picture just won't show up. What am I doing wrong here?

I got the original code from Jason Cranford Teague's 'CSS, DHTML & AJAX' quickstart guide book. If any of you know this, please enlighten me![/QUOTE]That is a hideous way of swapping an image and should never have appeared in a book.
Copy linkTweet thisAlerts:
@GackterauthorJun 25.2007 — This is in the BODY of the HTML page
[CODE]<body onload="initSlides()">

<div id="cover">&nbsp;</div>
<div id="slide" onclick="hideSlide()">
<span class="slideControl">Click to Close &otimes;</span>
<div id="photoSlide">Loading</div>
</div>

<div id="photoAlbum">
<img src="photos/photo-1.jpg" alt="World's Fair" border="0" onclick="showSlide(this)" />
<img src="photos/photo-2.jpg" alt="Video Wall" border="0" onclick="showSlide(this)" />
</div>[/CODE]

This is the CSS stylesheet
[CODE]#slide {
position: absolute;
z-index: 1000;
display: none;
top: 100px;
text-align: right;
padding: 0px 8px 8px 8px;
background-color: #fff;
cursor: pointer;
font: bold 10px "helvetica neue",Arial, Helvetica, sans-serif;
}
#cover {
position: absolute;
width: 100%;
height: 100%;
z-index: 100;
display: none;
background-color: #000;
opacity: .75;
filter:progid:DXImageTransform.Microsoft.BasicImage(opacity=.75);
top: 0px;
left: 0px;
}
#photoAlbum {
position: relative;
z-index: 0;
width: 400px;
}
#photoAlbum img {
width: 20%;
border: 2px solid red;
margin: 8px;
vertical-align: top;
}
.slideControl { color: red; }[/CODE]

This is the full Javascript
[CODE]function findLivePageWidth() {
if (window.innerWidth)
return window.innerWidth;
if (document.body.clientWidth)
return document.body.clientWidth;
return (null);
}

function initSlides() {
objectSlide=document.getElementById('slide');
objectCover=document.getElementById('cover');
objectPhotoSlide=document.getElementById('photoSlide');
}


function showSlide(evt) {
objectPhotoSlide.innerHTML='<img src="' + evt.src +'" id="largePhoto" alt="Large Photo" border="0" />';
objectPhotoSlide.innerHTML+='<p>' + evt.alt +'</p>';
objectLargePhoto=document.getElementById('largePhoto');
livePageWidth = findLivePageWidth();
newLeft = ((livePageWidth/2)-8) - (200);
objectSlide.style.left = newLeft + 'px';
objectSlide.style.display = 'block';
objectCover.style.display = 'block';
}


function hideSlide() {
objectSlide.style.display = 'none';
objectCover.style.display = 'none';
}[/CODE]

The author of the book included a note at the end of this tutorial saying that the code given uses the same jpegs for thumbnails and large photos. If a separate set of thumbnails jpegs is prefered, then all i have to do is apend the line where evt.src is called and put my large photos into a sub directory. That was what I've been trying to do but didn't work.
×

Success!

Help @Gackter spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...