• Gear
  • Shots
  • Photo Craft
  • Video
  • Wide Angle
  • Support
  • New Stuff
  • More
Support Legacy SmugMug Customization New - JFriend HTML5 Slideshow beta release!

Need some help with your New SmugMug Site?

Dgrin Challenges

Our Challenges moderator has lined up an new set of challenges for you. The Weekly Word Challenge. Get all the details and participate in the conversation Weekly Word Challenge.

Past DSS Challenge Winners, DSS Challenge Rules, and other important DSS Challenge information is here.

Looking for a little challenge? The Dgrin Mini-Challenges are a great way to challenge yourself. Take a moment to look through past winners and find the current Mini Challenge here.

From Around the Net

Enjoy a few of our favorite articles from around the 'net. If you have something you think we should see, post it here and we'll have a look.

Journeys

Landscapes

Sports

 
Thread Tools Display Modes
Page 129  of  184
Old Apr-12-2012, 11:06 AM
#2561
Portraitscouture is offline Portraitscouture
Big grins
Quote:
Originally Posted by jfriend View Post
The only difference between putting the slideshow in the bio and the custom header is that you put the HTML/script code in the custom header instead of the biobox and any CSS you use to control it's positioning would have to be targeted at the custom header instead of the biobox. Do you really want a slideshow in the header of every page?
Yes, its a header. Its smaller than a normal slideshow. What about the code that sais #biobox? do I have to change that to something else?
Old Apr-12-2012, 11:07 AM
#2562
Portraitscouture is offline Portraitscouture
Big grins
this is the code I am refering to

/* make homepage stretchy so slideshow can be larger */
#homepage {width: auto; margin-left: 15px; margin-right: 15px;}
/* format bioBox */
#userBio {text-align: center;}
#bioBox .photo {display: none;}
#bioBox {width: auto !important;}
#bioBox,
#bioBox .boxTop,
#bioBox .boxBottom,
#userBio {border: none !important; background: none !important;}
/* restore width of galleries page */
.galleries #homepage {width: 750px; margin-left: auto; margin-right: auto;}
Old Apr-12-2012, 11:21 AM
#2563
jfriend is offline jfriend OP
Scripting dude-volunteer
Quote:
Originally Posted by Portraitscouture View Post
this is the code I am refering to

/* make homepage stretchy so slideshow can be larger */
#homepage {width: auto; margin-left: 15px; margin-right: 15px;}
/* format bioBox */
#userBio {text-align: center;}
#bioBox .photo {display: none;}
#bioBox {width: auto !important;}
#bioBox,
#bioBox .boxTop,
#bioBox .boxBottom,
#userBio {border: none !important; background: none !important;}
/* restore width of galleries page */
.galleries #homepage {width: 750px; margin-left: auto; margin-right: auto;}
Ignore all that. You won't use it. That's just to position the biobox appropriately for the slideshow. In your custom header, you should put your own div around the slideshow and then apply whatever CSS you need to that div to format it how you want - absolutely no different than if you were putting a static image in the header and needed to position it. You haven't said anything about the format of your header or how the slideshow is positioned in the header so I can't really advise specifically.

Just put this around the slideshow code in your header:

Code:
<div id="myHeaderSlideshow">
slideshow HTML goes here
</div>
Then, you can apply whatever CSS you need to #myHeaderSlideshow.
__________________
--John
Homepage Popular
JFriend's javascript customizations Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
Old Apr-12-2012, 01:10 PM
#2564
Portraitscouture is offline Portraitscouture
Big grins
go to www.portraitscouture.com in Internet Explorer or Firefox.

That is what it used to do but with the chrome update its all messed up now and I am trying to make a new slideshow
Old Apr-12-2012, 01:31 PM
#2565
Portraitscouture is offline Portraitscouture
Big grins
Ok, so i have the new slideshow up, but now I need to make it expand all the way to the black edges and there should be now black space between the slideshow and the links. Please help!
Old Apr-12-2012, 01:31 PM
#2566
Portraitscouture is offline Portraitscouture
Big grins
Also, if someone could advise on how to make it only do the fade transition and not all of the others
Old Apr-12-2012, 01:36 PM
#2567
jfriend is offline jfriend OP
Scripting dude-volunteer
Quote:
Originally Posted by Portraitscouture View Post
go to www.portraitscouture.com in Internet Explorer or Firefox.

That is what it used to do but with the chrome update its all messed up now and I am trying to make a new slideshow
You have some invalid HTML that is reacting differently in different browsers.

For this HTML, move the parts in green to your CSS and delete the parts in red:
Code:
<script>

<div id="myHeaderSlideshow">

#myHeaderSlideshow {width: auto; margin: 0 auto;}

/* format bioBox */

#myHeaderSlideshow {text-align: center;}

#myHeaderSlideshow.photo {display: none;}

#myHeaderSlideshow{width: 190 !important;} 

#myHeaderSlideshow,

#myHeaderSlideshow{border: none !important; background: none !important;} 

/* restore width of galleries page */

.galleries #myHeaderSlideshow{width: 750px; margin-left: none; margin-right: none;}

</script >
<script type="text/javascript">

JF.InsertSlideshowHere({

    galleryURL: "http://www.portraitscouture.com/Flash/Slideshow-2/22403522_gNpDhS#!i=1418665095&k=9GwPwKQ",

    stretchy: "true"}

);

</script>

</div>
__________________
--John
Homepage Popular
JFriend's javascript customizations Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
Old Apr-12-2012, 01:51 PM
#2568
Portraitscouture is offline Portraitscouture
Big grins
The code that was acting up was
<center>
<script>
var ssConfig = {
AlbumID: '22403522',
newWindow: 'false',
transparent: 'true',
showLogo: 'false',
borderColor: 'transparent',
clickToImage: 'false',
showThumbs: 'false',
showButtons: 'false',
crossFadeSpeed: '200'
};
SM.flash.insertSlideshow( 749,190,ssConfig,'transparent');
</script>






NOW I have loaded the new slideshow from this thread but it still isnt fitting the whole black area. How can I fix this? Also, how can I make the transitions only do the fade option?
Old Apr-12-2012, 02:06 PM
#2569
Portraitscouture is offline Portraitscouture
Big grins
Thanks for your help! I figured it out! Yay!
Old Apr-15-2012, 08:15 AM
#2570
phildj2 is offline phildj2
Beginner grinner
I have recently started customising my site pj2.smugmug.com mainly using Andy's Moonriverphotography demo.


I think I followed the instructions but the slideshow does not appear on the homepage under bio - it is just a blank. I have removed the CSS code I thought might apply to the bio under the customisation I have so far done but that has made no difference. What am I doing wrong?

I have read a lot of the posts on this forum but as yet have not found the answer!
Thanks
Old Apr-15-2012, 08:17 AM
#2571
jfriend is offline jfriend OP
Scripting dude-volunteer
Quote:
Originally Posted by phildj2 View Post
I have recently started customising my site pj2.smugmug.com mainly using Andy's Moonriverphotography demo.


I think I followed the instructions but the slideshow does not appear on the homepage under bio - it is just a blank. I have removed the CSS code I thought might apply to the bio under the customisation I have so far done but that has made no difference. What am I doing wrong?

I have read a lot of the posts on this forum but as yet have not found the answer!
Thanks
Start by removing this from the beginning of your top javascript:

<div></div>

It is causing a script error and preventing other scripts from running.
__________________
--John
Homepage Popular
JFriend's javascript customizations Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
Old Apr-15-2012, 09:15 AM
#2572
phildj2 is offline phildj2
Beginner grinner
Thanks John for the quick response. That has allowed the photos to appear - now to play with the options so the images appear bigger.
Old Apr-16-2012, 06:44 AM
#2573
phildj2 is offline phildj2
Beginner grinner
The page is now bigger than the screen
Hi John

The site is now bigger than the computer screen and I have to scroll up to see the links at the bottom of the page.

what is conflicting now? or have I omitted some code?

Thanks
Phil
Old Apr-16-2012, 07:27 AM
#2574
jfriend is offline jfriend OP
Scripting dude-volunteer
Quote:
Originally Posted by phildj2 View Post
Hi John

The site is now bigger than the computer screen and I have to scroll up to see the links at the bottom of the page.

what is conflicting now? or have I omitted some code?

Thanks
Phil
When you set the stretchy option for the slideshow, you asked it to reserve as much space on the screen as it could find which it interprets to be all the rest of the screen space below your header. So, that's what it does. If you have any content below the slideshow, it will get pushed below the bottom of the screen. That is how it is designed. If you want to reserve some space for your footer so it will be visible, then you can set the slideshow option spaceToReserveAtBottom to however many pixels you want to reserve for it. That option is fully described in the slideshow reference documentation.

In your particular case, your slideshow images are not very big because you didn't upload very large images to the gallery. Thus, on a good sized screen, the slideshow reserves a significant amount of space for the slideshow, but your images aren't large enough to take advantage of that space. I would suggest that you either use a fixed height/width for your slideshow with the images you have or keep using the stretchy option and upload much larger versions of your images to your gallery. If you give the slideshow large enough images, it will use Smugmug to auto-scale the iamges to the appropriate size for the available space on screen. That's when this slideshow really has advantages and when it can really show off your images at their best whether on an iPhone screen or a 30" monitor.
__________________
--John
Homepage Popular
JFriend's javascript customizations Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
Old Apr-16-2012, 08:48 AM
#2575
Flashman is offline Flashman
Major grins
Flashman's Avatar
I have been working with Allen on getting my HTML slideshow up, it's up but I see another images flashing behind a new image that comes up, i didn't see that before. Any ideas as to what's causing this. My webiste is blsphotoventures.com click on services and then Weddings. You will see the slide show. It doesn't do it for all the images.

Quote:
Originally Posted by jfriend View Post
The "JFriend HTML5 Slideshow" is now available!

Download site, full documentation (38 pages) and tutorial are here.

[[New Version 1.1.1 released on July 11, 2011]]

Would you be interested in any of these things:
  1. A slideshow that loads 3-10x faster than the Smugmug slideshow. No waiting. Splash screen comes up instantly.
  2. Snazzy slideshow transitions (fades, wipes, reveals, flips, scales, etc...)
  3. A slideshow that has full functionality without Adobe flash. No flash version headaches for your viewers. No flash loading time. No flash install issues.
  4. A slideshow that works in browsers that don't have flash.
  5. A slideshow that automatically sizes itself to a mobile screen and works on Android phones, Android tablets, iPhone, iTouch, iPad, etc...
  6. A slideshow that's fully customizable with more than 50 customization options and further customization with CSS.
  7. A slideshow that can automatically stretch/scale itself to display the largest images possible.
  8. A slideshow that uses the latest and greatest features of CSS3 and HTML5 (when available) to give you a snazzy up-to-date look, but still works on old browsers like IE6 and Firefox 2.
  9. Let me say this again. 100% javascript, CSS and HTML. No Adobe flash.
  10. Color managed slideshow display for accurate color on a color calibrated system in a color-management-capable browser (like Safari or Firefox).
  11. The slideshow can be inserted on any page in your site (homepage, category page, sub-category page, gallery description, etc...) with only a few lines of activation code.
  12. Tested in Firefox (v2-v5), Safari (v4-v5), IE6-IE9, Opera (v10-v11), Android (2+), iPad, iTouch, iPhone, Chrome (v8-12).
If you are interested in any of these great new capabilities, then you may want to explore a new slideshow created just for Smugmug web sites.

Go here to the download site to learn more. There are demo sites, a longer list of features, tutorial and reference documents and, of course, the actual slideshow code to install on your site.

If you have any troubles or questions, just post to this thread and I'll be happy to look into any issues. This is a beta release, but I've been running it on my own Smugmug homepage for a couple months without issue and a lot of other people are now running it. So, I think it's pretty solid - I'm just not going to call it a full release quite yet.

Oh, if you have a chance be sure to check out either of the demo slideshows in either Safari, Chrome, Opera or Firefox 4 (beta). In those new browsers, you'll see the new and cool CSS3/HTML5 slideshow transitions that leverage the latest browser capabilities.

Have at it and let me know how it goes!

P.S. To those who are currently running my stretchy slideshow, this is a replacement for that. The original stretchy slideshow was built on top of the Smugmug Flash slideshow. This new slideshow replaces all that and offers a lot of new functionality.
__________________
http://www.blsphotoventures.com
Old Apr-16-2012, 09:24 AM
#2576
Flashman is offline Flashman
Major grins
Flashman's Avatar
actually, I closed the browser and reopened. Now, it seems to be working fine. Any ideas on how I can give it a little wow to the slideshow? my website is www.blsphotoventures.com
click on SERVICES, then WEDDINGS.



Quote:
Originally Posted by Flashman View Post
I have been working with Allen on getting my HTML slideshow up, it's up but I see another images flashing behind a new image that comes up, i didn't see that before. Any ideas as to what's causing this. My webiste is blsphotoventures.com click on services and then Weddings. You will see the slide show. It doesn't do it for all the images.
__________________
http://www.blsphotoventures.com
Old Apr-19-2012, 07:19 AM
#2577
njphoto is offline njphoto
Big grins
Hi,
Sorry if this has already been addressed, but I'm wondering if this code can be used to create a slideshow in which each image clicks through to a different URL? As in one clicks to a category, one to the about page, one to an external URL... Is it possible to modify this code to do that?
Thanks --
Naomi
Old Apr-19-2012, 12:45 PM
#2578
jfriend is offline jfriend OP
Scripting dude-volunteer
Quote:
Originally Posted by njphoto View Post
Hi,
Sorry if this has already been addressed, but I'm wondering if this code can be used to create a slideshow in which each image clicks through to a different URL? As in one clicks to a category, one to the about page, one to an external URL... Is it possible to modify this code to do that?
Thanks --
Naomi
The slideshow doesn't currently have that capability. It has four different click options, but going to a custom URL for each image isn't one of those capabilities.

It would be possible to set the built-in click handling to "none" and then install your own click handler that would do whatever you wanted or you could modify the existing JF.Slideshow.prototype._OnClick function to add a new click option with your own new code. It's unclear to me how you'd know which URL to go to for a given image in this modified click handler. A problem with modified the existing slideshow code is that it's then a lot harder to accept upgrades when I fix bugs or introduce new features.
__________________
--John
Homepage Popular
JFriend's javascript customizations Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
Old Apr-19-2012, 01:15 PM
#2579
T. Bombadil is offline T. Bombadil
Major grins
T. Bombadil's Avatar
Hello John,

I LOVE this slideshow you've built.

Stupid question: Any idea why mine is constrained to a particular width (landscape photos are cropped to that width, so they look like portrait orientation - brucejordan.smugmug.com ).

I would be grateful for any suggestions.

Thank you for building this!
Bruce
__________________
Bruce

Chooka chooka hoo la ley
Looka looka koo la ley
Old Apr-19-2012, 01:20 PM
#2580
jfriend is offline jfriend OP
Scripting dude-volunteer
Quote:
Originally Posted by T. Bombadil View Post
Hello John,

I LOVE this slideshow you've built.

Stupid question: Any idea why mine is constrained to a particular width (landscape photos are cropped to that width, so they look like portrait orientation - brucejordan.smugmug.com ).

I would be grateful for any suggestions.

Thank you for building this!
Bruce
You currently have a syntax error in your slideshow defintion in the bio so it isn't running. Add the missing comma here shown in green and remove the extra comma shown in red - there must be a comma after every option except the last one:

Code:
JF.InsertSlideshowHere({
    galleryURL: "http://brucejordan.smugmug.com/Other/System/Slideshow/7669619_nGjT63",
    splashImageURL: "http://brucejordan.smugmug.com/Pets/Dawg/i-5NKDk9L/0/L/DSC6069-L.jpg",
    superSize: "true",
    randomSlideStart: "true",
    randomSlideOrder: "true",
    splashMinDisplayTime: "4",
    stretchy: "true",
}
);
When you get it running again, I think you are missing the CSS from step 3 of the tutorial.
__________________
--John
Homepage Popular
JFriend's javascript customizations Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
Page 129  of  184
Tell The World!  
Tags
advanced , custom header , flash , help me , slideshow
Similar Threads Thread Starter Forum Replies Last Post
JFriend HTML5 Slideshow Linisa Legacy SmugMug Customization 3 Sep-10-2011 04:57 AM
JFriend Slideshow Covering up Main body and smugmug navbar stormy315 Legacy SmugMug Customization 1 Aug-15-2011 04:47 PM
Clean up bio before installing JFriend HTML5 slideshow DougG Legacy SmugMug Customization 6 Jun-03-2011 12:00 PM
New BETA release onethumb SmugMug Support 64 Jan-10-2007 05:14 PM
Adobe Camera Raw 2.4 beta (update-full release 1/31/05) patch29 The Big Picture 3 Jan-31-2005 02:12 PM


Thread Tools
Display Modes

Posting Rules  
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump