Not signed in (Sign In)

Vanilla 1.1.5a is a product of Lussumo. More Information: Documentation, Community Support.

Please sign in or apply for membership to remove the ads

General Support: Displaying Comparisons

Bottom of Page

1 to 20 of 20

  1.  
    • CommentAuthorchewbears
    • CommentTimeMar 27th 2008
     
    The topic might seem a little off, but I have been working to make plogger have a comparison function. I am using it to display Hurricane photos past and present and wanted a feature that had the ability to search through the same or different collections on the same page ultimately arriving at the intermediate thumb nail one on top post hurricane and on on bottom pre hurricane.

    By duping some of he code in the I am able to have this split screen set up, however I am falling short of making the top independent of the bottom. This is stemming from HOW the php calls the index.php

    See I am making Comparison.php which then goes through the same functions of gallery.php use_file commands etc, BUT I can not find out what I change in the functions to make the pages look to comparison.php and no index.php
    •  
      CommentAuthorsidtheduck
    • CommentTimeMar 27th 2008
     
    chewbears,

    If you are trying to swap out "comparison.php" for "gallery.php" (using the same files etc.), you just have to specify that in the "index.php" (or whatever file you're calling the includes from).

    Basically, in index.php you have the following line:
    <?php require("gallery.php"); ?>
    just swap it out with your doppleganger:
    <?php require("comparison.php"); ?>
    That should do it for you!
    • CommentAuthorchewbears
    • CommentTimeMar 27th 2008 edited
     
    Comparison.php for simplicity is :

    <head>
    <?php the_gallery_head(); ?>

    </head>

    <body>
    <?php the_gallery(); ?>

    </body></html>


    <body>
    <?php the_gallery(); ?>

    </body></html>

    if I am on comparison.php and then click a collection I am taken to .../plogger_test_collection this page no longer has the duped pages on top and bottom, but if I use index.php with the above code a everything is duped no matter what I click on. I am wondering how I tell the use files (collections, albums, etc) that I want them to look at comparison.php and not index.php

    I need to figure out how its being called so that when I match gallery1 and gallery 2the work independent of each other. A new page will load but the top stays the top and the bottom the bottom, this way I get a comparison of two intermediate pictures in the end.

    For the "comparison" effect I am going for I am beginning to think Java is the way to go but with Java I do not know where to begin to use this php in plogger to work to the effect I am looking for.
    •  
      CommentAuthorsidtheduck
    • CommentTimeMar 27th 2008 edited
     
    Can you provide a link so we can see what you are trying to accomplish?
    • CommentAuthorchewbears
    • CommentTimeMar 28th 2008
     
    I am sorry Sid : ( I work for a government agency so I really can not show you what I have.

    I want to be able to display the same slideshow twice on each page. I want them to work independent of each other. So that someone can click on one slideshow and not change the position of the above slide show. I need to be able to achieve this so scientists can come and analyze the slides (top/bottom) in order to compare pre and post hurricane slides.

    Let 1c-5c be a slide a number within a collection, a + number is a slide with an album and i + a number is the intermediate slide. So see below for how I want my site to look = P hope this helps.


    1c 2c 3c 4c 5c
    ----------------
    1c 2c 3c 4c 5c

    next page

    1c 2c 3c 4c 5c
    ----------------
    1a 2a 3a 4a 5a

    next page

    1c 2c 3c 4c 5c
    ----------------
    4i

    Then the user weeds through the top half of the slides to get to 5i for example.

    Does this help?
    •  
      CommentAuthorsidtheduck
    • CommentTimeMar 28th 2008
     
    I think I am finally understanding what you would like to do (maybe). Just understanding the logistics of it, is the top "set" always there for a "base level" link (like a header? When you click on the top links, it changes the bottom links?) to the collections or are you looking to have 2 completely independent slideshows (when you click the top links it changes the top and not the bottom and vise versa)?

    If it is a "header" you can add some code to your index.php to grab the collections as a header link and put it at the top.

    If it is the completely separate slideshows, the "easy-way-out" is to use frames or iframes, but a fancier way would be to us mootools, jQuery, or prototype to use AJAX functions to call and update two separate divs (top and bottom).

    If I get some time, I can try to do a quick mock-up of the two options above and let you look at them as an example. If you understand my attempts at descriptions and know which route you would like (independent slideshows vs. fixed header), let me know so it can save me some coding time.
    • CommentAuthorchewbears
    • CommentTimeMar 28th 2008
     
    I think you have it. I thought about iframes but it is a little on the ugh ugly side of coding for me. I don't like the way frames work and think there old fashion.

    I want " 2 completely independent slideshows (when you click the top links it changes the top and not the bottom and vise versa)?"

    If you can get me started on this I would greatly appreciate when we publish it to the public I can make sure to mention your help : P
    •  
      CommentAuthorsidtheduck
    • CommentTimeMar 28th 2008 edited
     
    chewbears,

    I think I may have what you are looking for. Over lunch I did a quick mock-up using jQuery (mootools and prototype will work similar as well). Is this what you were thinking? -> Comparison

    The code of comparison.php (that you need) is as follows:

    <head>
    <?php the_gallery_head(); ?>
    </head>

    <body>
    <div id="compare1">
    <?php the_gallery(); ?>
    </div>
    <div id="compare2">
    <?php the_gallery(); ?>
    </div>
    </body>

    Download jQuery from the jQuery site, upload it to your theme folder, and then add this code to head.php in your theme or in the head tags of comparison.php:

    <script type='text/javascript' src='<?php echo THEME_URL ?>jquery-1.2.3.js'></script>
    <script type='text/javascript'>
    $(document).ready(function() {
    compare("#compare1");
    compare("#compare2");
    });
    function compare(target){
    $(target + " a")
    .click(function(){
    compareAJAX(this.href,target);
    return false;
    });
    }
    function compareAJAX(url,target){
    var plog = url.split("?");
    $.ajax({
    type: "GET",
    url: "index.php",
    data: plog[1],
    cache: false,
    success: function(html){
    $(target + " #wrapper").replaceWith(html);
    compare(target);
    }
    });
    }
    </script>

    Then, just modify your theme as you see fit. It works for most of the links (except the link to the full image) and you will need to keep your index.php as is (since comparison calls index.php through AJAX). The search will not work (AFAIK), so you may have to play around with which features you keep in your comparison theme and which you just want to take out. Let me know if you run into any troubles!
    • CommentAuthorchewbears
    • CommentTimeMar 31st 2008 edited
     
    EDIT: Somehow in editing the other stuff got deleted

    my comparison.php is:


    <?php require("gallery.php"); ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
    <?php the_gallery_head(); ?>
    </head>

    <body>
    <div id="compare1">
    <?php the_gallery(); ?>
    </div>
    <div id="compare2">
    <?php the_gallery(); ?>
    </div>
    </body>

    and head.php is

    <link rel='stylesheet' type='text/css' href='<?php echo THEME_URL ?>/gallery.css' />
    <script type='text/javascript' src='<?php echo THEME_URL ?>dynamics.js'></script>
    <script type='text/javascript' src='<?php echo THEME_URL ?>jquery-1.2.3.js'></script>
    <script type='text/javascript'>
    $(document).ready(function() {
    compare("#compare1");
    compare("#compare2");
    });
    function compare(target){
    $(target + " a")
    .click(function(){
    compareAJAX(this.href,target);
    return false;
    });
    }
    function compareAJAX(url,target){
    var plog = url.split("?");
    $.ajax({
    type: "GET",
    url: "index.php",
    data: plog[1],
    cache: false,
    success: function(html){
    $(target + " #wrapper").replaceWith(html);
    compare(target);
    }
    });
    }
    </script>


    When I go to comparison.php nothing shows up?
    •  
      CommentAuthorsidtheduck
    • CommentTimeMar 31st 2008 edited
     
    I forgot to add that because my code uses jQuery, you have to download jquery-1.2.3.js from the jQuery site and upload it to your theme folder. I edited my post above in case other people are trying the same thing. Sorry 'bout that.
    • CommentAuthorchewbears
    • CommentTimeMar 31st 2008 edited
     
    Sid, I had the file in my default theme folder. Have you changed anything to the index.php, or anything? I am still a little weary on what exactly is suppose to be coded into comparison.php. I looked extensively on your sites example. I see you are running comparison.php in the same way that index.php runs, but I just feel my comparison.php is wrong.

    If I copy the index.php and rename it comparison.php the page works, but when I try to navigate past the album level it just dups the header over and over again. Any thoughts? I think this is because now comparison.php contains <?php require("gallery.php"); ?> which then is redrawing the gallery with 2 headers and it not allowing the website to work as intended.

    I am just so happy to know that the solution is so close :P

    edit: could you post the complete (or as complete as possible) contents of your comparison.php (and if any changes were made to index.php those changes as well)
    •  
      CommentAuthorsidtheduck
    • CommentTimeMar 31st 2008 edited
     
    Sure,

    comparison.php:
    <?php require("gallery.php"); ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xml:lang="<?php echo $language; ?>" lang="<?php echo $language; ?>" xmlns="http://www.w3.org/1999/xhtml">

    <head>
    <?php the_gallery_head(); ?>
    <script type='text/javascript' src='<?php echo THEME_URL ?>jquery-1.2.3.js'></script>
    <script type='text/javascript'>
    $(document).ready(function() {
    compare("#compare1");
    compare("#compare2");
    });
    function compare(target){
    $(target + " a")
    .click(function(){
    compareAJAX(this.href,target);
    return false;
    });
    }
    function compareAJAX(url,target){
    var plog = url.split("?");
    $.ajax({
    type: "GET",
    url: "index.php",
    data: plog[1],
    cache: false,
    success: function(html){
    $(target + " #wrapper").replaceWith(html);
    compare(target);
    }
    });
    }
    </script>
    </head>

    <body>
    <div id="compare1">
    <?php the_gallery(); ?>
    </div>
    <div id="compare2">
    <?php the_gallery(); ?>
    </div>
    </body>

    </html>


    index.php:
    <?php require("gallery.php"); ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xml:lang="<?php echo $language; ?>" lang="<?php echo $language; ?>" xmlns="http://www.w3.org/1999/xhtml">

    <head>
    <?php the_gallery_head(); ?>
    </head>

    <body>
    <?php the_gallery(); ?>
    </body>

    </html>
    • CommentAuthorchewbears
    • CommentTimeMar 31st 2008 edited
     
    Man lol, I am getting a wee bit frustrated. Its like being behind a glass window, and you objective is just on the other side. I have copied and pasted your comparison.php and made sure my index.php was like yours. I have your jQuery script loaded into /themes/default

    When I go to comparison.php and click an image it just remakes the my header over and over again : ( Clicking once makes 1 header, twice 2, etc. I am still on the wrong side of the glass : (

    EDIT: Maybe I need to copy your gallery.php???

    EDIT2: I removed my .css and everything. With the default everything I can load the pages but now when I click an image it doesn't do anything? (previously it duped the header.) I am thinking maybe I am messing up the jQuery location or something in that since its not loading. OR like in the first edit my gallery.php with everything is making this problem.
    •  
      CommentAuthorsidtheduck
    • CommentTimeMar 31st 2008 edited
     
    heh, I have no idea. I'll try to make it easier on you. You can download the .zip file here containing a custom "comparison" theme (default theme with all the extras stripped out and the jQuery file installed), my default gallery.php, my default index.php, and my comparison.php. Just upload everything, log in to your admin, activate the "comparison" theme, and try it out! I have no problems unless the jQuery file is not uploaded to the theme folder that I am using.
    • CommentAuthorchewbears
    • CommentTimeMar 31st 2008 edited
     
    Okay.

    I have done everything above. I am getting the same result : ( I click on an album and nothing happens.

    Is there anything else I should have loaded like the jQuery file. I am on a MAMP stack, would this matter. I did some mod rewrites to generate fullsize image watermarks. I have also changed plog-functions to watermark intermediate pictures. None of these to me should effect the out come, but maybe they do. Any thoughts before I re - install plogger and try again?
    •  
      CommentAuthorsidtheduck
    • CommentTimeMar 31st 2008 edited
     
    Are you just using the Beta-3.0 plogger? I have updated to Plogger 3.0-beta.revision 512 but I don't know that it would make any difference. You can download it here (currently revision 516)-> current svn trunk. Also, have you tried clearing your internet cache?
    • CommentAuthorchewbears
    • CommentTimeMar 31st 2008
     
    WORKED!!! Sid, thank you for your continued support. I did a fresh install and it worked! Now I will be able to go step by step through to see what link in the chain was the failure point. Kinda stinks I have to re insert all my mods but this is a big step.
    •  
      CommentAuthorsidtheduck
    • CommentTimeMar 31st 2008
     
    Glad it's working for you!

    Regarding inserting your mods, I personally use WinMerge (open source comparison / merging software). You can check it out and then it will show you line by line comparison of your mods vs. the default install. Good luck!
    • CommentAuthorchewbears
    • CommentTimeMar 31st 2008 edited
     
    Yeah I just figured out that the update was the only thing I was missing. Oh well, got real fimilar with everything I have added again. One thing I was wondering is that I wanted to make a function of the footer. The header keeps duping itself, so I will have to figure out why each time I change levels I get another header to display on the top of the page. One last question in this topic : P I think it is something with <?php the_gallery_head(); ?> For temp purposes I am just htmling the header and footer in with a link to my css

    Is there anyway like you see below, to make a function that uses a footer like head.php generates a header? If I modify footer in this comparison set up it makes a header on the top and bottom gallery I want a more "global" header that is just for the page and not the smaller comparison galleries.


    function the_gallery_head() {
    plogger_head();

    $use_file = 'head.php';
    if (file_exists(THEME_DIR . "/" . $use_file)) {
    include(THEME_DIR . "/" . $use_file);
    } else {
    include(dirname(__FILE__).'/themes/default/'.$use_file);
    }
    }
    •  
      CommentAuthorsidtheduck
    • CommentTimeMar 31st 2008
     
    chewbears,

    Just create your own function:

    function the_gallery_foot() {

    $use_file = 'foot.php';
    if (file_exists(THEME_DIR . "/" . $use_file)) {
    include(THEME_DIR . "/" . $use_file);
    } else {
    include(dirname(__FILE__).'/themes/default/'.$use_file);
    }
    }

    Then just create a file called 'foot.php' in the default and other themes you may use. Then in your main page, call <?php the_gallery_foot();?> where you would like the overall footer to be placed and it will pull in anything you have in 'foot.php'.

1 to 20 of 20

  1.