(I have limited coding experience)
I have a template file for a website and currently the image gallery for the site opens in a new page, I would like instead for the image gallery to not open additional pages/tabs and instead contain images in rows of five with one large main image under the rows all within the same page, I would like the main image when scrolled over with the mouse it zooms in on the picture Also when you click on the smaller additional images (in rows of five) it will change the main bigger image to the image that was clicked and allow the zoom in feature as well.
What are the tags I need to place in the template file (in the link below) and where do I put the tags?
Shown below is the current tags in the template
This is the picture gallery tags in the template file of the site:
<!-- picture gallery -->
<script type="text/javascript">myThumbs = ##CST_ITEM_IMAGE_ARRAY_T##;myPix = ##CST_ITEM_IMAGE_ARRAY_M##;</script>
Here is a link to the template file and a pdf of what I am trying to accomplish
http://sdrv.ms/UCHk8z
Here is what the current image gallery looks like now that needs to be changed to not open a new window
http://www.ebay.com/itm/4-Behringer-B208D-Active-800-Watt-2-Way-PA-Speaker-Systems-8-Woofer-/390478326914?pt=US_Pro_Audio_Speakers_Monitors&hash=item5aea526c82
I am not proficient with programming I understand some things but not how it all flows together, I only know basic links and tags so thank you everyone for your help, I greatly appreciate all the responses. I have been Google searching everything to no success.
According to my understanding of your question I think you require something like Thumbnail gallery , if so refer the below url
http://www.queness.com/post/3141/10-image-galleries-jquery-script-with-thumbnail-filmstrip
so I have choose one ( http://www.robertnyman.com/picture-slides/) to use for your purpose right so by that 80% of work is done just download the demo of that and is it will be easily understandable, in your case you can see 3 links in demos click on the one you like and download it and use it
so you have downloaded the file using the picture gallery link, so you will get a zip file which consists of gallery and _Macosx don't bother about the Macosx.
Now go into the gallery file in that there will be a index.html,css and required js, copy them where you require and if you see the index html there will be a div which consists of Picture slider container class div, complete the copy the div and paste it where you require.... Thats it :D
Note: Make sure you give the correct paths to the images, thumbnails, css and js
Hope this helps
Related
I know there is a way to embed an autostarted looping slide show like this:
http://responsiveslides.com/
But let's say I want to add a new photo to the slide show. That means that I will have to go into the html code and add/delete code linking the image files. I want to just add pictures (could be to a local folder or a web site doesn't matter) and it updates the slide show with the new images. I know you can use flickr.com, but it does not have the autostart or looping features. Does anyone know of a way to do this?
enter code here
https://jsfiddle.net/jmwbLqxq/2/
Stole this from W3 obviously, except added the css to do the silky animation. All you have to do is add another img tag.
Edit:
In response to what you said, you would have to make a server side database and a 'upload images' button to add images to the database. When the screen loads, it runs your server side code that queries the database for the images, loops through them and inserts into html.
I'm trying to insert a free gallery slider called iDangerous slider into a website. The source consists of two files - one a .css file and one a .js file source.
However, I have absolutely no idea even how to begin to use it. I can't see how to insert it into the website's HTML, nor how to insert the images that the slider gallery will use. Many thanks for any help
If i look at Amazon Button to add items to lists on their site - you can see it here:
http://www.amazon.co.uk/wishlist/get-button
How does it work? I'm pretty sure it scrapes the page somehow but it seems to get every image whether its a flash image, jpg or anything, even when the site in question uses relative img src as opposed to absolute full site urls
Example page below, all images shown are jpg which is cool but all img src are relative meaning no "http://blah.com" before them
http://gadgets.guardianoffers.co.uk/p-788-Casio-Solar-Powered-Edifice-Watch.html
Is there a better way to get images other than parsing the html source?
Or are they just doing a million ifs if they don't get a hit straight away?
It looks like it parses the HTML of the page and looks for what is semantically identified as the primary image, name and price. For example, if you look at a page that doesn't have any ecommerce products, for example: http://www.theglobeandmail.com/ it takes the page h1 element as the product name and the primary image (front page story image) as the product image.
So behind the scenes they are doing a lot of guessing. Using HTML 5 semantic markup, you could establish a standard for this kind of thing, but unless everyone is using it, you are just making educated guesses.
I have pdf embedded in html, pdf embedded object has internal controls & so on. But they are smnall. I need make them bigger. I.e. external.
Now have a problem, - how to make page up/[age down, with external buttons/links? I try send up/down to holder DIV - but with no effect. Is this ever possible to do ?
I hear that somehow is possible make an images from PDF, but i need this at UNIX hosting, and this will be not an PDF.
Pls help me
Please read about PDF Open Parameters. I think you might be able to manipulate embedded PDF with that parameters.
Another approach is to create a set of images from your PDFs using some PDF library.
And another approach is to use Google Docs PDF Viewer.
You can create the scroll plugin to make up/down. however you can create the master DIV with static width and height and overflow hidden, and then make the child div inside this. Then with your external buttons, when you click to down, you must be decrease the top of the child DIV. and then you got it. have good time.
im making a program that generates rgb, hsl, and hex# colors in 6 swatches, the other 5 swatches being complementary light and darker colors. I need to have a button that when pushed inserts another html file (something very basic that has some styling) and then another button that when pushed styles the example html file previously inserted with the colors the user inputed.
a simple way to put it is basically to show the user how the colors generated would look on an example website page. So on the new html file, the new colors generated would display for the user to see. Like the font color would change, toolbars, calendar, anything like that.
How would I go about doing this? my code generates the colors, and I inserted an so I can see my sample website, I just dont know how to style the css of the example html code. any suggestions would work perfect! I dont know how to attach files on this website but if you need me to email you all my code I can do that. just let me know thank you!
Like Derek said, iframes are used for inserting pages or parts of pages into other pages, but I'd say it'd make more sense for you to use a div rather than an entire new HTML page.
An inline frame is used to embed another document within the current
HTML document.
http://www.w3.org/community/webed/wiki/HTML/Elements/iframe
http://www.w3.org/TR/html4/present/frames.html#h-16.5
http://www.w3schools.com/tags/tag_iframe.asp