Advanced Search

Results 1 to 4 of 4

Thread: JavaScript gallery loading correctly only on first activation

  1. #1
    Join Date
    Nov 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default JavaScript gallery loading correctly only on first activation

    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/dynamici...jaxcontent.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:
    HTML Code:
    <!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:
    HTML Code:
    <!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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,704
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Nov 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,704
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    Change:

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

    Code:
    <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):

    Code:
    <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):

    Code:
    <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:

    Code:
    // JavaScript Document
    Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
    Galleria.run('#galleria');
    In the ajax.js file replace:

    Code:
    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:

    Code:
    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:

    Code:
    <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.
    Last edited by jscheuer1; 12-06-2012 at 05:55 PM. Reason: add detail
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. IE not loading scroller correctly
    By mbro in forum Other
    Replies: 8
    Last Post: 02-21-2011, 06:09 PM
  2. Javascript PopUp Menu Not Working Correctly
    By groovy1 in forum JavaScript
    Replies: 0
    Last Post: 08-10-2010, 04:26 AM
  3. Resolved Loading JavaScript before page loading?
    By blastbb in forum JavaScript
    Replies: 2
    Last Post: 04-04-2009, 01:31 PM
  4. Activation page
    By vividona in forum PHP
    Replies: 1
    Last Post: 11-13-2008, 10:40 AM
  5. No tab activation on page load
    By kona in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 02-04-2008, 05:06 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •