Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > Effing Image gallery
Rhiannanna (Guild Admin) 1/4/2009 11:23 PM EST : Effing Image gallery
Rhiannanna
Posts: 1501
Zomgawsh Poster

am getting increasingly ticked off with this feature.

When  in 'static list' it opens the image and replaces the home page.

When in scrolling gallery the 'pop-up' box starts loading but then nothing happens just loading.


found this*http://www.guildportal.com/Guild.aspx?GuildID=3780&ForumID=22042&TabID=27537&TopicID=7558805*  dont know what to do with it, where to put it.

./sigh

or perhaps its just my images.

Help please


www.the-killer-carebears.co.uk


TopBottom

Rhiannanna (Guild Admin) 1/4/2009 11:32 PM EST : RE: Effing Image gallery
Rhiannanna
Posts: 1501
Zomgawsh Poster

nevermind worked it out, copied it into another of my 'Mysterious boxes' that appear at the bottom of my website pages.


Speaking of mysterious boxes.

I have a mysterious box on my calendar which used to provide images for raids as they were booked. with the release of WOTLK this needs updating and frankly i have no clue how (if you have already updated coding somewhere mottie a link would be great)

Also a while backl on a post of mine you said there was some way of hiding such mysterious boxes. but i'm damned if i can find the post now.

Cheers

./Rhia


TopBottom

Mottie (MVP) 1/5/2009 1:15 AM EST : RE: Effing Image gallery
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi Rhiannanna!

If you want to add the events icons for WotLK, look for your code and add the following (the new code is in blue and I've included the existing code in grey, so you can see where you can add it)
 events.push(["Karazhan|Kara","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Kar.gif"]);
 events.push(["Zul'Aman|ZA","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/ZA.gif"]);
 events.push(["Gruul","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/GL.gif"]);
 events.push(["Mag|Magtheridon","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Mag.gif"]);
 events.push(["Tempest|Eye|TK","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/TK.gif"]);
 events.push(["Serpentshrine|SSC","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/SSC.gif"]);
 events.push(["Hyjal|MH","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/MH.gif"]);
 events.push(["Kazzak|DLK","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/DLK.gif"]);
 events.push(["Doomwalker|DW","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/DW.gif"]);
 events.push(["Black|BT","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/BT.gif"]);
 events.push(["Sunwell|SW|SP","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/SP.gif"]);


 events.push(["Naxx","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Nax2.gif"]);
 events.push(["VoA|Archavon","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/VoA.gif"]);
 events.push(["CoA|OS|Obsidian|Sartharion","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/OS.gif"]);
 events.push(["EoE|Malygos","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/EoE.gif"]);


 events.push(["birthday|Birthday","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/birthday.gif"]);
 events.push(["Fun event|fun event","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/fun.gif"]);
 events.push(["quest|Quest","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/quest.gif"]);
 events.push(["Unk|unk","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/unknown.gif"]);

If you'd like to hide your "Mysterious Box" on each page, you're going to have to add some custom content Box HTML and a little code... the post is here, but I figured you didn't want to mess around with CSS, so I cleaned up the code for you.

Add this code to your footer (or into every Mysterious box), it includes the CSS to hide the mysterious box.

<style type="text/css">
#Mysterious_Box {display:none;}
</style>
<script type="text/javascript">
$(document).ready(function() {
 $("div").each(function() {
  temp = $(this).attr("id").replace(/\s/g,"_");
  if (temp.length > 1) {
   $(this).attr("id", temp);
  }
 });
});
</script>

Then add this HTML into your custom content box HTML (Control Panel > Styles & Colors > in the right panel, look for Content Containers: Left Center Right. Paste the HTML into all three. Check the "Enable?" box and "Save Changes".

<div id="box_$block[title]">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
 <tr>
 <td colspan="5" width="100%">
  <table border="0" cellspacing="0" cellpadding="0" width="100%" style="empty-cells: show">
  <tr>
  <td width="4"><img src="http://www.freewebs.com/tkcimages/contentboxedging/Topeleftcorner.gif" /></td>
  <td style="width:159px;background-repeat: no-repeat;;background-image:url('http://www.freewebs.com/tkcimages/contentboxedging/TLcontent%20area.jpg');text-align: center;align: left;">
   <div class="ContentBoxTitleNoBackground">$block[title]&nbsp;</div>
  </td>
  <td style="background-repeat: repeat-x;background-image: url('http://www.freewebs.com/tkcimages/border%20horizontal%20top.gif');">&nbsp;</td>
  <td align="right" style="background-repeat: repeat-x;background-image:url('http://www.freewebs.com/tkcimages/border%20horizontal%20top.gif');"></td>
  <td width="4"><img src="http://www.freewebs.com/tkcimages/contentboxedging/toprightcorner.jpg" /></td>
  </tr>
  </table>
 </td>
 </tr>
 <tr>
 <td width="4px" valign="top" style="background-image:url('http://www.freewebs.com/tkcimages/contentboxedging/border%20vertical%20left.gif')">
  <img src="http://www.freewebs.com/tkcimages/contentboxedging/feckinTLcorner.gif">
 </td>
 <td class="ContentBoxBody" width="100%"><div style="width: 100%;">$block[content]</div></td>
 <td width="4px" valign="top" style="background-image: url('http://www.freewebs.com/tkcimages/contentboxedging/border%20vertical%20right.gif')">
  <img src="http://www.freewebs.com/tkcimages/contentboxedging/toprightside.jpg">
 </td>
 </tr>
 <tr>
 <td valign="middle" align="right" width="100%" colspan="3">
  <table cellpadding="0" border="0" cellspacing="0" width="100%">
  <tr>
  <td width="22"><img src="http://www.freewebs.com/tkcimages/contentboxedging/shieldcornerleft.gif"></td>
  <td width="100%" style="background-image: url('http://www.freewebs.com/tkcimages/contentboxedging/border%20horizontal%20bottom.gif'); height: 4px; background-repeat: repeat-x"><img src="http://www.freewebs.com/tkcimages/contentboxedging/border%20horizontal%20bottom.gif"></td>
  <td width="22"><img src="http://www.freewebs.com/tkcimages/shieldcorner.gif"></td>
  </tr>
  </table>
 </td>
 </tr>
</table>
<br />
</div>

I also noticed that when you open the options in your Tactical Video's box, the text is black on a black background... try this CSS:

#videoContainer, #videoContainer select { background: #debe84 url(http://www.freewebs.com/tkcimages/parchment-light2.jpg); color:#000; }
TopBottom

Rhiannanna (Guild Admin) 1/5/2009 6:08 AM EST : RE: Effing Image gallery
Rhiannanna
Posts: 1501
Zomgawsh Poster

mottie, as always you are a godsend


*gets to work*


TopBottom

Rhiannanna (Guild Admin) 1/5/2009 7:50 PM EST : RE: Effing Image gallery
Rhiannanna
Posts: 1501
Zomgawsh Poster

*one final request*

Regarding the pop up, is it possible for a previous and next to appear on the pop-up perhaps by the closed button rather than waiting for the scrolling image to flick round to one you havent seen.... or is that a stupid amount of coding


TopBottom

Mottie (MVP) 1/10/2009 3:30 AM EST : Image gallery
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

***********************
This script is outdated!
Please read the next post
on how to change the new
image gallery
***********************

Hi Rhiannanna!

The Facebox popup isn't set up to allow for an easy way to add a previous and next button, but I found another method that should work - modifying the "Image Gallery" itself. I added this code to my "test-site3" so you can check it out.



Put this code into a free form text/HTML box on the page with yourimage gallery or add it to your footer (Control Panel > Style &Colors > Footer)

The Code

<style type="text/css">
#grpSlides {
 height: 170px;
 width: 152px;
 margin: 4px auto;
}
#slideBox {text-align:center;}
#slideDescription {font-size:14pt;}
</style>

<script type="text/javascript">
$(document).ready( function() {
 $("img[title*='- Click to advance to the next image.']").each(function(){
 $(this).attr("title",$(this).attr("title").replace(" - Click to advanceto the next image.","")).parent().attr("target","").facebox();
 })
 var nextImg = '&gt;';
 var prevImg = '&lt;';
 var openGallery = 'Open Gallery';

$('a[id*="_lnkFullGallery"]').html(openGallery).parent().wrap("<div id='slideBox'></div>");
 var galleryLink = '<a href="#" id="slidePrev">'+prevImg+'</a> ' + $("#slideBox > span").html();
 galleryLink += ' <a href="#" id="slideNext">'+nextImg+'</a><div id="slideDescription"></div>';
 $("#slideBox").html(galleryLink);
 $('#grpSlides').unbind().cycle({
  fx:      'fade',
  speed:   'fast',
  timeout: 6000,
  next:    '#slideNext',
  prev:    '#slidePrev',
  after:   slideDes
 });
})
function slideDes() {
 $('#slideDescription').html($(this).find('img').attr('title'));
}
</script>

Customizing

  • The CSS to control the appearance of the image gallery & description was added. Modify it to your liking, otherwise there really isn't anything to change except the description font size (in red).

  • You can modify or replace the text for the next image ("&gt;") or previous image ("&lt;") in the code (in blue), these can also be replaced with an image if you desire, just include the entire image tag as follows.

     var nextImg = '<img src="my-next-image.jpg">';
     var prevImg = '<img src="my-prev-image.jpg">';

  • Change the message "Open Full Gallery" with what ever you want by editing the openGallery variable text in blue:

     var openGallery = 'Open Gallery';

  • If you don't want to include the image description, then add a "//" in front of the line in green. This comments out that line so it is ignored.

  • The image gallery script also allows you to have different effects... the standard effect is "fade", but you can change this to others, including:

    • blindX
    • blindY
    • blindZ
    • cover
    • curtainX
    • curtainY
    • fade
    • fadeZoom
    • growX
    • growY
    • scrollUp
    • scrollDown
    • scrollLeft
    • scrollRight
    • scrollHorz
    • scrollVert
    • shuffle
    • slideX
    • slideY
    • toss
    • turnUp
    • turnDown
    • turnLeft
    • turnRight
    • uncover
    • wipe
    • zoom

    There are numerous other effects you can try out, but be careful... check out the other things you can do here at the plugin page.

  • The "timeout" variable (in red) adjusts the time between images in the slide show (time is in milliseconds, 6000 = 6 seconds).

    timeout: 6000,
    Edited (1/14/2009): Fixed the facebox image popup. And did a major revision on the code above, I didn't add a new post since the older version didn't look as "clean" to me - YAY for OCD!
    Edited (1/17/2009): Fixed this code to work with the jQuery box... sorry it's a pain, but it's the only way this will work now.
    Edited (1/19/2009): LOL ok back to the original version... no more jQuery box!
    TopBottom

    Mottie (MVP) 1/14/2009 5:02 AM EST : RE: Image gallery
    GuildPortal MVP
    Mottie
    Posts: 3883
    Zomgawsh Poster

    Bump - The code above was revised to fix the pop up image problem and the appearance was cleaned up by wrapping the image navigation buttons around the "open full gallery" link.
    TopBottom

    Mottie (MVP) 1/17/2009 8:00 AM EST : RE: Image gallery
    GuildPortal MVP
    Mottie
    Posts: 3883
    Zomgawsh Poster

    Bump again... modified the code so it now works with the new custom jQuery Code box
    TopBottom

    Eph (MVP) 4/12/2009 4:19 AM EST : RE: Image gallery
    GuildPortal MVP
    Eph
    Posts: 596
    Zomgawsh Poster

    I really liked the way this code worked, but with the "improvements" by GP It's no longer working right. Got any magic to fix this ohh great and wise Mottie??? 
    TopBottom

    Mottie (MVP) 4/12/2009 4:58 PM EST : Image gallery - updated
    GuildPortal MVP
    Mottie
    Posts: 3883
    Zomgawsh Poster

    Modifying the "New" Image Gallery

    Well the previous post about modifying the image gallery no longer applies as the code was completely changed... the "jQuery cycle" addon is no longer being used, so you can't change the type of fadeout or the timing between images. On a positive note, it does automatically make the image open in a facebox popup now and it shows the image description as well.



    Put this code into a free form text/HTML box on the page with your image gallery or add it to your footer.

    The Code
    <script type="text/javascript">
    $(document).ready(function(){
     var nextImg = '&gt;';
     var prevImg = '&lt;';
     var openGallery = 'Open Gallery';

     $("a[id*='lnkFullGallery']").html(openGallery).wrap("<div id='slideBox'></div>");
     var prevLink = '<a href="javascript:pickImage(false)">'+prevImg+'</a> ';
     var nextLink = ' <a href="javascript:pickImage(true)">'+nextImg+'</a>';
     $("#slideBox").prepend(prevLink).append(nextLink).parent().css('margin','');
    })
    function pickImage(nxt) {
     galleryPaused = true;
     var tmp = $("#imgCaptionDiv").html();
     var indx = 0;
     var imglen = imgList.length-1;
     for (k=0;k<imglen+1;k++){
      if (imgDescList[k]==tmp) indx = k;
     }
     if (nxt) { indx++ } else { indx-- }
     if (indx > imglen) indx = 0;
     if (indx < 0) indx = imglen;
     showGalleryImage(imgList[indx].toString(), imgDescList[indx].toString());
    }
    var showGalleryImage = function(sGalleryImgPath, sDescription){
     imgHolder.fadeOut('2500', function(){
      imgHolder.attr("src", sGalleryImgPath);
     imgHolder.bind("click",function(){jQuery.facebox('<center><imgsrc="'+sGalleryImgPath+'"><br><br><divclass="desc">'+sDescription+'</div>') });
      imgHolder.parent().attr("href", "javascript:void(0);");
      jQuery("#imgCaptionDiv").html(sDescription);
      imgHolder.fadeIn('1500', function() { } );
     });
    }
    </script>
    Customizing

    • You can modify or replace the text for the next image ("&gt;") or previous image ("&lt;") in the code (in blue), these can also be replaced with an image if you desire, just include the entire image tag as follows.

      var nextImg = '<img src="my-next-image.jpg">';
      var prevImg = '<img src="my-prev-image.jpg">';
    • Change the message "Open Full Gallery" with what ever you want by editing the openGallery variable text in blue:

      var openGallery = 'Open Gallery';

    • I updated this script to replace the image popup from opening inside an editor window (which has a white background) to opening in a facebox window. If you only want that code, then read this post. Otherwise there is no change except you can use CSS to style the image description:

      #facebox .desc { color:#ffffff; font-weight:bold; font-size:18px; }
      #slideBox, #imgCaptionDiv { margin:0 auto; text-align:center }
    Edit(7/26/2009): Updated the code to replace the editor window popup with afacebox popup. Included CSS that will add style to the image caption.
    Edit (7/28/2009): Fixed an error in the code.
    TopBottom

    Admins Online
    There are   members online.
    So-and-so has logged on!
    %title%
    %message%