Log in

View Full Version : JavaScript gallery loading correctly only on first activation


Asgard
11-25-2012, 04:28 PM
Hello everyone !

I am new to these boards so I am sorry if this is posted in wrong section or I do something wrong. Well anyhow this is the issue:

I have uploaded files to my free testing website gustavs.webatu.com - it is going to be a tattoo website. I am not an expirienced coder - just used to making html webpages with tables and few occassional javasripts. Now I have moved away from iframes and moved onto "divs". On most part I can make it work well enough, but I have stumbled upon an issue I can't seem to find a solution to.

Please check my above mentioned website - there is a link "Gallery". The idea is simple - when person clicks on any main menu link (for now only gallery is active), in div with id "contentarea" opens the necessary page, in this case gallery page. I am using galleria as it is simple and is quite enough for my needs. You can see that when you click on the link, the action indeed works fine and gallery opens as it should (sorry for long load times - I have unresized images for now). The problem starts when you click the gallery for the second time. It doesn't matter if you just click on gallery 2 times or browse away to other section and then go back to gallery - the script doesn't load. Do you have any idea what could be the reason of that.

I am using this very old DD script: http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

What can you suggest to me ? Is there something I have done wrong or should I use some other type of script for this ?

This is how my main html looks like:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="author" content="Gustavs Pelecis, SIA LinaGallery">
<meta name="keywords" content="Tattoo, Tetovējumi, Tetovēšana, Tetovēšana Liepāja, Tattoo Emporium, Lina Freimane Tattoo, Līnas Freimanes tetovēšanas studija, Lina Freimane Tattoo Emporium, Tattoo Liepaja, Tetovējumi Liepāja">
<title>Lina Freimane Tattoo Emporium</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/text.css" />
<link rel="stylesheet" href="css/960.css" />
<link rel="stylesheet" href="css/demo.css" />
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
</head>
<body>
<div class="container_12">
<img src="img/index_02.gif" width="960" border="0">
<div class="grid_8" id="contentarea">
<p></p></div>
<!-- end .grid_8 -->
<div class="grid_4">
<img src="img/index_04.gif">
<p><a href="javascript:ajaxpage('test.html', 'contentarea');"><img src="img/index_08.gif"></a>
<img src="img/spacer.gif" width="220" height="10">
<a href="javascript:ajaxpage('test.html', 'contentarea');"><img src="img/index_10.gif"></a>
<img src="img/spacer.gif" width="220" height="10">
<a href="javascript:ajaxpage('11.html', 'contentarea');"><img src="img/index_12.gif"></a>
<img src="img/spacer.gif" width="220" height="10">
<a href="javascript:ajaxpage('gallery.html','contentarea'); loadobjs('galleria/galleria-1.2.8.min.js','galleria.js')"><img src="img/index_14.gif"></a></p>
</div>
<!-- end .grid_4 -->
<div class="clear"></div>
<div class="grid_12">
<p></p>
</div>
<!-- end .grid_12 -->
<div class="clear"></div>
<div class="grid_4">
<img src="img/index_17.gif">
</div>
<!-- end .grid_4 -->
<div class="grid_8">
<p></p>
</div>
<!-- end .grid_8 -->
</div>
<!-- end .container_12 -->
</body>
</html>

* ajax.js is the script from DD Ajax script - I just moved it to external file in order to have cleaner file.


This is the gallery page:

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div id="galleria">
<img src="galleria/images/1.JPG">
<img src="galleria/images/2.JPG">
</div>
</body>
</html>

Can you please suggest me anything to solve this :) ?
Gustavs
jscheuer1
11-26-2012, 08:49 AM
To have a fighting chance of figuring this out I would need to see it live. Do you have it up somewhere or could you put it up somewhere?

In general I can tell you that the gallery script probably should and looks like it could be enabled/initialized each time the content is imported. I can also tell you that as far as AJAX goes, jQuery which I see you're using already is far superior to any DD AJAX script. jQuery's AJAX routines more readily accept a callback function - what you need to perform the gallery init once the imported content arrives. And the loadobjs function of the DD script is practically useless. As you have seen, at best it works once for initialization. Best to just have those scripts on the page ready and waiting for content that uses them to arrive and to initialize them once their content is there.

There are sometimes other ways. Once I see your demo page I'll see what can be done.

Oh, and if you do use a DD script and make it external, you still need to include the credit for it on the page. See:

http://www.dynamicdrive.com/notice.htm

item 4 for more on that.
Asgard
12-04-2012, 01:58 PM
Hello!

Oh, I am sorry about the missing credit for DD. Must have gone missing while I was moving scripts and trying to solve that - will replace it for sure until the site goes live.

As for demo site - here it is http://gustavs.webatu.com

As I have been checking now - it looks like it also depends on cache of page - when I open the page first time outside my own computer the gallery script doesn't work at all - just plain images appears. If I reload it and then open gallery section once more, it loads property (I believe cause of images already been cached), but again fails to load if clicked on gallery once more.

Well anyhow - I believe this all has to do with using DIVs instead of iframe - I am running SimpleViewer gallery on my current website (www.linagallery.lv) which works on tables and iframe - it works fine there. I would love to use the same SimpleViewer flash gallery on my new site, but it always says that "macromedia flash" is missing when loaded in DIV - it works fine if loaded alone.

Mainly I would like to understand how can I run any functions - weather javascript, flash or other when using DIVs - doesn't seem to work with "loadobjs" I am trying. Maybe I am doing something wrong and I do not have much experience with this.

Thank you for any help you can provide.

Gustavs
jscheuer1
12-06-2012, 04:52 PM
Change:


<script type="text/javascript" src="ajax.js"></script>

to:


<script type="text/javascript" src="ajax.js">
/***********************************************
* Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>

Get rid of the loadobjs calls (remove the highlighted):


<a href="javascript:ajaxpage('gallery.html','contentarea'); loadobjs('galleria/galleria-1.2.8.min.js','galleria.js')"><img src="img/index_14.gif"></a>

and put external script tags for /galleria/themes/classic/galleria.classic.min.js and galleria.js directly on the 'top' page after the external script for jQuery (add highlighted):


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="galleria/galleria-1.2.8.min.js"></script>
<script type="text/javascript" src="galleria.js"></script>
</head>
<body>
<div cla . . .

Edit galleria.js, get rid of the highlighted:


// JavaScript Document
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
Galleria.run('#galleria');

In the ajax.js file replace:


function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

with:


function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
document.getElementById(containerid).innerHTML=page_request.responseText;
if(document.getElementById('galleria')){
Galleria.run('#galleria');
}
}
}

There could still be a problem though because your hosting company adds their own version of jQuery to the page for tracking purposes. This is irresponsible as it overwrites your copy (the one from Google actually) and could potentially mess up any scripts that use your copy.

If that happens we can try adding:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="galleria/galleria-1.2.8.min.js"></script>
<script type="text/javascript" src="galleria.js"></script>
<script type="text/javascript">
jQuery.noConflict();
</script>
</head>
<body>
<div cla . . .

The browser cache may need to be cleared and/or the page refreshed to see changes.

There's still a chance this may not work because of that host added script. If so you will either have to turn off their popup and possibly their stat counter as well in order to get it to work. Or use an iframe.