MyBB Community Forums

Rather than using the same off/on images on the index next to each forum (indicating read/unread status), I thought it would be a great idea to designate different off/on images for each forum.

I went out and got a set of icons that that have both grayscale versions (for the "off") and full color versions (for the "on"). I uploaded each off/on image set to its own directory on my server. The directory name would correspond to the fid of the forum.

For reference, here is what a normal forumbit_depth2_forum template would look like (I'm only providing the relevant line):

<img src="{$theme['imgdir']}/{$lightbulb['folder']}.gif" alt="{$lightbulb['altonoff']}" title="{$lightbulb['altonoff']}" class="ajax_mark_read" id="mark_read_{$forum['fid']}" />

To achieve individual on/off images for each forum on the index list, here is what I changed the line to:

<img src="{$theme['imgdir']}/cicons/{$forum['fid']}/{$lightbulb['folder']}.png" alt="{$lightbulb['altonoff']}" title="{$lightbulb['altonoff']}" class="ajax_mark_read" id="mark_read_{$forum['fid']}">

The relevant change to the img src being:

Quote:{$theme['imgdir']}/cicons/{$forum['fid']}/{$lightbulb['folder']}.png

Now, this solution works just fine and displays the proper image when a forum is either read (off) or unread (on).

Here's the problem:

1. User sees the "on" version of the image for a particular forum
   
2. User clicks on the image to "turn it off" and nothing changes
   
3. If the user were to refresh the page, the image does show as off. This indicates that the "click on image to mark as read" feature is working, it just doesn't change the image onclick.
   

Does anyone have any suggestions on what can be done to correct this issue? Other than this small issue, everything is working great and I think this is a great way to consolidate the on/off images with forum images (which usually is only available with a plugin).

Does anyone have any ideas how I can reconcile this?

If this is not possible, I'm thinking about just stripping the AJAX functionality and simply linking the forum icon to /misc.php?action=markread&fid={$forum['fid']}&my_post_key={$mybb->post_code}, but doing this would send the user to forumdisplay once they click it (and they would have to return back to the index which could be a pain).

Final bump.

Does anyone have any suggestions? Any help would be greatly appreciated.

Weird, looking at the javascript it should just change on.gif to off.gif in the image source:

$('mark_read_'+fid).src = $('mark_read_'+fid).src.replace("on.gif", "off.gif");

Just to save me making the changes myself do you have a forum online where I could test it?

Aha!! I think you've answered my question, the javascript calls for .gif, while my images are .png!

Edit: By changing the file extension in the js file, it completely fixes all the problems.

Thank you, thank you, thank you! Matt, you saved me days of headache! Cheers!