JQuery :: Best Way To Design / Create Slideshow For Images / Video And Content?
Sep 20, 2011
I wanted to start my research on the topic of slideshows here and ask if anyone knows what's the best method for creating a slideshow that should have the ability to display images and videos (and bookmark them)? It can be a plug-in, but this is for a client so it has to be okay for commercial use (and free).It should also be able to support other content like ads and polls/questionaires, in the form of a div. Also HTML 5 compatible with all the cross-browser compatibility one would expect.
I've built this webpage : [URL]. Now, I want the slideshows (Jquery Cycle) to have a pager to navigate the images instead of previous and next [URL].
My code looks like this : function ajaxpage(url, containerid) { var $container= $('#' + containerid); $container.hide().load(url, function() { $container.fadeIn(); $('.slideshow') .cycle({ next: '#next2', prev: '#prev2', fx: 'blindX', speed:'1500', timeout: 0, ..... after: function() { var alt = $(this).attr('alt'); // do something with alt text $('#someElement').html(alt); }}); });}
The code I need to implement looks like this : $ ('#slideshow' ).before('<ulid="nav">' ).cycle({fx:'turnDown' ,speed:'fast' ,timeout:0 ,pager:'#nav' ,//callbackfnthatcreatesathumbnailtouseaspageranchor pagerAnchorBuilder:function (idx,slide){return '<li><ahref="#"><imgsrc="' +slide.src+'"width="50"height="50"/></a></li>' ;}}); How to do this successfully?
Been looking around for 3 days now, I found exactly the style that I want, have images on my web site, all I need is for someone to show, explain to me how exactly this pagination or whatever it is works, how do i select which actual images from my site or where to be shown in the main window and also the thumbnails below?
as I said, I already know what kind of slide show I want, it's in this link the lower right version of slideshow with the pics of two horses and stuff: [URL] I already have the script on my site but but can't figure out how to place my images: [URL] and I want THUMBNAILS on the bottom like in the first link.... not the text
I'm trying to create a video box on a website that plays a youtube video and then automatically plays random recommended videos with no break in playback. An endless playlist created by youtube based on the initial video. Youtube uses Javascript API. I have never used Javascript before but i'm just trying to get the video to play as above. There are few tutorials online and I couldn't find anyone trying to do a similar thing.
So Im trying to create a slideshow with thumbnails the user can scroll through and use to navigate the slideshow. I'm a big fan of cycle so I wanted to use that as my main slideshow component and was planning on using jcarousel for the pager. So far it works great in Firefox, Chrome, and Safari, yet in IE the thumbnails are not loading. I'm guessing it has something to do with how the images in the pager are generated and then jcarousel just isnt proccessing that in IE but I 'm not sure. I feel like I'm very close to getting this slideshow to work, yet I need to figure out why it is failing in IE.
I am a total jQuery newbie and am looking to find a slideshow slider plugin that will support 3 photo slides and 1 video slide. Can anyone tell me if anything like this exists and, if so, which one would work for me? I like Coin Slider because I can link the images but it doesn't mention if it supports video as well (which I don't need to link).
I have to do a slideshow with images of different widths... am using cycle plugin, which I like very much... I have a little test slideshow here, http:[url]....it's not centering imgs in containing div (I made div width of widest image.. this will work for my situation, in which imgs will be hard-coded..)if you inspect img element in firebug (#slideshow img), it shows that the plugin adds a style of position: absolute; top: 0px; left: 0px .to the img; why does the plugin do this.. how can I center the images in containing div...
Iīve just launch my website-portfolio, well itīs not yet the final version but it is almost and despite I am satisfied with the final result Iīve detected a really strange bug that only happens sometimes. The thing is when the first introduction Slide appears (the one with the hand-made drawings), sometimes the images shrink from the normal size to small tiny images. This doesnīt happen always and if you refresh the page it disappears.
Follow the link to the page were the bug happens - [url]. I'm using jquery cycle plugin, check it out.
Is there an extension or plugin that could take a url to some media -- video, audio, image -- and just load it / display it on the page? I came across jQuery Media [URL]... and it looks like a good start at what I'd need. Although it just focuses on video and audio, not general images.
I've hit a little bit of a road block developing this site: [URL]. I'm attempting to use the thumbnails to load a new video in the main object. I've used this: $(document).ready(function(){ $('.thumbnail').bind('click', function() { new_video = $(this).attr('href'); $('.main_video').attr('src', new_video); $('.main_video').siblings('param').attr('value', new_video); return false; }); }); To replace the attributes in the object, but at this point, the source has the new arguments, but it needs to reload as the actual element still contains the old video. Should I somehow use AJAX to refresh this div? Should I reconstruct my jQuery somehow?
I prefer jQuery over flash and not sure how to tackle this, so please advise as best you can. Trying to create a site that allows for images to go full browser and then have the ability to have the other images slide in based on a click.
I also want to float a menu that will allow it to pull in other media (video, that would slide in the same way). The best example I can share is this: http://j.mp/5U79i1 What he is using is flash based (slideshowpro director and slideshow pro for flash). Not interested in flash for this personal project.
I have a video gallery with a bigger div with width 500 pixels where the main video is waiting to be played and below is a smaller div with all the others videos from the gallery having width of 80 pixels.The list of video are managed by a content management system in PHP and are the result of youtube "Share Embed action" where the result is an iframe with the link for the video.How can i clicking on a video from the smaller div see the video being displayed in the bigger div ? already playing? or in a new layer above the website ?For now the video plays in the div it is located at.As an example here is the source video format :
I am trying to create a pop up window to view a video stream but it's not working. When I click on the image the pop up window doesn't appear. I have an oscMax site (this is oscommerce with more bells and whistles). This is my html code on my index page:
I have preloaded the images i want to use into an array and want to cycle thruindefinitely each image in the array, and use the each function on the array. The array isvar imgs = [];
I have a div such as this
<div id="mydiv"></div> & with current styling such as this - #mydiv{ background-image: url(myimg.jpg);
[Code]....
only the last image shows up... I am going around the bend ( turning green, red, and face rgb (255,255,255)
At my whits end with trying to get jquery cycle to play nice with IE and pngs. I know its the opacity issue but I just can't tweak it.Can someone please suggest a better solution for my slideshow? Check the link below to see what I have now. i would like something similar that is also clean.http://vismarkgroup.com/dev/vision/
I am using the jQuery plugin to create slideshow and also a accordion menu. Slideshow: [URL] The accordion menu is not working if the slideshow is working. I am new to this jQuery world.
The below is the HTML script <html><head> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript" src="nested.accordion.js"></script> <script type="text/javascript" src="jquery-ui.min.js"></script> <link rel="stylesheet" href="style.css" type="text/css" /> <script type="text/javascript"> jQuery(document).ready(function(){ jQuery("#main").accordion({ .....
In the above script, slideshow is working fine but the accordion is not working. If I comment the lines 5, 16, 17,18 then the accordion is working but slideshow is not working. There is no errors thrown.
I'm attempting to dynamically create a QuickTime embedded movie. I'm including the AC_Quicktime.js script which contains methods for creating the embedded movie easily and putting it into an existing DIV. This is working correctly, however the movie will not load. Here's the code that I'm using.
Code:
function loadMovie() { var objectTxt = QT_GenerateOBJECTText_XHTML('poster.jpg', '100%', '100%','','controller','true','autoplay','true','showlogo','true','moviename','stream', 'obj#ID', 'stream', 'cache','false','href','rtsp://192.168.20.105:554
I found a jquery image slideshow script but the images have no links to them. When I manually add the links to the image urls, these work only in IE - when I click next, the picture updates and is linked to the correct URL. In other browsers (Firefox, Chrome..), the last url becomes the clickable link for all the images. I have tried to use the .wrap option and I'm sure I'm on the right track, except I have 4 images and I want it to go to 4 different urls.it sought of works, but only the first url is picked up and becomes the link for all the images.How can I get the link reference for the url to iterate with the original loop of the image?
I am having an issue with my slideshow images not always loading correctly and instead displaying just a thumbnail of the image. If I reload the page the image works correctly [code]...
I am using jQuery with a Brightpearl website, except on one of our pages, (edit your address book page), the slideshow images, instead of fading one into the other as it should, decide to tile over the top of the page and don't fade at all. The input boxes show through, but not the submit button, so it renders the page useless.
I'm creating a slider with the Cycle plugin and ran into a little bit of a road block.
What I want to do is simply have anchor links on my slideshow images, which I can get working just fine, except that when I add these anchor links, it removes my image caption (which worked prior to adding anchors on my images)
I am looking to build a slideshow (basic, with next/previous options, e.g jquery cycle) but I would like it to get the images from a specific folder. So, whenever I want the slideshow updated, I would simply drop the files in a folder and that would do it.
Would this require a php script? If yes, direct me to somewhere to find out more...Or if there are other ways.
I'm trying to create a Youtube video inserter script for my site. Long story short, I need to be able to prototype an HTML element and add a string into the element's innerHTML, like this:
SlidShow to show more than 6 images at a time. Here is the development link: [URL] - there are 12 pictures but only 6 are showing there. Same with [URL] where is the setting to expand it to show ALL images I specify, not just the first 6?
I have written a javascript slideshow with pause-play-next-previous buttons, but the images are too many and users have to wait too long especially with slower connections - i wonder if anybody can suggest a way to implement the script with fast preloading of the first few images, increment preloading or a similar trick. I will copy my code below but i also copy first this link:
[URL]
which is an example of increment loading slideshow working fine! javascript and i wouldnt know how to customize it in order to take away the link function, that i dont need, and add captions and buttons etc.
I do know some jquery plugin could do but i am trying to go more into the code, even though i still need a lot of advices and tutorials, the goal is solving this specific problem but also learning! Thx a lot in advance.
Here my code (just 2 images here in the list to make it shorter for you, the complete list is more than 50 pics!):
<script language="JavaScript"> <!-- var interval = 8000; var random_display = 0; var imageDir = "portraits/";
