Designer have 5 HighSlide questions

[djnykk]

Hi guys

I have just register one license for my web site deetronic.rs to show you my support. Thank you very much. I am trying to show my work using the easiest possible way but it has to work on PCs, MACs and also Android and iOS. Thats why I choose to register HighSlide.

Sorry for some dumb question I will probably ask but as I have no programming knowledge [I am just multimedia designer, working all [music, sfx, gfx design, apps, games, web site design, layout & prepress & animations] except programming so I would need some small assistance.

In short: I've created very simple html page here:

http://www.deetronic.rs/

and I work like this:

- draw a page in Photoshop
- slice it and export as tables [not css but all .html with tables] - old fashion way, I know, but I don`t know better
- open index.html with DreamWeaver and center the page.
- add background and make it repeat by x and not moving anywhere
- then open index.html page with - Microsoft Front Page [it has easier [to me] tools to make quick links and fix text layout to mach what I imagined]
- and at the end I open the same page with Dreamweaver and add behaviours - mouse-overs.

And thats all. Maximum of my programming experience you can see by visiting my old web site [still working today] - http://www.djnick.rs - but as it has flash navigation which is not visible on iOS So I could use Swiffy [Google's flash converter] to convert it to html5 - it works nearly great BUT I have no idea how to replace old flash navigation with html5 file.

Question about HighSlide:

At this page [it is still very alpha]:

http://www.deetronic.rs/ [please click on gfx design link [the only working] or use this link directly]
http://www.deetronic.rs/graphic-design-print-logo.html

you can see what I imagined gallery will looks like BUT needs some tweaking to be 100% what I imagined.

*** I am using your online editor : http://www.highslide.com/editor/

1) How to remove space between thumbnails? [is it padding command?] Currently there are 4 pixels space between each thumbnail. I want it to set to 0px.

2) How to enable or disable 2 pixel line that is gray color [#d0d0d0] from each thumbnail?

3) Is it easy to generate thumbnails from Flash [.swf] files and create something like on my old page [I've created all by hand]: http://www.djnick.rs/banners.html

4) Is it easy to generate video previews [like images] but instead them - to open in window - Youtube video? Like I did by hand on my web site: http://www.djnick.rs/tv.html

5) Now I wanted to re-edit some of my work [as it writes on your site - that images are deleted after 30 days], so this would be my link for re-editing HighSlide code online:

http://www.highslide.com/editor/?config ... ting%22%3A+[%22avatar.jpg%22,+%22banner-axway1.jpg%22,+%22banner-axway2.jpg%22,+%22banner-axway3.jpg%22,+%22billboard-centroproizvod1.jpg%22,+%22billboard-centroproizvod2.jpg%22,+%22billboard-immocentar.jpg%22,+%22billboard-putevi_srbije1.jpg%22,+%22billboard-putevi_srbije2.jpg%22,+%22billboard-putevi_srbije3.jpg%22,+%22billboard-putevi_srbije4.jpg%22,+%22billboard-zepter.jpg%22,+%22book-cover.jpg%22,+%22brochure-garage.jpg%22,+%22brochure-sgw-01.jpg%22,+%22brochure-sgw-02.jpg%22,+%22brochure-sgw-03.jpg%22,+%22brochure-sgw-04.jpg%22,+%22brochure-sgw-a4.jpg%22,+%22calendar-3d-2.jpg%22,+%22calendar-3d.jpg%22,+%22calendar1.jpg%22,+%22calendar2.jpg%22,+%22calendar3.jpg%22,+%22cd-2far.jpg%22,+%22cd-capital_punishment.jpg%22,+%22cd-pandoras_box_2012.jpg%22,+%22cd-xtc.jpg%22,+%22elektroposter-3g.gif%22,+%22elektroposter-mts.gif%22,+%22flyer-3030.jpg%22,+%22flyer-3volution.jpg%22,+%22flyer-alien.jpg%22,+%22flyer-choose_your_way.jpg%22,+%22flyer-digital_nexus.jpg%22,+%22flyer-dubINva.jpg%22,+%22flyer-event011.jpg%22,+%22flyer-health_hazards.jpg%22,+%22flyer-illusion.jpg%22,+%22flyer-maskball1.jpg%22,+%22flyer-maskball2.jpg%22,+%22flyer-maskball2004.jpg%22,+%22flyer-react.jpg%22,+%22flyer-zepter-leaflets.jpg%22,+%22flyer-zepter.jpg%22,+%22flyer-zepter_osiguranje.jpg%22,+%22flyer-zepter_party.jpg%22,+%22flyers-bar.jpg%22,+%22flyers-zepter-presentation.jpg%22,+%22id_cards-maskball.jpg%22,+%22id_cards-zepter.jpg%22,+%22magazine_as.jpg%22,+%22magazine_as1.jpg%22,+%22magazine_as2.jpg%22,+%22magazine_as3.jpg%22,+%22memo1.jpg%22,+%22poster-festival.jpg%22,+%22poster-maskball.jpg%22,+%22poster-maskball2004.jpg%22,+%22poster-meelena.jpg%22,+%22poster-my_world.jpg%22,+%22poster-nis.jpg%22,+%22poster-no_reason.jpg%22,+%22poster-recreate.jpg%22,+%22poster-sARTuration.jpg%22,+%22poster-say_no_to_drugs1.jpg%22,+%22poster-say_no_to_drugs2.jpg%22,+%22print-autocom.jpg%22,+%22print-centroproizvod.jpg%22,+%22print-gigatron1.jpg%22,+%22print-gigatron2.jpg%22,+%22print-gigatron3.jpg%22,+%22print-hennessy.jpg%22,+%22print-hennessy2.jpg%22,+%22print-lifestreet-airticket.jpg%22,+%22print-lifestreet-brochure.jpg%22,+%22print-lifestreet.jpg%22,+%22print-mobile_datasheet.jpg%22,+%22print-moet_and_chandon1.jpg%22,+%22print-pilici.jpg%22,+%22print-sgw-inside.jpg%22,+%22print-sgw-outside.jpg%22,+%22print-skoda.jpg%22,+%22print-truck.jpg%22,+%22print-zepter-annual_raport1.jpg%22,+%22print-zepter-annual_raport2.jpg%22,+%22print-zepter-annual_raport3.jpg%22,+%22print-zepter-cleansy.jpg%22,+%22print-zepter-coupons.jpg%22,+%22print-zepter-homeart1.jpg%22,+%22print-zepter-homeart2.jpg%22,+%22print-zepter.jpg%22,+%22sales_letter.jpg%22,+%22the_cow.jpg%22,+%22tv-ad1.jpg%22,+%22tv-ad2.jpg%22,+%22tv-ad3.jpg%22,+%22tv-ad4.jpg%22,+%22tv-ad5.jpg%22,+%22tv-ad6.jpg%22,+%22tv-ad7.jpg%22,+%22tv-ad8.jpg%22,+%22tv-ad9.jpg%22,+%22tv-dvd.jpg%22,+%22tv-poster1.jpg%22,+%22tv-poster2.jpg%22,+%22tv-poster3.jpg%22,+%22tv-poster4.jpg%22,+%22tv-poster5.jpg%22,+%22tv-slogogram.jpg%22,+%22tv-therapy_air.jpg%22,+%22visit_cards-1.jpg%22,+%22visit_cards-2.jpg%22,+%22visit_cards-djnick-deetronic.jpg%22,+%22visit_cards-gigatron.jpg%22],+%22thumbWidth%22%3A+%22156%22,+%22thumbHeight%22%3A+%22112%22,+%22clipThumbs%22%3A+true,+%22largeWidth%22%3A+%221200%22,+%22largeHeight%22%3A+%22900%22,+%22numberPosition%22%3A+%22caption%22,+%22numberStyles%22%3A+%22%5Ctcolor%3A+%23666666;%5Ctfont-weight%3A+bold;%5Ctfont-size%3A+10pt+!important;%5Ctpadding%3A+0px;%5Ctpadding-right%3A+0px;%5Ctpadding-bottom%3A+0px;%5Ctpadding-left%3A+0px;%5Ctborder-width%3A+0px;%5Ctborder-right-width%3A+0px;%5Ctborder-bottom-width%3A+0px;%5Ctborder-left-width%3A+0px;%5Ctborder-color%3A+%23FFFFFF;%5Ctborder-right-color%3A+%23FFFFFF;%5Ctborder-bottom-color%3A+%23FFFFFF;%5Ctborder-left-color%3A+%23FFFFFF;%5Ctborder-style%3A+solid;%5Ctborder-right-style%3A+solid;%5Ctborder-bottom-style%3A+solid;%5Ctborder-left-style%3A+solid;%5Ctmargin%3A+0px;%5Ctmargin-right%3A+0px;%5Ctmargin-bottom%3A+0px;%5Ctmargin-left%3A+0px;%22,+%22thumbstripSize%22%3A+%2260%22,+%22htmlWidth%22%3A+%22800%22,+%22htmlControlsLayout%22%3A+%22icon-text%22%7D

Unfortinatelly when I copy/paste this link - it starts all over

How to re-edit this work? I would like to re-arrange thumbnails.

Thats all. I hope I didn`t ask too much.

[RoadRash]

Hi,

1 & 2.
Remove space and border for thumbnails:
Open highslide.css in Dreamweaver and find these two settings near the bottom:

Code: Select all

.highslide img {
	border: 1px solid #D0D0D0;
}

Code: Select all

.highslide-gallery ul li {
	width: 106px;
	height: 106px;
	border: 1px solid #D0D0D0;
	background: #EDEDED;
	margin: 2px;
}

Change them to this:

Code: Select all

.highslide img {
	border: none;
}

Code: Select all

.highslide-gallery ul li {
	width: 156px;
	height: 112px;
	border: none;
	background: none;
	margin: 0;
}

3.
How to generate thumbnails from Flash isnt exactly related to Highslide But one solution would be using a screenshot of the Flash.
See this demo page for how to open Flash in Highslide popup: http://highslide.com/examples/flash.html
You will also find Flash as an option in the Highslide Editor ÔÇô HTML tab => Flash (You will not be able to insert your own flash file, you have to replace the demo file with your own file in the HTML markup after youÔÇÖve downloaded the code.)

4.
YouTube: Please see this demo page: http://roadrash.no/hs-support/youtube-center-new.html
See this external blog post for how to get the thumbnail thatÔÇÖs created by YouTube: http://www.reelseo.com/youtube-thumbnail-image/

5.
I guess your 30 days have expired since your link doesnÔÇÖt work. The link will not work after the images are deleted from our server. You have to re-arrange the thumbnails manually (move the li tags in the HTML markup) after the 30 days have expired.

Additional:
I can see that you gallery misses a couple of settings: You need to center the large images, you need to add hs.marginBottom to avoid the large images to cover the thumbstrip on smaller screens and you need to set fixedControls to false instead of 'fit' to avoid that the images stays at the bottom of the veiwport when going from a landscape image to a portrait image.
Open you highslide.config.js file in Dreamweaver and add these two lines:

Code: Select all

hs.marginBottom = 100;
hs.align = 'center';

Find this line:

Code: Select all

fixedControls: 'fit',

Change it to this:

Code: Select all

fixedControls: false,

Note: no single quotes around false!

This is a working link to your gallery configs in the Highslide Editor (without your images) containing the above changes:
http://www.highslide.com/editor/?config ... text%22%7D

[djnykk]

Thank you very much for your help! I will investigate it tomorrow

In the mean time I asked a friend to take a look and this is what he gave me in "highslide.css" where he added:

Code: Select all

.highslide img {
	border: 1px solid #D0D0D0;
  border: 0; /*za djnicka */
}
.highslide:hover img {
	border-color: #A0A0A0;
}
.highslide-active-anchor img {
	visibility: visible;
	border-color: #808080 !important;
}
.highslide-dimming {
	background: #000000;
}
.highslide-image {
	border: 2px solid #FFFFFF;
}

I will see it later tomorrow see how it works! Thank you again very very much!