about rotating header images

This is an open forum for any mojoPortal topics that don't fall into the other categories.

This thread is closed to new posts. You must sign in to post in the forums.
6/25/2010 9:18:42 PM
Gravatar
Total Posts 147
Download Free Mojo Skins http://crypticsites.net

about rotating header images

Hi Joe -- some time back (in 2009 according to the thread I was reading) you posted this:

I've made a preview of the next release available for anyone who would like to get the new features early and help test for the official release.

Its available now (only for MS SQL) on our Novell Forge Download Page, mojoportal-2-3-1-8-preview-mssql-deploymentfiles.zip

Whats New?

New Side Show with transition effects built into the Html Content Feature making it easy to animate image and content rotation.

The andreasvicklund-02-alt1 skins also shows how to rotate content in the skin.

 

Given that far newer versions are now available (I'm using 2.3.4.3 from the MS web app gallery, and I think there is a later release than that, maybe more than one), I'm guessing this is now available -- I see the andreasvicklund-02-alt1 skin, and love the rotation effect, don't really care for the white background, so it's not really suitable as a starting point to make a customized version, I'd have to change literally every color in the CSS file in order to make a dark-bg site out of it -- so what I need to know is this:  can the code that handles the rotation in layout.Master of that skin simply be lifted out into another skin's layout.Master?  Is there anything else involved, any other settings or code that needs to be copied?  The exact code I'm referring to is:

<div id="wrapheader">
        <portal:SiteTitle id="SiteTitle" runat="server"></portal:SiteTitle>  
        <portal:SlidePanel id="spanel1" runat="server" CssClass="rotatecontainer">
        <portal:SkinFolderImage ID="imgs1" runat="server" ImageFileName="head1.jpg" CssClass="rotateitem" AlternateText=" " />
        <portal:SkinFolderImage ID="imgs2" runat="server" ImageFileName="head2.jpg" CssClass="rotateitem" AlternateText=" " />
        <div class="rotateitem">
        <asp:Image id="img4" runat="server" CssClass="floatrightimage" AlternateText=" " Height="60" ImageUrl="~/Data/logos/mojothumb.jpg" />
        <p>lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor
        lorem ipsum dolor  </p>
        </div>
        <portal:SkinFolderImage ID="imgs3" runat="server" ImageFileName="head3.jpg" CssClass="rotateitem" AlternateText=" " />
        
        </portal:SlidePanel>
    </div>

 

I've located the pertinent CSS in the style.css, which is so nicely commented to make it easier for us.  I just need to know if copying that scrap of code shown above (plus the attendant CSS in style.css) is all I need to worry about, or if there's more to it.  I've studied that asp.net tutorial (mentioned in my last post a few days ago) to some degree, so the code doesn't look as foreign to me as it did at first, I can kinda figure out what's going on with it, but I'd be vastly overstating the case to say I really have a grasp of it yet.

thx!!

Andria

6/26/2010 6:19:28 AM
Gravatar
Total Posts 18439

Re: about rotating header images

Hi Andria,

You are exactly right! See, you're already good at figuring this stuff out.

Actually the only part you need from layout.master is this, you don't need the whole wrap header div:

<portal:SlidePanel id="spanel1" runat="server" CssClass="rotatecontainer">
        <portal:SkinFolderImage ID="imgs1" runat="server" ImageFileName="head1.jpg" CssClass="rotateitem" AlternateText=" " />
  <portal:SkinFolderImage ID="imgs2" runat="server" ImageFileName="head2.jpg" CssClass="rotateitem" AlternateText=" " />
  <div class="rotateitem">
  <asp:Image id="img4" runat="server" CssClass="floatrightimage" AlternateText=" " Height="60" ImageUrl="~/Data/logos/mojothumb.jpg" />
  <p>lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor
lorem ipsum dolor </p>
</div>
<portal:SkinFolderImage ID="imgs3" runat="server" ImageFileName="head3.jpg" CssClass="rotateitem" AlternateText=" " />
</portal:SlidePanel>

basically that <portal:SlidePanel just wires up the jQuery plugin for you and any top level html elements inside it become slides. The slides can be pretty much any html element but typically images or paragraghs would be used. The <portal:SkinFolderImage just makes it easy to use images from the current skin folder, it automatically resolves the base path so you can just put the file name of the image. Raw <img src... elements could also be used there but would require you to enter either the full url or the full relative url relative to the root of the web site.

Best,

Joe

6/26/2010 6:23:50 AM
Gravatar
Total Posts 18439

Re: about rotating header images

Notice also that we have this integrated into the Html content feature as well. If you go into the settings and enable slide show it will make any top level html elements in your content into slides. There is also some additional info if you click the help links in the settings for the Html feature. There are a number of settings for configuring the slide show and the help links next to them have some additional documentation about the settings.

Best,

Joe

6/26/2010 12:20:27 PM
Gravatar
Total Posts 147
Download Free Mojo Skins http://crypticsites.net

Re: about rotating header images

Awesome!  Thanks, Joe!  The main reason I included that wrapheader div is that I'm (at the moment) mainly interested in setting up a similar thing in a header, and wanted to make sure that the CSS for the header stays intact -- if I had a white-bg site in mind, I'd just customize that skin, but I always prefer dark backgrounds, and the only place I know of that automatically changes the text color to stay readable when you change the bg -- is Artisteer!

This thing really is awesome -- but I had to step away for a few days to work on a Joomla template for a book review site I'm turning over to my son -- he doesn't share my regard for dark backgrounds, but he also doesn't have a clue how to make a webpage, template, or anything else -- so of course, MOM gets to do it for him! (that seems to be the actual purpose of moms -- doing FOR the youngun too stubborn to do for himself!)  cheeky

Thanks!

Andria

6/26/2010 1:50:39 PM
Gravatar
Total Posts 147
Download Free Mojo Skins http://crypticsites.net

Re: about rotating header images

I just remembered one other thing I wanted to ask, regarding this:  about including a file to hold the rotation code, instead of having it hardcoded in the layout.Master.  I'm familiar with the way that this works in php, somewhat less so with SSI inclusions (I never can seem to get the path right, with the SSI kind), and I'm wondering if ASP.NET has something of that kind -- I'm sure it must, but not sure how to code it.  By doing it with a file inclusion, I could leave a layout.Master file fairly small, and not worry about having to update it if I wanted to update the header -- just update the included file, or create a new one and change the inclusion in layout.Master.

Is this possible, and if so, how?

Thx much!

Andria

6/27/2010 6:58:55 AM
Gravatar
Total Posts 18439

Re: about rotating header images

Hi Andria,

This question or variants thereof come up often enough that I decided to write a documentation page rather than just answer directly here in the forums.

So for your reading enjoyment, this new article should explain how to do what you want to do.

http://www.mojoportal.com/usercontrols-as-include-files.aspx

Best,

Joe

6/27/2010 10:29:34 AM
Gravatar
Total Posts 147
Download Free Mojo Skins http://crypticsites.net

Re: about rotating header images

That is awesome, Joe; thank you so much!  I knew these control things were fundamental, from first glance, and the more I learn, the more true that seems to be!  Now I just gotta learn to build them -- and I think it's a lot like when I learned HTML; I can't just read it, if I want to really get it, I need to write it myself, test it out, fiddle around with it and see what works and what doesn't.

Thanks!  You rock!

Andria

6/27/2010 1:54:30 PM
Gravatar
Total Posts 147
Download Free Mojo Skins http://crypticsites.net

Re: about rotating header images

Ok, you didn't specify exactly in the excellent docs you wrote, so I thought it worth asking: does the MyControls (for custom controls) folder go into the mojo root, or into sites/1 (or whatever number site it is)?

My gut says in the mojo root, but given my total ignorance, I could certainly be wrong.  surprise

Thx!

Andria

6/28/2010 6:08:41 AM
Gravatar
Total Posts 18439

Re: about rotating header images

Hi Andria,

Trust your gut, your gut is right! and the article even says:

First create a folder beneath the root of the web to keep any custom UserControls organized in one place. For example I created a folder named MyControls, in the folder I created a new text file named HeaderSlideShow.ascx

also anytime you see this kind of syntax in ASP.NET: "~/" that resolves to root of the site as in the example control declaration and in the Page.ResolveUrl function you've seen.

<%@ Register TagPrefix="me" tagName="Slides" src="~/MyControls/HeaderSlideShow.ascx" %>

your gut probably noticed that ~/ even if you didn't see the text in the article ;-)

Best,

Joe

6/28/2010 7:25:23 AM
Gravatar
Total Posts 147
Download Free Mojo Skins http://crypticsites.net

Re: about rotating header images

Yep, I think you're right, I did see that ~ thingie, but was a little unclear on whether it meant the mojo root or the sites/1 root -- now I know! ;)

Ok, now I'm sure you're sick of hearing about this by now, but about the slideshow settings -- when I click the wrench icon next to the first article I posted, I see the settings for the slideshow, but when I change them, it doesn't seem to affect the header -- is there some other way to change the settings, if the slideshow isn't in the content-area?

Thx much!

Andria

6/28/2010 7:47:24 AM
Gravatar
Total Posts 18439

Re: about rotating header images

Hi Andria,

The settings in the Html will only affect the slideshow if used in the Html instance it will not affect your header slide show, I just pointed you there for the help documentation. All the Html feature is doing with those settings is using them to determine what properties to set on the <portal:SlidePanel inside the Html feature.

You can specify settings directly on the control like this:

<portal:SlidePanel id="spanel1" runat="server" CssClass="rotatecontainer" TransitionEffect="fade,curtainX,turnUp,slideY,zoom,pinch,scrollRight" Random="true" TransitionInterval="3000" Speed="1000">

</portal:SlidePanel>

The properties I've shown here are the ones of interest, by default the TransitionEffect is only fade, but you can specify them comma separated as shown above, and the help in the html feature lists the possible transitions.

Best,

Joe

6/28/2010 6:25:34 PM
Gravatar
Total Posts 147
Download Free Mojo Skins http://crypticsites.net

Re: about rotating header images

Again, thank you!  This is marvelous, after so many years of trying to finesse some script or other thru a web interface to slide or fade as desired, where desired -- php was nice after trying to wrestle with perl cgi, but this! -- I can't believe it took me 10 years to find this!  But I guess asp.net hasn't been around for 10 years, and like so many folks, I had that "linux snobbery" going on, figuring it must surely be better, it's not microsoft.  wink

But this is a piece of cake, I'm finding out, despite looking like a train wreck on first glance -- I really was freaking out when I first got on an asp.net server about 3 wks ago, just hysterical -- now I'm seriously considering moving my "home" from my .com to my .net!!

Thank you, thank you! kiss

Andria

7/6/2010 6:56:30 AM
Gravatar
Total Posts 147
Download Free Mojo Skins http://crypticsites.net

Re: about rotating header images

Have no idea what those 2 posts from LeeRain are about, they probably should be deleted as they don't really say anything, just quote what I said.

Now:  I need to use this thing to setup a rotating banner, but frankly I'm stumped.  I see that one of the rotating bits is a bit of HTML, but how would that work when you need to put a link around the image?  The code looks like:

<div class="rotateitem">
<asp:Image id="img4" runat="server" CssClass="rotateitem" AlternateText=" " Height="60" ImageUrl="~/Data/logos/mojothumb.jpg" />
<p>lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor
lorem ipsum dolor </p>
</div>

but where, in that, does the link go?  I'm afraid if I just go ahead and make a standard image link, <a href="thatdomain.com"><img src="thisbanner.png"></a>, after I've already put in the src of the pic in the asp: statement, that it will somehow try to show the banner twice?

Yeah, I have looked at the AdRotator pages in the w3schools.com tutorial, at some length in fact, and I think *maybe* I get it, *somewhat*, but since I know this rotating img thing you showed me works so beautifully, and does that excellent user-defined fade, I'd really like to use it, if it's possible -- I just don't know how or where in the asp: statement to put a link, or how to "word" it, or what.

Linkless but hoping, wink

Andria

7/6/2010 7:13:02 AM
Gravatar
Total Posts 18439

Re: about rotating header images

Hi Andria,

I was wondering about those LeeRain posts. I think it was just a spammer trying top post links to some dating site. I deleted the posts.

I "think" you can wrap it like this:

<a href="http://yourfullyqualifiedurl"><asp:Image id="img4" runat="server" CssClass="rotateitem" AlternateText=" " Height="60" ImageUrl="~/Data/logos/mojothumb.jpg" /></a>

or if that gives any trouble try this:

<asp:Hyperlink id="lnk4" runat="server" CssClass="rotateitem" ImageUrl="~/Data/logos/mojothumb.jpg" NavigateUrl="~/yoururl" />

note that ids must be unique if you add more than one.

Hope it helps,

Joe

7/6/2010 10:42:18 AM
Gravatar
Total Posts 147
Download Free Mojo Skins http://crypticsites.net

Re: about rotating header images

Hmm.  Well, I tried the first way; not only did it not work, for some reason it seems to have completely broken the CSS layout.  Not sure why.  So I'll have to drop back and punt, re-upload an entirely virgin design without any of this rotating stuff, to make sure the page is in proper layout -- I swear, the page looked great last night, then I got up this morning and started on this rotating banner wild hair, and now it's broken.  *sigh*

Once I get it looking right again, I'll try that second way, see if that does any better.

I believe you're right about the spammer, which is why I said nothing about it when he first did it -- they're like hyperactive kids, paying attention to them just makes them worse! wink

 

Thx!

Andria

7/6/2010 10:49:49 AM
Gravatar
Total Posts 18439

Re: about rotating header images

It appears to break the CSS if an error happens because if the syntax in your usercontrol is not right an error happens and then it can't load the layout.master from your skin so it falls back to a different one and that is what makes it seem like the style is messed up. There is probably errors in the log that may give a clue about the error in your UserControl. Like 2 controls with the same id or something like that can cause an error. Probably the second way is the way to go.

Hope it helps,

Joe

7/6/2010 12:43:45 PM
Gravatar
Total Posts 147
Download Free Mojo Skins http://crypticsites.net

Re: about rotating header images

Well, that last little tidbit regarding the behavior on error causing the CSS breakage, and how to find the error in the system log, did the trick -- that first bit of code actually does work exactly as shown, once I got the stupid ID right! (I went over the URLs for the links and banners so carefully, and completely overlooked that my last copy/paste had left the imgs3 ID duplicated on the 4th banner! ARGH!)

So, I may at some point try out that 2nd example of coding the banners, but for now, the first way is in fact working -- check it out, http://mojo.crypticsites.net/home.aspx -- WITH rotating banners!  That is just sweet, no extra "extension" or module or whatnot needed, just the asp.net code!  I am plumb tickled pink about it.

 

And that reminds me, I wanted to find out if there is a way to change the default URL in that top-most menu, the one that mojo provides -- right now, the default home url is http://mojo.crypticsites.net but the only way to trigger the artisteer "home" button to appear in its active state is if you're on that url I used up above, home.aspx.  I've looked over the various mojo files to some extent, but much of that exploring was without a real sense of what exactly I was looking for, and although I'm sure the file is there somewhere, where I could edit that URL, for the life of me I can't find it.  Gimme a hint?

Thx!!

Andria

7/6/2010 1:54:00 PM
Gravatar
Total Posts 18439

Re: about rotating header images

Hi Andria,

Your site is looking good!

The issue with the menu highlighting seems to me like a bug in the artisteer script.js file. I was able to produce the same problem with the artisteer-24verticalmenu3 skin that is included with mojoPortal. Same symptom, if the url is / it was not highlighting but when you click the home page it would highlight.

I found that by editing the script.js file I could fix the issue by commenting out 1 line of javascript.

Look in the script.js file in the function shown here:

function artVMenu() {
    var menus = artGetElementsByClassName("art-vmenu", document, "ul");
    for (var k = 0; k < menus.length; k++) {
        var vmenu = menus[k];
        vmenu.uls = vmenu.getElementsByTagName("ul");
        vmenu.items = vmenu.getElementsByTagName("li");
        vmenu.alinks = vmenu.getElementsByTagName("a");

        for (var x = 0; x < vmenu.items.length; x++) {
            var li = vmenu.items[x];
            li.className = li.className.replace(/active/, "").replace(" ", " ");
            for (var s = 0; s < li.childNodes.length; s++) {
                var ch = li.childNodes[s];
                if (!(ch && ch.tagName)) continue;
                if (String(ch.tagName).toLowerCase() == "a") {
                    if (ch.href == window.location.href)
                       vmenu.active = li;
                    li.a = ch;
                }
                if (String(ch.tagName).toLowerCase() == "ul")
li.ul = ch;
//ch.className = ch.className.replace(/active/, "").replace(" ", " ");
}
}
if (!vmenu.active) return;
if (vmenu.active.ul) vmenu.active.ul.className += " active";
var parent = vmenu.active;
while (parent && parent != vmenu) {
parent.className += " active";
if (parent.a) parent.a.className += " active";
parent = parent.parentNode;
}
}

Notice specifically this line:

//ch.className = ch.className.replace(/active/, "").replace(" ", " ");

I added the  // at the beginning of that line to comment it out. Then clear your browser cache and refresh the page to be sure it reloads the javascript

Commenting that line out fixed it for me and did not seem to produce any side effects that I can see.

Hope it helps,

Joe

7/6/2010 6:40:57 PM
Gravatar
Total Posts 147
Download Free Mojo Skins http://crypticsites.net

Re: about rotating header images

Hmm, that *kinda* worked, but not completely; it allows the child menu entry to display (Norwegian Wood, a skin I made for mojo from one I had made for Joomla, mainly just playing with the page and menu structure -- eventually "skins" will be its own menu entry/page, but right now that one is the only one I've posted for download -- I made this as a child to the Home page just for this purpose, to make sure the buttons and sub-levels are displaying correctly).  However it still isn't triggering it to the "active" state -- there are 3 buttons that will display, passive (the black w/black arrow), hover (black w/orange arrow), and active, which is blue w/white arrow -- if you click the artisteer home button from any point in the site, you'll see the home button in the active state, and the "home" link in the sitemap also uses the home.aspx url, so it also shows the active-state button -- but that home link in the top, mojo-generated menu, is still just the no-file-specified link.  I've looked in admin/Site settings, but don't see anyplace to specify it there, but I seem to recall something along this line in the web.config... I think?  Maybe it was in some other config file, I'm not really sure, but there ought to be some way of getting at that URL in that menu...?

Thx!!

Andria

7/6/2010 10:04:48 PM
Gravatar
Total Posts 147
Download Free Mojo Skins http://crypticsites.net

Re: about rotating header images

It occurs to me that this might be something I need to do at my hosting control panel, setup a hard redirect from http://mojo.crypticsites.net/ to http://mojo.crypticsites.net/home.aspx, so that anytime it finds itself at the first, it will automagically load the 2nd -- will that work?  Or would it screw up mojo?

Andria

7/7/2010 8:46:00 AM
Gravatar
Total Posts 147
Download Free Mojo Skins http://crypticsites.net

Re: about rotating header images

Well, I have managed a solution, a sort of end-run around that Home link at the top always using the no-file-specified URL.

In my hosting control panel, I set the first default files as index.htm and index.html.  In both of those, I setup a META http-equiv redirect:

<META http-equiv="refresh" content="0; url=http://mojo.crypticsites.net/home.aspx">

So, now whenever, on this site, a no-file-specified "http://mojo.crypticsites.net/" URL is encountered, it automatically loads the home.aspx, so that the artisteer Home button is triggered to its active state.

This seems to be the only way to ensure that home.aspx is always the "home" one gets to.

Andria

7/8/2010 7:13:21 AM
Gravatar
Total Posts 18439

Re: about rotating header images

Hi Andria,

Glad you found a solution. If you'd like to zip up your skin and email it to me (joe dot audette at g mail dotcom) maybe I can solve it a better way from the javascript. It is possible that the javascript is not the same from design to design, Artisteer may generate it differently for different designs, so maybe a different fix is needed for your design than the one that fixed it for me.

While the meta redirect works it is not an optimal solution.

Best,

Joe

7/8/2010 12:22:16 PM
Gravatar
Total Posts 147
Download Free Mojo Skins http://crypticsites.net

Re: about rotating header images

I agree, not optimal, but it does work -- except that now the preview/browse feature doesn't work in the site settings page -- oh well, I know what mine look like, and I deleted all but a couple of the ones that came with.  It's probably something so *DOH* that I'll slap myself in the head when I figure it out.  I could send you the zip of the skin, but I find I keep fiddling with it -- all those other CSS files, the gridview stuff.  I wish there was some way to override the gridview css in the skin, other than just scooping up the entire gridview file and inserting it into the skin's css.  A lot, in fact most, of my templates have a dark background, so of course they have lighter type, and most of the backgrounds in the gridview css files are light, so the type barely shows, if at all.  It really would be helpful to either have the various gridview schemes in the skin's css, or overridden somehow in the skin or site settings or page settings, or something. 

Thx!

Andria

7/9/2010 1:16:43 PM
Gravatar
Total Posts 18439

Re: about rotating header images

Hi Andria,

If you are talking about style for the ASP.NET GridView, we have several sets of gridview styles. The css for our gridview themes are configured from the style.config file of the skin, there are several example to choose from in comments in the style.config file, so you can pick a darker one or you can remove ours and include your own.

There may also be some related css in stylemojo.css that could be altered or removed.

Hope it helps,

Joe

7/9/2010 1:19:31 PM
Gravatar
Total Posts 18439

Re: about rotating header images

The reason the skin preview doesn't work is because it is basically using http://yoursiteroot/?skin=x

so since you made index.html the default document it is now pointing to that page instead of the expected default document /Default.aspx

so it is pointing to your index.html page

Hope it helps,

Joe

7/10/2010 1:30:40 AM
Gravatar
Total Posts 147
Download Free Mojo Skins http://crypticsites.net

Re: about rotating header images

Yeah, that's not a huge deal; I had already viewed all the ones that came with, and left a couple of them present in order to study their code for different things, but I don't really need the preview-browse thing as a regular feature -- the ones I put up for download, I create a page for, so I can really see it in action.  Speaking of which, I now have 3 of them available; in fact I came to the forum just now in order to put up a "general notice" for anyone who might be interested in looking at some new designs.  I have 3 more just about ready to publish, then 3 more after that, etc, etc.  And I just keep finding new reasons on top of new reasons to love Mojo; the ease of getting content, ANY content, onto the web, man, it's just miraculous.  This is the by far the easiest, simplest web publishing I've found in 10 years.  Kudos, kudos, and thank you thank you thank you!  To all the fine geeky brainiacs who created this lovely program! kiss

Andria

7/10/2010 9:18:30 AM
Gravatar
Total Posts 18439

Re: about rotating header images

Hi Andria,

If you have skins you would like to share with the community that would be great!

You could post link(s) in the Skins Forum, I'm sure people will like to see them.

Best,

Joe

7/29/2010 3:47:45 PM
Gravatar
Total Posts 39

Re: about rotating header images

Hi there. . .

I just found this post and it works great! However, the TransitionEffect does not work at all. It rotates about every 3 - 4 seconds and it fades. Not matter what I do, it does this. Any reason why, Joe?

Thank you very much!

7/30/2010 10:06:22 AM
Gravatar
Total Posts 18439

Re: about rotating header images

TransitionEffect has nothing to do with the timing, to change the speed of slides set 

TransitionInterval="5000"

it is in milliseconds so 5000 is 5 seconds, the default is 3000 or 3 seconds

Hope it helps,

Joe

8/9/2010 11:33:47 PM
Gravatar
Total Posts 11

Re: about rotating header images

Hi Joe,

I am using about 13 images in the header section and have the setting like this

<portal:SlidePanel id="spanel1" runat="server" CssClass="rotatecontainer" TransitionEffect="fade" Random="true" TransitionInterval="3500" Speed="3500"> 

But when i load the page some of the images do not load in full screen. they just float on the left side of the SlidePanel as a  thumnail. when i refresh the web page they came back in full view. is there any way i can load them always in full screen (fully loaded in the SlidePanel). Thanks  

8/10/2010 6:39:57 AM
Gravatar
Total Posts 39

Re: about rotating header images

Same here, Shoukat...
8/10/2010 11:42:15 AM
Gravatar
Total Posts 18439

Re: about rotating header images

The number and size of images loaded in a page will affect performance. you need to optimize all images for the web to reduce their file size as much as possible and consider using fewer slides or you may encounter issues like this. Probably your image files are very large and they don't load fast enough, combine that with too many of them and it is a recipe for problems. Don't use high resolution images, use a tool like ImageReady to optimize the images.

Hope it helps,

Joe

8/11/2010 8:56:07 PM
Gravatar
Total Posts 39

Re: about rotating header images

Joe,

I've been doing this stuff for years and I've got to tell you. . . I am using only TWO images. And they're optimized using Photoshop CS4 Master Suite. I am having the same problem. First slide loads fine and when it gets to the second (last slide), it loads a small thumbnail sized slide in the top left corner. Then it goes back to the first slide and repeats. . . Not sure why this is happening.

Also, it seems like when the page first loads, my CSS spacing is off, but when I refresh, it displays properly. I can probably figure that out, but I am at a loss as to why the slideshow is doing that.

Any help would be greatly apprecaited. . .

Cheers,

~D

8/12/2010 8:33:15 AM
Gravatar
Total Posts 18439

Re: about rotating header images

you said same problem as shoukat, he was talking about 13 images and for all I know they are large files.

possibly something in your CSS is causing this

without steps to produce the problem one can only guess at possible causes

can you produce the problem on demo.mojoportal.com using the slideshow in the html feature?

8/16/2010 7:51:44 PM
Gravatar
Total Posts 11

Re: about rotating header images

Thanks Joe,

Now i have about six images and each of them is about 90 kb but still i have the same issue. Is there any other option so that i should be able to do the same thing in the master page header (like image gallery slide show).  Any help would be much appreciated. . . Shoukat

8/17/2010 7:29:51 AM
Gravatar
Total Posts 18439

Re: about rotating header images

Hi Shoukat,

An extra 540 kb of payload is a lot of extra weight for a page.

I would try to optimize them further to reduce size or reduce the number of them

There are several different slide show type widgets for jQuery you may need to make a custom solution rather than just use the built in SlidePanel that uses the jQuery cycle plugin. There are other ones including jCarousel and EasySlider. 

I will be giving a presentation on integrating jQuery widgets on August 24 at the online mojoPortal user group. I will specifically be covering jCarousel and maybe also EasySlider. 

One possible solution would be to load the images dynamically by javascript instead of pre-embedding them in the markup, it could make the page seem to load faster because the javascript could run before all the images are loaded. I will show how to do that with jCarousel in my presentation.

Best,

Joe

8/23/2010 8:38:53 AM
Gravatar
Total Posts 39

Re: about rotating header images

Joe,

I still have the same issue, with two (2) images. . . Whenever I load the page for the first time, the slide show shows the second image as a small thumbnail. However, when I refresh, everything displays fine. This happens every time. I am not sure why that is though. . .

Any thoughts? I use the same code as in the example and my CSS is the same as well. . .

Thanks,

~D

8/23/2010 8:41:36 AM
Gravatar
Total Posts 18439

Re: about rotating header images

Is the site located at a public url where I could see it?

8/23/2010 8:50:20 AM
Gravatar
Total Posts 39

Re: about rotating header images

Unfortunately, no. . . it's not. It's strange though. . . I'm not sure why it would work AFTER I hit refresh. It doesn't make sense to me. . .

8/23/2010 8:58:05 AM
Gravatar
Total Posts 18439

Re: about rotating header images

There isn't much I can do to help without seeing the problem and inspecting the rendered markup.

8/30/2010 7:48:35 AM
Gravatar
Total Posts 39

Re: about rotating header images

OK. I figured it out. . . and you may laugh, Joe, or you may want to reach through the screen and smack me. . . You have to specify the height and width for each image in the ASP.net code, not in the CSS. I am not sure why that is. I had the height and width set in the CSS and thought that would work fine, however, it doesn't seem to. But when I set the height and width for each image in the Slider code, it works great!

Thanks!

10/15/2010 3:27:39 PM
Gravatar
Total Posts 156

Re: about rotating header images

Just curious, why is SlidePanel.cs located  in mojoPortal.Web project as supposed to mojoPortal.Web.Controls.  How do you decide what goes into mojoPorta.Web project vs mojoPortal.Web.Controls?

10/16/2010 10:17:37 AM
Gravatar
Total Posts 18439

Re: about rotating header images

Hi,

That is a perfectly reasonable question. The answer is that since I started this project in 2004, over time my ideas, strategies, priorities have changed. In the early days I was more inclined to keep controls in a separate project so they could be used easily outside of mojoPortal but over time I have got to a point where I don't really care about supporting re-use of my controls outside mojoPortal so I have not added new controls to that project in a long time and typically add new controls directly in the main web project. Developers can still borrow control code and modify it to their needs but I have no interest in supporting those controls separate from mojoPortal. Part of the reason is also because supporting multiple sites there are often settings that need to be set according to the site so it is easier to do it in the main web project where we already have references to mojoPortal.Business whereas the controls project does not. You can see examples such as GoogleAnalyticsScript.cs which lives in the controls project but we have to use mojoGoogleAnalytics.cs from the main web to set site specific stuff. Over time I've become less inclined to have to do that kind of thing and more inclined to keep it simple. Really, at some point I'd like to move all the code from mojoPortal.Web.Controls, mojoPortal.Web.Editor and mojoPortal.Net into the main Web project (keeping the namespaces the same as they are just moving them into the main assembly). But there are upgrade considerations that have made me not in a hurry to do that, nothing too difficult but it will require some thought an planning to avoid breaking things.

Best,

Joe

10/16/2010 2:02:23 PM
Gravatar
Total Posts 147
Download Free Mojo Skins http://crypticsites.net

Re: about rotating header images

I'm such a dummy.  I posted a long winded thing here about the new version of Mojo (2.3.5.4) somehow breaking my original rotation control, and it turns out, if you upload the images, it works just fine.  Go ahead and slap me, I deserve it for being such an idiot.  Maybe what I really ought to do is use absolute WWW urls for the images, to avoid this sort of thing in the future.

Anyway, long time no type, how's thangs, the new version looks great -- except the skins from 2.3.4.3 won't work, I had to make a new one based on my original Artisteer HTML template -- but other than that, it seems just peachy.

Andria the moron cheeky

1/8/2012 7:39:15 AM
Gravatar
Total Posts 40

Re: about rotating header images

Joe,

I've been reading through the thread, and I have a couple of questions.

  1. With the changes in the Skins in mojo 2.3.7.6 , is the article http://www.mojoportal.com/usercontrols-as-include-files.aspx still the best practice / most preferred to add a slideshow to the header?
  2. The div structure for header in Layout.Master for the artisteer-31 series skins is vastly different  from skin originally mentioned in this thread. I'm creating a skin based off of one of the artisteer 31 skins provided as covered here, http://www.mojoportal.com/creatingskins.aspx, but I am unclear where in the artisteer 31 head I should add the <me:Slides id="mySlides" runat="server" /> within the head.
  3. Lastly, I'd like to use the CDN jquery and jquery UI in my skin but I want to use a custom theme from theme roller and wonder if there is an article to show me how to do this.
1/8/2012 1:56:38 PM
Gravatar
Total Posts 18439

Re: about rotating header images

Hi,

1. Yes it is still best to encapsulate that kind of funnctrionality into a UserControl and embed the usercontrol into layout.master rather than directly coding the slide show in layout.master.

2. Artisteer doesn't offer support for questions about modifying the designs after they have been exported from Artisteer, and neither do I have any specific detailed advice about it, you'll have to figure out by trial and error where to position the usercontrol and you may possibly need to tweak css. I would say it should work ok as long as you design the header (in Artisteer) with enough room for the slideshow. If I were doing it I would try putting it inside <div class="art-header-inner"> </div> first and if that doesn't produce the right result I'd experiment. You may need a div with a custom css class inside the usercontrol and use positioning.

3. You can include your custom theme in style.config and you can tell mojoPortal not to load the css from the cdn by setting IncludejQueryUI="false" on <portal:StylesheetCombiner in your layout.master file.

Hope that helps,

Joe

1/13/2012 6:53:58 AM
Gravatar
Total Posts 40

Re: about rotating header images

I meant to ask earlier, givent he recent skin changes in mojoportal can you use the andreasviklund-02-alt skin mentioned early on in the post with the latest mojoportal version? Are there changes / additions that need to be made so it works with the latest mojoportal?

1/13/2012 7:24:26 AM
Gravatar
Total Posts 18439

Re: about rotating header images

That skin still is included in the extra-skins.zip. All of the skins in the extra-skins.zip should work.

Best,

Joe

You must sign in to post in the forums. This thread is closed to new posts.